WordPress主题制作全过程（一）：基础准备

前言：

我想大多数使用WordPress的朋友都喜欢去尝试新的主题，但是换来换去，总是找不到那么一款适合自己的，让人很郁闷。于是很多人萌生了修改现有主题或自己动手从头制作一个主题的想法，但是问题又来了，怎么做呢？毕竟制作主题是需要编写代码的，相信很多人看到代码就头大。露兜博客正在着手编写一个WordPress主题制作的系列教程，将从头到尾手把手教你如何制作一个完整的WordPress主题，希望对你有所帮助。开始之前先声明，这系列教程只能让你感性地认识主题的制作过程，并不能让你完完全全地掌握WordPress主题的原理。

另外，如果你在学习过程中遇到任何问题，欢迎给我留言，留言框在每篇文章末尾。

本系列教程适合以下人群阅读

懂一点点的HTML、CSS
自己动手编写过代码
自己会设计网页界面，想了解怎么制作WordPress主题

本系列教程不适合以下人群阅读

不打算动手编写代码，不想照着本教程一步一步地操作，只是想看看
没有任何网页设计知识
没用过WordPress
非常熟悉WordPress主题制作过程
不喜欢我在此罗嗦

阅读完本系列教程，你将收获

了解WordPress主题制作的过程
知道如何去修改一个WordPress主题，扩展主题的功能

开始制作主题之前，你必须配备以下工具

WordPress本地运行环境（或者在线网站空间），并且已安装好WordPress，作为测试博客
至少配备三种浏览器，Microsoft Internet Explorer、Mozilla Firefox、Google Chrome，版本暂时不限，用于测试网页是否显示正常
一个文本编辑器用于编写代码，Dreamweaver、UltraEdit、NotePad++、Vim等，不推荐使用记事本，具体原因点此查看

WordPress主题制作全过程（二）：主题文件构成

在开始制作WordPress主题之前，首先得了解WordPress主题到底由哪些文件构成，你得清楚WordPress程序是怎样与主题文件连接的。

以下是WordPress默认主题default文件夹下的所有模板文件。看了下图，可能你还摸不着头脑，到底这些文件是干什么的。WordPress的主题是用PHP编写的，而不是纯HTML + CSS，所以模板文件的后缀名是.php，如果你想精通WordPress的主题制作，完美控制你的博客，最好要熟悉PHP编程。要是不会PHP编程怎么办？就做不了WordPress主题了吗？那也不是，至少看完本系列教程，你也能够掌握基本的WordPress主题制作方法。

新手 WordPress主题制作全过程

下面是WordPress主题文件层次结构，它会告诉你：当WordPress显示特定的页面类型时，会使用哪个模板文件呢？只有了解了以下主题层次结构，你才能知道你的WordPress主题到底需要写哪些文件。

怎么看下面的文件层次结构？

以主页为例，下面有2个文件home.php和index.php，WordPress程序会从你的主题文件夹中依次查找这两个文件：

如果找到home.php，则使用home.php作为博客首页模板，即使你的主题文件夹中有index.php；
如果home.php未找到，则使用index.php作为首页模板；
如果home.php和index.php都找不到，你的主题将不会被WordPress识别，等于废物。

主页

home.php
index.php

文章页：

single-{post_type}.php - 如果文章类型是videos（即视频），WordPress就会去查找single-videos.php（WordPress 3.0及以上版本支持）
single.php
index.php

页面

自定义模板 - 在WordPress后台创建页面的地方，右侧边栏可以选择页面的自定义模板
page-{slug}.php - 如果页面的缩略名是news，WordPress将会查找 page-news.php（WordPress 2.9及以上版本支持）
page-{id}.php - 如果页面ID是6，WordPress将会查找page-6.php
page.php
index.php

作者

author-{nicename}.php - 如果作者的昵称为rami，WordPress将会查找author-rami.php（WordPress 3.0及以上版本支持）
author-{id}.php - 如果作者ID为6，WordPress将会查找author-6.php（WordPress 3.0及以上版本支持）
author.php
archive.php
index.php

日期页面

date.php
archive.php
index.php

搜索结果

search.php
index.php

404 (未找到)页面

404.php
index.php

附件页面

MIME_type.php - 可以是任何MIME类型 (image.php, video.php, audio.php, application.php 或者其他).
attachment.php
single.php
index.php

详细说明，请看WordPress官方文档（如果你能看懂英文）：
http://codex.wordpress.org/Template_Hierarchy

WordPress主题制作全过程（三）：HTML静态模板制作

制作WordPress需要了解PHP，但是不管怎样，你的博客页面都是一张网页，网页之所以能够在浏览器中显示出来，是因为最终传送给浏览器的是HTML、CSS和JS等终端代码，最终由这些代码控制浏览器的显示结果。制作WordPress主题也不例外，它们都是网页，网页最基本的是HTML。要想制作WordPress主题，首先得设计主题界面，含蓄、简约、厚重、奔放……，风格完全随你，接着再将你的设计理念转化为.html，并能在浏览器中正常显示出来。

