不会健身的程序员
不是好作家

深入浅出wordpress主题制作(五)头部文件-header.php

在看了上篇文章《深入浅出wordpress主题制作(四)开始制作模版》之后大家把模版中除了index.html和style.css的其他文件全部放入wp-contentthemesAurelius下,并把所有的.html文件改成.php文件,于是我们就有了archive.php、contact.php、full_width.php、page.php和single.php。

一般说来我们网站的所有页面的头部和底部基本相似,所以我们可以将这些相似的代码放到一个文件中,然后在每个模板文件载入这个头部和底部文件即可,这样我们就不需要给每个模板都把头部和底部文件都写一遍,而且修改方便,改了头部文件,所有页面都会生效。

接着上一篇教程,我们在做主题文件夹contentthemesAurelius下面新建一个头部文件header.php,就是从开头截取到

<!-- Caption Line -->

之前,截取的内容包括head头和logo,Navigation Menu,因为每个网页的这些年内容基本一样,然后将index.php中的头部代码提取(剪切)出来,写入这个文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aurelius | Blog</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" class="container_12 clearfix">
    <!-- Text Logo -->
    <h1 id="logo" class="grid_4">Aurelius</h1>
    <!-- Navigation Menu -->
    <ul id="navigation" class="grid_8">
        <li><a href="contact.html"><span class="meta">Get in touch</span><br />
            Contact Us</a></li>
        <li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />
            Blog</a></li>
        <li><a href="index.html"><span class="meta">Homepage</span><br />
            Home</a></li>
    </ul>
    <div class="hr grid_12 clearfix">&nbsp;</div>

保存好头部文件,在index.php的前面加上代码(就是用下面的代码替换掉之前剪切的内容):

<?php get_header();?>  

get_header()函数会自动载入主题文件夹中的header.php文件,所以头部文件的文件名命名为header.php然后使用get_header()函数即可。同样的编辑主题文件夹的其它文件:archive.php、contact.php、full_width.php、page.php和single.php,删掉以上类似代码,也改成

<?php get_header();?> 

现在头部文件已经制作好了,接下来的工作就是编辑头部文件header.php将里面的静态html代码换成动态的php代码。

修改header.php文件

第一步:修改标题

一般我们将title信息改成这样的: 文章页面标题 | 网站名称 当然你也可以根据自己的seo只是更改,比如有的人在标题中加入网站描述。将header.php中的<title>Aurelius | Blog</title>改成下面的代码:

<title><?php
if ( is_home() ) {
    bloginfo('name'); echo " - "; bloginfo('description');
} elseif ( is_category() ) {
    single_cat_title(); echo " - "; bloginfo('name');
} elseif (is_single() || is_page() ) {
    single_post_title();
} elseif (is_search() ) {
    echo "搜索结果"; echo " - "; bloginfo('name');
} elseif (is_404() ) {
    echo '页面未找到!';
} else {
    wp_title('',true);
} ?></title>

上面的代码通过判断将首页、文章页、分类页、404页面的<title>信息设置成不一样的形式,这样是很有必要的。

几个判断函数的解释如下:

  1. is_home() :当前页面为主页时返回true
  2. is_category():当前页面为分类页时返回true
  3. is_single():当前页面为单文章页时返回true
  4. is_page():当前页面为单页面时返回true
  5. 更详细的内容参阅WordPress文档:条件标签

所以如果想根据自己的需要制作一个主题,不会php的话会很不方便,所以个人建议,如果打算制作主题,有必要去学习一下php

第二步:修改css文件的路径

在header.php文件中找到下面代码

<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />  

也许你有会问,主题文件夹中不是有个style.css文件吗?为什么访问网站的时候没有加载样式表呢?

因为这个样式表的路径./style.css其实是网站根目录,在以后的教程中我们会讲到,如果你不想让别人轻易看出你的网站是使用wordprss程序,那么你可以改变图片、样式表等文件的路径,直接把样式图片文件放在wordpress根目录下,这样在网页代码中就不会出现wordprss站才有的wp-content/themes之类的路径。好了,将上面的代码改成:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />  

bloginfo()函数很常用,函数参数和用法如下:

<?php
bloginfo();
/*
该函数会根据参数直接输出信息,参数:
    name 博客标题-默认
    description-描述信息
    url-博客url
    rss2_url-博客的rss2.0feed地址
    template_url 模板地址
    charset 编码方式
    stylesheet_url 样式表路径
home网站首页url
*/
/*
如果不需要直接输出而是获取对应的参量,使用下面的get_bloginfo,参数同上
*/
get_bloginfo();
?>  

bloginfo(‘stylesheet_url’)会自动输出网站主题文件夹下style.css文件的绝对网址,大家启用主题,并访问首页,然后右键查看源代码之后会看到那串代码已经变成了

