首页 / WordPress开发 / wordprss主题制作教程(五):制作头部文件-header.php

wordprss主题制作教程(五):制作头部文件-header.php

    • 珂李斯

    发布于

    by

    一般说来我们网站的所有页面的头部和底部基本相似，所以我们可以将这些相似的代码放到一个文件中，然后在每个模板文件…

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

    接着上一篇教程，我们在做主题文件夹contentthemesAurelius下面新建一个头部文件header.php，然后将index.php中的头部代码提取(剪切)出来，写入这个文件：

    1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    2. <html xmlns=“http://www.w3.org/1999/xhtml”>
    3. <head profile=“http://gmpg.org/xfn/11”>
    4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
    5. <title>Aurelius | Blog</title>
    6. <!– Stylesheets –>
    7. <link rel=“stylesheet” href=“./style.css” type=“text/css” media=“screen” />
    8. </head>
    9. <body>
    10. <div id=“wrapper” class=“container_12 clearfix”>
    11.     <!– Text Logo –>
    12.     <h2 id=“logo” class=“grid_4”>Aurelius</h2>
    13.     <!– Navigation Menu –>
    14.     <ul id=“navigation” class=“grid_8”>
    15.         <li><a href=“contact.html”><span class=“meta”>Get in touch</span><br />
    16.             Contact Us</a></li>
    17.         <li><a href=“blog.html” class=“current”><span class=“meta”>Latest news</span><br />
    18.             Blog</a></li>
    19.         <li><a href=“index.html”><span class=“meta”>Homepage</span><br />
    20.             Home</a></li>
    21.     </ul>
    22.     <div class=“hr grid_12 clearfix”>&nbsp;</div>
    23.     <!– Caption Line –>
    24.     <h2 class=“grid_12 caption clearfix”>Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
    25.     <div class=“hr grid_12 clearfix”>&nbsp;</div>

    保存好头部文件，在index.php的前面加上代码：

    1. <?php get_header();?>

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

    1. <?php get_header();?>

    现在头部文件已经制作好了，接下来的工作就是编辑头部文件header.php将里面的静态html代码换成动态的php代码。
    首先我们需要更改信息，一般我们将title信息改成这样的： 文章页面标题 | 网站名称 当然你也可以根据自己的seo只是更改，比如有的人在标题中加入网站描述。将header.php中的<title>Aurelius | Blog</title>改成下面的代码：

    1. <title><?php if ( is_home() ) {
    2.         bloginfo(‘name’); echo ” – “; bloginfo(‘description’);
    3.     } elseif ( is_category() ) {
    4.         single_cat_title(); echo ” – “; bloginfo(‘name’);
    5.     } elseif (is_single() || is_page() ) {
    6.         single_post_title();
    7.     } elseif (is_search() ) {
    8.         echo “搜索结果”; echo ” – “; bloginfo(‘name’);
    9.     } elseif (is_404() ) {
    10.         echo ‘页面未找到!’;
    11.     } else {
    12.         wp_title(”,true);
    13.     } ?></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文件中找到下面代码

    1. <link rel=“stylesheet” href=“./style.css” type=“text/css” media=“screen” />

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

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

    1. <link rel=“stylesheet” href=“<?php bloginfo(‘stylesheet_url’); ?>” type=“text/css” media=“screen” />

    bloginfo()函数很常用，函数参数和用法如下：

    1. <?php
    2. bloginfo();
    3. /*
    4. 该函数会根据参数直接输出信息，参数：
    5.     name 博客标题-默认
    6.     description-描述信息
    7.     url-博客url
    8.     rss2_url-博客的rss2.0feed地址
    9.     template_url 模板地址
    10.     charset 编码方式
    11.    stylesheet_url 样式表路径
    12. home网站首页url
    13. */
    14. /*
    15. 如果不需要直接输出而是获取对应的参量，使用下面的get_bloginfo，参数同上
    16. */
    17. get_bloginfo();
    18. ?>

    bloginfo(‘stylesheet_url’)会自动输出网站主题文件夹下style.css文件的绝对网址，如http://localhost/wp/wp-content/themes/Aurelius/style.css

    不过，还有几张图片的路径不对，还不能显示出来，用文本编辑器打开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中的如下代码：

    1. <h2 id=“logo” class=“grid_4”>Aurelius</h2>
    2. <h2 class=“grid_12 caption clearfix”>Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>

    修改成：

    1. <h2 id=“logo” class=“grid_4”><a href=“<?php echo get_bloginfo(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h2>
    2. <h2 class=“grid_12 caption clearfix”><?php bloginfo(‘description’); ?></h2>

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

    第四步：添加wp_head。

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

    1. <?php wp_head(); ?>

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

    1. <link rel=“EditURI” type=“application/rsd+xml” title=“RSD” href=“http://ludou.co.tv/blog/xmlrpc.php?rsd” />
    2. <link rel=“wlwmanifest” type=“application/wlwmanifest+xml” href=“http://ludou.co.tv/blog/wp-includes/wlwmanifest.xml” />
    3. <link rel=’index’ title=’露兜实验室’ href=’http://ludou.co.tv’ />
    4. <meta name=“generator” content=“WordPress 2.9.2” />

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

    第五步：显示菜单栏

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

    1. <ul id=“navigation” class=“grid_8”>
    2.     <li><a href=“contact.html”><span class=“meta”>Get in touch</span><br />
    3.         Contact Us</a></li>
    4.     <li><a href=“blog.html” class=“current”><span class=“meta”>Latest news</span><br />
    5.         Blog</a></li>
    6.     <li><a href=“index.html”><span class=“meta”>Homepage</span><br />
    7.         Home</a></li>
    8. </ul>

    修改成加载菜单的函数：

    1. <?php wp_nav_menu( array(‘sort_column’ => ‘menu_order’, ‘container_id’=>’menu’,’menu_id’=>’navigation’) ); ?>

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

    1. //注册菜单
    2. if( function_exists(‘register_nav_menus’) ){
    3.     register_nav_menus(
    4.         array(
    5.             ‘primary’ => __( ‘主导航菜单’ ),
    6.         )
    7.     );
    8. }

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

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

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

    最后提供露兜博客经过修改后的文件，以提供参考比较

    下载该文件

    类别：WordPress开发、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！