本系列教程不会教你如何去设计博客的界面，也不会教你HTML和CSS基础知识，而是假定你已经有HTML和CSS基础了，如果你不会HTML，也不会CSS，后面的东西恐怕对你来说就像天书了。

本系列教程将使用由tutsplus无偿提供的html模板Aurelius为例，来讲解WordPress主题的制作过程，其他模板的制作也类似。下面提供该HTML模板文件下载，我们将以此来练习如何将HTML静态页面与PHP代码结合，制作WordPress主题。下载后，里面的html文件都是可以直接双击打开的。

可能这个模板并不适合每个人的口味，但这个用于我们的主题制作练习已经足够了。另外你可能会诧异，怎么是英文版的？放心，到了后面你就会知道，是否英文版都没多大关系。下面说说下载到的这些文件的用途：

首页：index.html
存档页：archive.html
页面：page.html
文章页：single.html
联系页：contact.html
无边栏页：full_width.html
图片：/images/
样式表：style.css
缩略图：screenshot.png

大多数博客所能看到的页面类型也基本就这些。你可能已经注意到，不管你用哪个WordPress主题，不同的文章页面除了标题和内容不同以外，其他东西基本都是一样，这就是所谓的模板。

今天的重点就是下载我上面提供的静态html网页文件，敬请期待下面的内容。

WordPress主题制作全过程（四）：小试牛刀

一个WordPress主题至少包含以下两个文件：

style.css
index.php

好，现在就开始我们的WordPress主题制作。在你的WordPress目录 wp-content\themes\ 下新建一个文件夹，命名为Aurelius，将前文：WordPress主题制作全过程（三）：HTML静态模板制作中下载到的style.css和index.html放到该目录下，再将index.html重命名为index.php，这样wp-content\themes\Aurelius目录下就有下面两个文件：

style.css
index.php

登陆你的WordPress博客管理后台 - 外观，里面是不是多了一个主题"Aurelius"呢？如下图所示：

新手 WordPress主题制作全过程

启用该主题，打开你的博客主页，OH，页面一片混乱？怎么搞的？先继续看下文。你可能会很好奇，这个主题的名称可不以改成我要的名字呢、主题作者能不能改成我的名字呢、为什么主题没有小图片预览，下面就教你怎样更改这些"主题信息"。用文本编辑器打开Aurelius目录下的style.css，你可以按照下面的说明尝试在 style.css 文件最前面修改以下信息，再到WordPress管理后台"外观"栏目下，刷新一下看看有什么变化：

Theme Name: 这里填主题名称

Theme URI: 这里填主题介绍的网址，没有就填你的博客网址吧

Description: 这里填主题的简短介绍

Version: 版本号

Author: 作者名

Author URI: 作者的网址

Tags: 标签，多个用半角逗号隔开

将前文 WordPress主题制作全过程（三）：HTML静态模板制作下载到的screenshot.png放到Aurelius目录下，再到WordPress管理后台"外观"栏目下，看看有什么变化，是不是多了个预览图呢？主题制作完毕后，你可以给你的主题界面截个图，命名为screenshot.png，大小300 * 225，放置到主题目录下作为主题缩略图。

好了，今天我们要讲的就这些，敬请期待下文。。。

最后将WordPress主题制作全过程（三）：HTML静态模板制作下载到的Aurelius目录下的所有文件拷贝到wp-content\themes\Aurelius目录下，并将所有 .html 后缀改成 .php ，以备我们下节内容使用。

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

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

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

接着我们上次创建的主题目录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>

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

    <!-- Caption Line -->

    <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>

以上添加的php代码运用了条件判断，针对不同的页面采用不同title，这里解释一下这几个条件标签。

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

到目前为止，可能你对这些条件判断标签还没有深入的认识，也搞不懂到底是用了这些标签会对主题造成怎样的影响的，随着我们教程的进一步深入，你会慢慢理解的。如果你不喜欢上面title的写法，可以自行上网搜索相关代码：WordPress SEO title

2、更改样式表style.css路径

在此之前你看到的首页都是混乱的，原因是还没加载css样式。现在我们一起把样式加上。你可以在header.php中找到这一段代码：

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

聪明的你可能问：wp-content\themes\Aurelius目录下不是已经有一个 style.css 吗？那为什么 header.php 没有加载css呢？结果你是可以看到的，页面一篇混乱，可以确定确实没有加载到css。因为这是WordPress的主题，是要被WordPress的主程序调用，经过层层解析才能把你的博客显示出来，而不是简简单单的html静态网页文件。正确的改法：

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

bloginfo('stylesheet_url')输出的是你的主题css文件绝对网址，如http://localhost/wp/wp-content/themes/Aurelius/style.css，WordPress程序会自动识别你的WordPress安装地址，当前启用的主题，自动输出这个style.css链接。现在你可以试着更改一下，然后刷新一下你的博客首页，查看网页源代码，style.css的链接是不是变成你的了？页面是否可以正常显示了呢？

如果你的css文件不是style.css，且不是在主题根目录下，那怎么办呢？我们可以用<?php bloginfo('template_url'); ?>来获取主题根目录的URL，如你的主题css文件是abc.css，那么我们可以这样写：<?php bloginfo('template_url'); ?>/abc.css，如果是在子目录css下那就这样：<?php bloginfo('template_url'); ?>/css/abc.css。同样加载js文件也是这样。

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