<link rel="stylesheet" href="http://localhost/wp-content/themes/aurelius/style.css" type="text/css" media="screen" /> 

不过,还有几张图片的路径不对,还不能显示出来,用文本编辑器打开index.php、archive.php、contact.php、full_width.php、page.php和single.php,给这些图片加上正确的URL,搜索代码,将所有的:src="images/,批量替换成src="<?php bloginfo('template_url'); ?>/images/。现在再刷新你的主页,看文章的缩略图610×150是否可以正常显示。

第三步:更改博客名称和描述信息

我们要将博客名称和描述,改成我们在后台设置的信息,将header.php中的如下代码:

<h1 id="logo" class="grid_4">Aurelius</h1> 

修改成:

<h1 id="logo" class="grid_4"><a href="<?php echo get_bloginfo('home'); ?>/"><?php bloginfo('name'); ?></a></h1> 

可以看到这里还是bloginfo和get_bloginfo函数,所以说这两个函数经常用到。

第四步:添加wp_head

wp_head函数对于要使用插件的主题来说比较重要,一般如果插件需要加载css文件和js文件,都是通过wp_head()函数输出的。在header.php文件的</head>前面添加:

<?php wp_head(); ?>  

在去看你的网站,查看网页源代码,会发现<head></head>标签中多了如下代码:

<link rel='stylesheet' id='admin-bar-css'  href='http://localhost/wp-includes/css/admin-bar.min.css?ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='wp-postratings-css'  href='http://localhost/wp-content/plugins/wp-postratings/postratings-css.css?ver=1.63' type='text/css' media='all' />
<script type='text/javascript' src='https://localhost/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.5.1" />
    <link type="text/css" rel="stylesheet" href="http://localhost/wp-content/plugins/syntax-highlighter-with-add-button-in-editor/styles/shCoreDefault.css" />
    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
    html { margin-top: 28px !important; }
    * html body { margin-top: 28px !important; }
</style>
<!-- wp thread comment 1.4.9.4.002 -->
<style type="text/css" media="screen">

.editComment, .editableComment, .textComment{
    display: inline;
}
.comment-childs{
    border: 1px solid #999;
    margin: 5px 2px 2px 4px;
    padding: 4px 2px 2px 4px;
    background-color: white;
}
.chalt{
    background-color: #E2E2E2;
}
#newcomment{
    border:1px dashed #777;width:90%;
}
#newcommentsubmit{
    color:red;
}
.adminreplycomment{
    border:1px dashed #777;
    width:99%;
    margin:4px;
    padding:4px;
}
.mvccls{
    color: #999;
}

</style>

当然这些代码是多余的,比如程序版本?告诉别人程序版本,是不安全的。所以在以后的教程中我们会讲到,如何去除这些多余的头部信息。

第五步:显示菜单栏

当前菜单有几个菜单项,但是都是静态的,我们希望能在后台控制,在头部文件header.php中找到下面代码:

<!-- Navigation Menu -->
    <ul id="navigation" class="grid_8">
        <li><a href="contact.html"><span class="meta">Get in touch</span><br />
            Contact Us</a></li>
        <li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />
            Blog</a></li>
        <li><a href="index.html"><span class="meta">Homepage</span><br />
            Home</a></li>
    </ul>

修改成加载菜单的函数:

<!-- Navigation Menu -->
<?php wp_nav_menu( array('sort_column' => 'menu_order', 'container_id'=>'menu','menu_id'=>'navigation') ); ?>  

不过添加了菜单函数,还得后台有个菜单控制的哦,所以我们需要再后台注册一个菜单。在主题下面新建一个functions.php,在functions.php中添加以下代码即可:

<?php
//注册菜单
if( function_exists('register_nav_menus') ){
    register_nav_menus(
array(
            'primary' => __( '主导航菜单' ),
        )
    );
}
?>

之后进入后开即可看到后台即可看到主题支持菜单了。这个函数是最新的菜单函数,跟原文不一样。wp_nav_menu函数参数稍多,这里就不加解释了,可以到官网搜索。。

到现在为止,你的主题虽然能够从后台控制头部代码了,但是还是只能看到一个页面,因为只有头部是动态的,其它位置都是静态的。

但是头部文件还有一个重要的信息没有添加,那就是描述和关键字。这个在下一篇教程中专门讲解。

知识点

  1. get_header函数的使用
  2. is_home,iscategory,is_single, is_page等函数的使用
  3. bloginfo,get_bloginfo函数的使用
  4. wp_head函数的使用

下载

最后附上小林依据本篇文章所做的修改,给大家提供参考,传送门效果截图

赞(0)
转载请注明出处:林俊龙博客 » 深入浅出wordpress主题制作(五)头部文件-header.php

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

年年岁岁花相识,岁岁年年人不同

给我留言网站地图

谢主隆恩

支付宝扫一扫打赏

微信扫一扫打赏