WordPress主题制作全过程（五）：制作header.php

2019-10-15 22:20:06

字体：大中小

来源：转载

供稿：网友

你可以尝试用文本编辑器打开从WordPress主题制作全过程（三）：HTML静态模板制作下载到的 .html 文件，不知道你有没有发现他们头部的代码都非常的相似呢？其实我们可以提取这部分相似的代码，放到一个单独的文件header.php中，各个页面想用这部分代码的时候再用php的include包含进去，省的每个页面里面都要写这部分代码，更改起来也可以达到一改全改的目的。

再次提醒：如果你不打算动手编写代码，这个系列教程就别看了，对你无益！

接着我们上次创建的主题目录wp-content/themes/Aurelius，在该目录下新建一个php文件header.php，我们提取出index.php中的头部代码复制粘贴到header.php中，下面是的代码就是目前header.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>



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

</head>

<body>

<div id="wrapper" class="container_12 clearfix">

    

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

    

    <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"> </div>

    

    <h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>

    <div class="hr grid_12 clearfix"> </div>

再用文本编辑器打开index.php、archive.php、contact.php、full_width.php、page.php和single.php，删掉以上类似代码，改成：

<?php get_header(); ?>

好，现在打开你的测试博客主页，看看我们制作的主题是否还可以正常工作，答案是可以的，跟原来几乎没什么两样，但还是一片混乱。get_header()就相当于将header.php中的代码拷贝到当前的php文件。接下来，我们将仔细探讨header.php中的动态内容。header.php将会被所有的模板页面（主页、分类页、页面、标签页等）所包含，所以header.php中代码应该是动态，适合不同页面的，所以这里面需要用到PHP代码，而不是单纯的HTML。下面让我们一起来修改header.php：

1、更改<title>

我们都知道不同页面的title都是不一样，而且title的设置还会直接影响到SEO的效果，所以这里应该谨慎设置。下面提供一种SEO优化的title写法，将<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>