3、添加pingback

至于什么是pingback，你可以在搜索引擎中输入关键字：WordPress pingback，就可以得到你想要的答案了。如果你需要这个功能，可以在<head>里面添加以下代码：

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

4、更改博客名称和描述

在header.php，下面两行代码用于显示博客名称和描述：

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

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

上面是静态代码，现在做如下修改：

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

<h2 class="grid_12 caption clearfix"><?php bloginfo('description'); ?></h2>

现在你的博客首页看到的就是你博客名称和描述了，并且logo也是一个链接指向你的博客首页。我们这里说说这些php代码的作用。

<?php echo get_option('home'); ?> 输出你的博客首页网址
<?php bloginfo('name'); ?> 输出你的博客名称
<?php bloginfo('description'); ?> 输出博客描述

博客名称和描述可以在WordPress管理后台 - 设置 - 常规那里更改。以后制作你自己的WordPress主题的时候，你可参照上面的说明对你的主题进行修改。

5、添加订阅feed链接

相信每个已发布的WordPress博客主题都会提供feed订阅，当然我们的主题也应该提供这样的功能。在</head>之前添加以下代码：

<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有文章" href="<?php echo get_bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有评论" href="<?php bloginfo('comments_rss2_url'); ?>" />

6、添加wp_head

有些插件需要在网页头部执行一些类如添加一些js或css的动作，要让这些插件能够正常的工作，也让你的主题有更好的兼容性，你应该添加wp_head()函数。打开header.php，在</head>前面添加以下代码即可：

<?php wp_head(); ?>

现在打开你的博客主页，查看源代码，</head>前面是不是多了以下类似代码（这些都是wp_head()的功劳）：

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://ludou.co.tv/blog/xmlrpc.php?rsd" />

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://ludou.co.tv/blog/wp-includes/wlwmanifest.xml" />

<link rel='index' title='露兜实验室' href='http://ludou.co.tv' />

<meta name="generator" content="WordPress 2.9.2" />

7、添加Description 和 Keywords

关于添加网页描述和关键字，可以查看我之前写过的文章：WordPress使用经验（一）独立的Description 和 Keywords

8、显示菜单栏

目前菜单栏有Home、Blog和Contact Us几个菜单，不过这些都是静态的内容，并不是你博客上的页面。现在我们将菜单栏换成你的菜单，这里只在菜单栏中列出页面page，当然你也可以再放置分类，根据你的喜好来吧，将header.php中：

<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>

改成：

<ul id="navigation" class="grid_8">

    <?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>

    <li <?php if (is_home()) { echo 'class="current"';} ?>><a title="<?php bloginfo('name'); ?>" href="<?php echo get_option('home'); ?>/">主页</a></li>

</ul>

具体如何在菜单栏显示分类，你可以看这篇文章，有什么问题再给我留言：WordPress 分类做导航栏，并高亮显示

另外，可以参考这两个函数的说明(英文):

Template Tags/wp list pages
Template Tags/wp list categories

下面两篇文章介绍了WordPress菜单的制作方法，也可以参考：

WordPress主题导航菜单制作的几种方法(一)
WordPress主题导航菜单制作的几种方法(二)

9、刷新缓存

在<body>前面，</head>后面添加PHP代码，用于提高程序运行效率：<?php flush(); ?>

总结

好了，本次练习到此结束！现在总结一些今天讲到的比较重要的知识点：

<?php get_header(); ?> 从当前主题文件夹中包含header.php文件
is_home()，is_single()，is_category()等几个条件判断标签
<?php bloginfo('stylesheet_url'); ?> 输出主题文件夹中style.css文件的路径
<?php bloginfo('pingback_url'); ?> 输出博客pingback网址
<?php bloginfo('template_url'); ?> 输出博客主题目录URL
<?php echo get_option('home'); ?> 输出你的博客首页网址
<?php bloginfo('name'); ?> 输出你的博客名称
<?php bloginfo('description'); ?> 输出博客描述
<?php wp_head(); ?> 用于包含WordPress程序输出头部信息
<?php wp_list_categories(); ?> 用于列出博客分类页
<?php wp_list_pages(); ?> 用于列出博客页面

到目前为止你的博客还只能看到主页，不要灰心，凡事一步一个脚印，以后教程会慢慢深入的。最后提供经过本次修改后的Aurelius主题文件，你可以用文本编辑器打开看看，跟你修改的文件比较比较（尤其是header.php），看看你改得怎么样？

WordPress主题制作全过程完整列表：

WordPress主题制作全过程（六）：制作footer.php

上节内容我们已经弄好了博客的页头header.php，今天我们就一起来制作页脚footer.php。footer.php与header.php差不多，写这个文件的目的也是为了精简代码，提高代码的重用性，Aurelius主题目录中的所有页面的页脚代码几乎都是一样的，我们就把这些代码提取出来放到footer.php。

在Aurelius主题目录中新建文件footer.php，我们提取出index.php中的页脚代码拷贝到footer.php中(如果以后你制作自己的主题，可以根据需要决定哪些是footer代码)：

<p class="grid_12 footer clearfix"> <span class="float"><strong>Design By</strong> QwibbleDesigns <strong>Code By</strong> <a href="https://www.ludou.org/">Ludou</a></span> <a class="float right" href="#">top</a> </p>

</div>

</body>

</html>

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

<?php get_footer(); ?>

| Powered By <a rel="external" title="WordPress主页" class="link" href="http://wordpress.org/">WordPress</a>

| Design By QwibbleDesigns |

Code By <a href="https://www.ludou.org/">Ludou</a>

</span>

</div>

<?php wp_footer(); ?>

</body>

</html>

这里用到了我们上次学到的bloginfo('name')函数来输出你的博客标题，wp_footer()和wp_head()差不多，都是用于提高你的主题兼容性，毕竟有很多插件要在页脚输出一些东西才能正常工作。现在你的页脚应该是有模有样了吧，下面是我更改后的效果：

新手 WordPress主题制作全过程

footer.php中加入了作者的信息，当然包括我的信息，如果你觉得Code By Ludou这几个字特别碍眼，你可以将其删除，但是请不要删除设计师和WordPress的信息，毕竟这是对他们最起码的尊重！

好了，footer.php的制作就这么简单。

最后提供经过本次修改后的Aurelius主题文件，你可以用文本编辑器打开看看，跟你修改的文件比较比较，看看你改得怎么样？

WordPress主题制作全过程完整列表：

WordPress主题制作全过程（七）：制作sidebar.php

制作好了header.php 和 footer.php ，今天我们来制作侧边栏sidebar.php。由于侧边栏的可定制性实在是太强了，所以本节内容比较难，我讲解起来也比较困难，有些内容会被略掉！

作为各个页面公用的侧边栏，我们还是像制作header.php 和 footer.php那样，从index.php中提取侧边栏，放到sidebar.php。好，现在在你的主题目录Aurelius下新建文件sidebar.php，从index.php中提取一下代码，放到sidebar.php中：

<h3>Catagories</h3>

<li><a href="">Philosophy</a></li>

<li><a href="">History</a></li>

<li><a href="">Staff</a></li>

<li><a href="">Clients</a></li>

</ul>

<h3>Archives</h3>

<li><a href="">January 2010</a></li>

<li><a href="">December 2009</a></li>

<li><a href="">Novemeber 2009</a></li>

<li><a href="">October 2009</a></li>

<li><a href="">September 2009</a></li>

<li><a href="">August 2009</a></li>

</ul>

</div>

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

<?php get_sidebar(); ?>

好，现在打开你的博客主页，看看我们制作的主题是否还可以正常工作。现在我们的侧边栏还都是静态的代码，大家可能都知道在WordPress后台 - 外观 - 小工具，那里可以拖动你想要的栏目到侧边栏，但是我们的主题目前还不支持这个功能。现在就让我一起来制作完整的sidebar。

为了适应WordPress程序，我们还要对sidebar.php做一些微调，下载新的样式表style.css，替换Aurelius目录下的style.css

开始sidebar.php的制作，我们将在侧边栏放置4个栏目。在初始状态下，也就是你没有在侧边栏放置任何小工具的情况下，这4个栏目自上而下为分类目录、最新文章、标签云和文章月存档。现在将sidebar.php中所有代码删除，改成：

<?php if ( !function_exists('dynamic_sidebar')

|| !dynamic_sidebar('First_sidebar') ) : ?>

<ul>

<?php wp_list_categories('depth=1&title_li=&orderby=id&show_count=0&hide_empty=1&child_of=0'); ?>

</ul>

<?php endif; ?>

<?php if ( !function_exists('dynamic_sidebar')

|| !dynamic_sidebar('Second_sidebar') ) : ?>

<ul>

<?php

$posts = get_posts('numberposts=6&orderby=post_date');

foreach($posts as $post) {

setup_postdata($post);

echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';

}

$post = $posts[0];

</ul>

<?php endif; ?>

<?php if ( !function_exists('dynamic_sidebar')

|| !dynamic_sidebar('Third_sidebar') ) : ?>

<?php endif; ?>

<?php if ( !function_exists('dynamic_sidebar')

|| !dynamic_sidebar('Fourth_sidebar') ) : ?>

<ul>

<?php wp_get_archives('limit=10'); ?>

</ul>

<?php endif; ?>

</div>

然后点此处下载functions.php放到主题目录Aurelius下，这时候你的侧边栏就可以正常工作了，在WordPress后台 - 外观 - 小工具，可以正常地拖动小工具到侧边栏了。

好了，sidebar.php到此就制作成功了。这节内容理论的东西讲得不多，关键是我不知道怎么去表述这些东西，就算我说出来，可能你也不会太明白了。关于sidebar.php制作的技术文档：可以参考：

Customizing Your Sidebar
Function Reference/register sidebar

最后还是按照惯例，提供经过本次修改后的主题文件下：

WordPress主题制作全过程完整列表：

WordPress主题制作全过程（八）：制作index.php

文章目录

1、添加文章标题
2、添加文章标签
3、添加日期
4、显示评论数
5、添加编辑按钮
6、添加文章内容
7、阅读全文
8、添加文章循环
9、添加文章分页
10、文章缩略图

前面我们已经制作完成博客所有公用页面sidebar.php、footer.php和header.php，今天开始我们就要制作单独的页面了。现在我们要制作的是索引页index.php，这里我们可以暂时把它理解成主页，但事实上它并不是首页这么简单（点此查看原因）。

在主页中主要就是文章列表，将你博客上的文章一篇一篇地列出来。你可能已经注意到，主页中每篇文章的样式都是一样的，只是标题、时间、作者和摘要等文字内容不一样而已，嗯！我们制作index.php也只需要一篇文章的html代码，不需要手动地去写那么多文章的html，况且这样也不是动态的内容。我们只需要一个循环就可以将所有文章显示到首页上，循环就是重复做某件事情，这里的循环是重复地输出文章。如果你之前学过任一门计算机程序设计语言的话，就不难理解什么是循环，循环的作用也一想就通，如while，for，foreach......

在这里插一句，如果你真的想了解如何制作主题，请打开的文本编辑器，跟着我一步一步地操作，一步一步地修改，每做一次修改就刷新一下你的博客看看有什么变化，这样才能够加深你的理解。如果你懒得动手，建议以后的内容就不用看了，看了对你帮助也不大。

现在开始制作index.php。初始情况下index.php中有三篇文章，打开index.php你可以看到文章的3个标记，我们现在其他将两篇文章的代码删除，留下一篇，并将文章摘要去除。修改后的代码是这样的：

<?php get_header(); ?>

    <!-- Column 1 /Content -->

    <div class="grid_8">

        <!-- Blog Post -->

        <div class="post">

            <!-- Post Title -->

            <h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>

            <!-- Post Data -->

            <p class="sub"><a href="#">News</a>, <a href="#">Products</a> • 31st Sep, 09 • <a href="#">1 Comment</a></p>

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

            <!-- Post Image -->

            <img class="thumb" alt="" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" />

            <!-- Post Content -->

            <!-- Read More Button -->

            <p class="clearfix"><a href="single.html" class="button right"> Read More...</a></p>

        </div>

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

        <!-- Blog Navigation -->

        <p class="clearfix"> <a href="#" class="button float"><< Previous Posts</a> <a href="#" class="button float right">Newer Posts >></a> </p>

    </div>

    <?php get_sidebar(); ?>

<?php get_footer(); ?>

从上面的代码可以看出，一篇文章的html骨架就是：

<div class="post">

    <!-- Post Title -->

    <h3 class="title"><a href="single.html">文章标题</a></h3>

    <!-- Post Data -->

    <p class="sub"><a href="#">标签1</a>, <a href="#">标签12</a> • 发布时间 • <a href="#">评论数</a></p>

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

    <!-- Post Image 文章的缩略图 -->

    <img class="thumb" alt="" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" />

    <!-- Post Content -->

    文章内容

    <!-- Read More Button -->

    <p class="clearfix"><a href="single.html" class="button right"> 阅读全文按钮</a></p>

</div>

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

不同主题的主题的文章html骨架是不一样的，如果你熟悉html，可以很快地分辨出文章骨架，以上是我们这个主题的骨架，我们将以此为基础给index.php加上动态内容：

1、添加文章标题

找到：

<h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>

改成：

<h3 class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>

这里解释一下这几个php函数：

<?php the_permalink(); ?> 输出文章的URL链接（参考文档）
<?php the_title(); ?> 输出文章的标题（参考文档）

2、添加文章标签

我们很多人在写文章的时候都喜欢添加一些标签，况且侧边栏我们也加入了"标签云"，我们的主题应该支持标签。找到：

<a href="#">News</a>, <a href="#">Products</a>

改成：

<?php the_tags('标签：', ', ', ''); ?>

函数参考：the_tags

3、添加日期

找到：31st Sep, 09

改成：

<?php the_time('Y年n月j日') ?>

函数参考：the_time

关于该函数中 Y n j 获取的日期格式，你可以参考文档（中文），选择你喜欢的时间格式：zh-cn:自定义时间和日期

可能你看了以上提供的时间和日期文档，还是一头雾水，下面提供几个示例，你就差不多能够依样画葫芦，指定自己喜欢的时间日期格式：

PHP代码	输出内容
<?php the_time('Y年n月j日') ?>	1999年5月1日
<?php the_time('Y年m月d日') ?>	1999年05月01日
<?php the_time('Y-m-d') ?>	1999-05-01
<?php the_time('y-m-d H:i:s') ?>	99-05-01 02:09:08

4、显示评论数

现在我们来添加评论数代码，查找代码：

<a href="#">1 Comment</a>

改成：

<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?>

该函数会根据文章的评论数量显示不同的文字链接，0 条评论、1 条评论等等，当然能你可以根据自己的爱好定制文字内容。该链接会直接打开对应的文章，并移动到文章的评论区，你可以点此查看效果：2 条评论

函数参考：comments_popup_link

5、添加编辑按钮

如果文章作者已登录，我们将允许他在首页点击对应文章的编辑按钮，就可以直接修改文章，这个功能是可选的，你可以不添加。接上面的评论按钮，我们在其后面添加相应代码：

<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?><?php edit_post_link('编辑', ' • ', ''); ?>

函数参考：edit_post_link

6、添加文章内容

可能有些人喜欢在首页输出全文，而有些人喜欢在首页输出文章摘要，这里提供两种方案，任君选择。查找：

将其改成：

<!-- Post Content -->

<?php the_excerpt(); ?>

只要在写文章的时候在"摘要"框内填写摘要，在首页显示的就是摘要，如果不填就输出全文！以下是方案二，用于输出全文，除非你在文章中使用了，代码修改：

<!-- Post Content -->

<?php the_content('阅读全文...'); ?>

函数参考:

the_excerpt
the_content

7、阅读全文

这里给添加阅读全文链接，如果在6、添加文章内容中你选择了输出全文，本步骤可以忽略，查找代码：

<a href="single.html" class="button right"> Read More...</a>

改成：

<a href="<?php the_permalink(); ?>" class="button right">阅读全文</a>

8、添加文章循环

到目前为止，你的首页还只能显示一篇文章，要想输出所有文章，需要我们之前提到的循环。查找代码：

改成：

<!-- Blog Post -->

        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

再查找：

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

改成：

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

        <?php endwhile; ?>

再次查找：

    </div>

    <?php get_sidebar(); ?>

改成：

        <?php else : ?>

        <h3 class="title"><a href="#" rel="bookmark">未找到</a></h3>

        <p>没有找到任何文章！</p>

        <?php endif; ?>

    </div>

<?php get_sidebar(); ?>

好了，现在查看你的主页，是不是可以显示多篇文章了呢？文章数量取决于你在后台设置每页可显示的文章数量。以上的循环可以简化为以下内容，这样看起来应该比较容易理解了，在endwhile之前不断地输出每篇文章，直至文章数量达到每页显示的最大文章数量；如果你的博客上一篇文章都没有，就会输入无文章提示。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    文章html骨架

<?php endwhile; ?>

<?php else : ?>

    输出找不到文章提示

<?php endif; ?>

参考文档: The Loop

9、添加文章分页

上面你已经看到，每页只能显示部分文章，要想看下一页，就得添加分页。现在查找代码：

<p class="clearfix"> <a href="#" class="button float"><< Previous Posts</a> <a href="#" class="button float right">Newer Posts >></a> </p>

改成：

<p class="clearfix"><?php previous_posts_link('<< 查看新文章', 0); ?> <span class="float right"><?php next_posts_link('查看旧文章 >>', 0); ?></span></p>

参考函数：

previous_posts_link
next_posts_link

10、文章缩略图

对于大部分人来说，不太需要文章缩略图的功能，而且有很多插件可以实现这个功能。这里我们将首页的文章缩略图代码删除：

<!-- Post Image -->

            <img class="thumb" alt="" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" />

另外，还有个存档页面的模板archive.php，跟index.php的制作过程完全一样，只不过需要在functions.php里添加一个函数，这里就不再罗嗦，下载自己看吧，注意：functions.php中的代码已经修改，要想让你的分类、标签等存档页能够正常显示，请下载最新的functions.php覆盖原来的。另外，标签页和分类页支持在该页面顶部显示介绍，前提是你在后台文章标签和分类处要填上了描述。

好了，到目前这个主题也像个样子了，不过还有很多要完善，后面我们将继续完善！按照惯例，继续提供经过本次修改后的主题文件下载：

WordPress主题制作全过程完整列表：

WordPress主题制作全过程（九）：制作single.php

今天我们来制作单文章页single.php，有了之前制作index.php的经验，制作single.php也不再那么难了，这里将直接略过一些内容，直接给出结果。如果对某些修改不太清楚，可以先参考：WordPress主题制作全过程（八）：制作index.php

1、添加文章标题：

<h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>

改成：

2、添加文章标签

<a href="#">News</a>, <a href="#">Products</a>

改成：

<?php the_tags('标签：', ', ', ''); ?>

3、添加日期
找到：31st Sep, 09 改成：

<?php the_time('Y年n月j日') ?>

4、显示评论数

<a href="#">7 Comments</a>

改成：

<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?>

5、添加编辑按钮
接上面的评论代码，改成:

<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?><?php edit_post_link('编辑', ' • ', ''); ?>

6、添加文章内容
将 和 之间的代码全部删除，替换成：

<?php the_content(); ?>

另外，你可以将文章页那张图片删除了，删除以下代码：

<img class="thumb" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" alt=""/>

7、添加返回博客首页和发表评论按钮
其实就是添加博客首页和评论锚点链接，在制作header.php，我们已经知道可以通过get_option('home');来获取博客地址。

<p class="clearfix"> <a href="blog.html" class="button float" ><< Back to Blog</a> <a href="#commentform" class="button float right" >Discuss this post</a> </p>

改成：

<p class="clearfix"> <a href="<?php echo get_option('home'); ?>" class="button float" ><< 返回首页</a> <a href="#commentform" class="button float right" >发表评论</a> </p>

好了，基本上的修改就这些了，但是你的文章页仍然不能显示文章内容，你得给它加上一个条件语句，这样WordPress才会去数据库读出你的文章内容。搜索代码：

改成：

<?php if (have_posts()) : the_post(); update_post_caches($posts); ?>

将：

</div>

<?php get_sidebar(); ?>

改成：

</div>

<?php else : ?>

没有文章！

</div>

<?php endif; ?>

<?php get_sidebar(); ?>

现在你的文章内容应该都可以正常显示了，一个文章页基本上也成型了。下节我们将讲解如何制作评论页，本次不提供修改的主题文件下载，下次一起提供。

另外，文章页顶部会有一段文字：

Our blog, keeping you up-to-date on our latest news.

可以替换成你的内容。如果不需要，可以将以下代码删除：

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

-- 完 --

WordPress主题制作全过程（十）：制作comments.php

日期：2010-05-22 标签：WordPress教程，主题制作149 条留言

如需帮忙改代码，或者WordPress二次开发、PHP网站建设等需求，可联系我购买付费服务：点此联系我

今天我们来制作评论主题的评论模块。在主题目录Aurelius下新建comments.php，在single.php剪切以下代码，粘贴到comments.php：

<!– Comment's List –>

<h3>Comments</h3>

<div class="gravatar"> <img alt="" src='images/gravatar.png' height='48′ width='48′ /> <a class="comment-reply-link" href=">Reply</a> </div>

<div class="clearfix"> <cite class="author_name"><a href="">Joe Bloggs</a></cite>

<div class="comment-meta commentmetadata">January 6, 2010 at 6:26 am</div>

</div>

<p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligula ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p>

</div>

</li>

</ol>

<!– Comment Form –>

<h3>Add a comment</h3>

<ul>

</li>

<label for="email">Your Email</label>

</li>

<label for="email">Your Website</label>

</li>

<label for="message">Comment</label>

</li>

<!– Add Comment Button –>

<a type="submit" class="button medium black right">Add comment</a> </li>

</ul>

</form>

在single.php原位置添加代码：

<?php comments_template(); ?>

以上语句的作用就是将comments.php里的所有内容导入到single.php中，与直接在single.php写comments.php中的代码效果是一样的。

为了安全起见，不让恶意用户直接打开评论文件，请在comments.php头部添加以下代码：

<?php

if (isset($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))

die ('Please do not load this page directly. Thanks!');

因为WordPress的输出评论函数wp_list_comments()输出的评论代码与我们主题的评论代码不一样的，我们得自定义我们的评论列表，将comments.php中的以下代码删除（以下代码用于列出文章的所有评论）：

<div class="gravatar"> <img alt="" src='images/gravatar.png' height='48′ width='48′ /> <a class="comment-reply-link" href=">Reply</a> </div>

<div class="clearfix"> <cite class="author_name"><a href="">Joe Bloggs</a></cite>

<div class="comment-meta commentmetadata">January 6, 2010 at 6:26 am</div>

</div>

<p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligul a ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p>

</div>

</li>

改成：

<?php

if (!empty($post->post_password) && $_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {

// if there's a password

// and it doesn't match the cookie

<p><a href="#addcomment">请输入密码再查看评论内容.</a></p>

</li>

<?php

} else if ( !comments_open() ) {

<p><a href="#addcomment">评论功能已经关闭!</a></p>

</li>

<?php

} else if ( !have_comments() ) {

<p><a href="#addcomment">还没有任何评论，你来说两句吧</a></p>

</li>

<?php

} else {

wp_list_comments('type=comment&callback=aurelius_comment');

}

以上代码的意思大致也可以看得出来了，就是一大堆 如果...就....，如果以上条件都不满足就列出所有评论。现在将主题文件夹Aurelius中的functions.php中的 ?> ，改成以下代码，如果你之前从本博客下载到的functions.php已经有以下代码则不用再添加：

function aurelius_comment($comment, $args, $depth)

{

$GLOBALS['comment'] = $comment; ?>

<?php comment_reply_link(array_merge( $args, array('reply_text' => '回复','depth' => $depth, 'max_depth' => $args['max_depth']))) ?> </div>

<?php printf(__('<cite class="author_name">%s</cite>'), get_comment_author_link()); ?>

<?php edit_comment_link('修改'); ?>

</div>

<?php if ($comment->comment_approved == '0') : ?>

<em>你的评论正在审核，稍后会显示出来！</em><br />

<?php endif; ?>

<?php comment_text(); ?>

</div>

<?php } ?>

以上代码所用到的WordPress函数及相应的说明：

函数名称	函数功能
get_avatar($comment, 48)	获取评论者的gravatar头像，尺寸为48 * 48
comment_reply_link()	回复留言的链接
get_comment_author_link	用于获取评论者博客地址
get_comment_time	获取评论发布时间
edit_comment_link	管理员修改评论的链接
comment_text()	输出评论内容

好，现在在你的文章页面底部就可以正常地显示评论了！现在我们继续来制作提交评论的表单，将以下代码删除（也就是评论表单的代码）：

<!– Comment Form –>

<h3>Add a comment</h3>

<ul>

</li>

<label for="email">Your Email</label>

</li>

<label for="email">Your Website</label>

</li>

<label for="message">Comment</label>

</li>

<!– Add Comment Button –>

<a type="submit" class="button medium black right">Add comment</a> </li>

</ul>

</form>

改成：

<?php

if ( !comments_open() ) :

// If registration required and not logged in.

elseif ( get_option('comment_registration') && !is_user_logged_in() ) :

<p>你必须 <a href="<?php echo wp_login_url( get_permalink() ); ?>">登录</a> 才能发表评论.</p>

<?php else : ?>

<form id="commentform" name="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">

<ul>

<?php if ( !is_user_logged_in() ) : ?>

<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="23" tabindex="1" />

</li>

<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="23" tabindex="2" />

</li>

<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="23" tabindex="3" />

</li>

<?php else : ?>

<li class="clearfix">您已登录:<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="退出登录">退出 »</a></li>

<?php endif; ?>

</li>

</ul>

<?php comment_id_fields(); ?>

<?php do_action('comment_form', $post->ID); ?>

</form>

<?php endif; ?>

函数名称	函数功能
is_user_logged_in	判断用户是否登录
wp_login_url	博客登录地址
get_comment_author_link	用于获取评论者博客地址
$comment_author	读取cookie，如果该用户之前已经发表过评论则自动帮助用户填写用户名
$comment_author_email	读取cookie，如果该用户之前已经发表过评论则自动帮助用户填写Email
$comment_author_url	读取cookie，如果该用户之前已经发表过评论则自动帮助用户填写博客地址
do_action('comment_form', $post->ID);	该函数为某些插件预留
wp_logout_url	退出登录的链接

好了，评论模板comments.php制作完毕！最后本次修改后的主题文件下载：

WordPress主题制作全过程（十一）：制作page.php

page.php也就是页面，可能大家不太理解页面是什么意思，博客上的所有网页不都是页面吗？我们这里指的页面一个单独的页面，如"关于"、"联系方式"等，可以在WordPress后台 - 页面，进行页面的添加修改等。

这个page.php有很多东西跟single.php也都是相通的，或者基本都一样，这里我们对部分内容也不做太多的解析，直接上结果，如果有不懂的可以翻翻WordPress主题制作全过程（八）：制作index.php。

1、添加标题
搜索代码：

改成：

2、添加页面内容

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel porta erat. Quisque sit amet risus at odio pellentesque sollicitudin. Proin suscipit molestie facilisis. Aenean vel massa magna. Proin nec lacinia augue. Mauris venenatis libero nec odio viverra consequat. In hac habitasse platea dictumst.</p>

改成：

<?php the_content(); ?>

3、添加评论框
将 与 </form>之间的所有代码删除（包括</form>）

替换成：

<?php comments_template(); ?>

4、添加查询语句
搜索代码：

改成：

<?php if (have_posts()) : the_post(); update_post_caches($posts); ?>

查找：

</div>

<?php get_sidebar(); ?>

改成：

</div>

<?php else : ?>

没有找到你想要的页面！

</div>

<?php endif; ?>

<?php get_sidebar(); ?>

我们的page.php就制作完毕了。另外还有两个页面，无边栏页面full_width.php，联系页contact.php，制作方法完全一样，这里就不再详述了，我已经直接写好了，下载即可。你可能会问，那这两个页面怎么用呢？我分别在这两个页面的前面写了两个注释：

<?php

Template Name: Page without sidebar

<?php

Template Name: contract

以后在WordPress后台新建页面的时候，可以在右边栏选择页面模板，你可以选择Page without sidebar 或 contract，不选默认使用page.php模板！contact.php边栏的联系方式你自己改一下内容就可以了。

到目前为止，我们的WordPress主题制作系列教程就结束，说实话你也应该没学到啥东西，我讲的实在太差劲了，就当是WordPress主题制作的一个感性认识过程吧。最后提供我们制作完成的主题下载，估计不会有人愿意用这样的主题的，太丑了！还有就是评论还没有分页功能。

新手 WordPress主题制作全过程

WordPress主题制作全过程（一）：基础准备

前言：

本系列教程适合以下人群阅读

本系列教程不适合以下人群阅读

阅读完本系列教程，你将收获

开始制作主题之前，你必须配备以下工具

WordPress主题制作全过程（二）：主题文件构成

怎么看下面的文件层次结构？

主页

页面

分类

标签

作者

日期页面

搜索结果

404 (未找到)页面

附件页面

WordPress主题制作全过程（三）：HTML静态模板制作

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

1、更改<title>

2、更改样式表style.css路径

3、添加pingback

4、更改博客名称和描述

5、添加订阅feed链接

6、添加wp_head

7、添加Description 和 Keywords

8、显示菜单栏

9、刷新缓存

总结

WordPress主题制作全过程（八）：制作index.php

1、添加文章标题

2、添加文章标签

3、添加日期

4、显示评论数

5、添加编辑按钮

6、添加文章内容

7、阅读全文

8、添加文章循环

9、添加文章分页

10、文章缩略图

相关文章