Wordpress 主题教程

1：介绍

首先是 Wordpress 主题制作的一个最基本的介绍，会涉及到 HTML 和 Wordpress的基本规则和一些专业术语，以及 Wordpress 主题的层次结构，这些概念是很重要的，在以后的很多地方都会讲到，所以开始之前一定要搞清楚。。。

HTML 基本规则
规则 #1：以正确的顺序关闭所有的 HTML 标签。
the right way ti close:
< ul >
< li >
< /li >
< /ul >

the wrong way to close:
< ul >
< li >
< /ul >
< /li >

所以：<>是开始标签，而< / >是结束标签。
在上面的例子中，li 的开始和结束标签必须在 ul 的开始和结束标签的里面，这就是标签正确的嵌套方式。

规则 #2：每个主题至少有两个文件夹–style.css 和 index.php 。index.php 告诉主题中所有的元素如何布局， style.css 则告诉主题中所有的元素该如何展示，以及他们的样式。下面是一个完整的主题含有的文件列表，现在我们先大概有个概念就可以了：

• style.css
• index.php
• home.php
• single.php
• page.php
• archive.php
• category.php
• search.php
• 404.php
• comments.php
• comments-popup.php
• author.php
• date.php

Wordpress 专业术语
Template （模板）–其实就是一个代码集，主题中很多地方会利用到这个代码集，所以把他们整合成一个模板，这样就不必一遍遍的输入这些重复的代码。

Template file（模板文件）–一个包含一个或者多个代码集（模板）文件。每个主题是由多个模板文件组成的，比如：index.php、style.css、sideBar.php等等。

Theme（主题）或者 Wordpress theme ( wordpress主题 )–所有你正在使用的文件：文本、图像、代码等等。注意：wordpress theme （主题）和 wordpress template(s)（模板）是两个不同的东西。

Post（日志或者文章）–现在你读的就是一篇日志。此外，它就是你blog 的一个简单的条目，如：一个页面或者一篇日记。

Page（静态页面）–一种特殊的 post ，它不是以分类组织的。它有别于你其它的日志。注意：在 wordpress，page（页面）和 Page（静态页面）是两个不同的东西。

Wordpress 主题的层次结构
下面就是 wordpress 的层次结构，他简单的向你展示，一旦你主题中的某个文件丢失了， wordpress 主题系统将会使用其它什么模板文件来代替。这里列出了6 个文件而不是完整的 13个，因为这6 个是相对重要些的，不过在接下来的教程中，余下的文件也会讲到。

另外我们还可以通过上面的这张图中模板文件所处的位置来知道各个主题文件的重要性，越靠左越重要。

这里大家可能有个疑问，为什么 wordpress 模板文件会有层次结构，或者说是重要性级别呢？因为 wordpress 利用这个层次结构去寻找相应的模板文件显示页面，并且在相应的文件丢失之后如何处理。

比如 archive.php 模板文件（用来显示存档页面）丢失了，那么 wordpress 将会使用 index.php 来控制存档页面如何显示。

比如 single.php 模板文件丢失了呢，哪个模板文件用来显示单一日志页面呢？他会寻找 index.php 。

2：模板文件和模板

在 Wordpress 主题教程 #1：介绍中，我们已经知道了 Wordpress 的两条基本规则和术语，而这篇将会深入讲解模板文件、模板以及每个页面的结构。

Wordpress 博客的每个页面是由多个模板文件组成的，下面是首页的例子：

上图中，我们可以看出主题的 index.php 是由 4 个模板文件组成：
hreader.php、index.php、sidebar.php和footer.php。

Header 模板文件：

通常在这个文件中包含博客的标题（title）和描述（description）。而且他们通常在整个博客中都是一样的。

Index 模板文件：
这个模板文件包含你的 日志的标题，日志的内容（就是每篇日志的文本和图片）和 日志的元数据（元数据就是每篇日志的额外信息，如作者是谁，日志发布的时间，在哪个分类下，有多少留言等等）。

Sidebar 模板文件
这个模板文件主要用于控制博客的 页面列表，类别列表，存档列表，友情链接和其它一些列表。

Footer 模板文件

像 header.php 模板文件一样，footer.php 通常不会因为页面的改变而改变，你可以在这里放任何东西，但是通常是版权信息。

这里解释一下，为什么把上面图片中的 index.php 所在的区域标为红色的。引文这块区域是会根据不同类型的页面而发生变化。

如果你在单一日志页面，这时候页面将会包含这四个模板文件：
header.php，single.php，sidebar.php和 footer.php。

3：开始 Index.php

这篇中，我们将要着手开始写 Wordpress 代码，这里建议搭建首先在本地电脑安装 Wordpress，因为在本地测试更加方便。

第1步：打开XAMPP控制面板

启动 Apache 和 Mysql：

第2步：创建你的主题文件夹

在你本地安装的 Wordpress 主题文件夹下（可能在xampp/htdoc/wordpress/wp-content/themes），创建一个新的文件夹，命名为 tutorial。

第3步：创建index.php 和 style.css文件

新建一个index.php文件，把教程源代码库里面的 index.txt的全部内容拷贝到这个文件下。（源代码可以到“从零开始制作 Wordpress 主题的源代码”下载）

新建style.css到该目录下。

第4步：创建 style.css

把教程源代码中的 style.txt 中的内容拷贝到 style.css 文件中。

第5步：安装你的主题

直接登陆后台，在外观菜单下启用 tutorial 主题，然后浏览网站首页，得到的是一张空白页面。到此最基本的主题框架已经创建好了。

4a：Header 模板

尽量输入所有代码而不是直接拷贝教程中的代码，这样可以让你尽量多记住点。

第1步：打开 XAMPP 和主题文件夹

第2步：打开 index.php

第3步：调用博客标题

编辑 index.php。在 < body >和< /body >这两个标签之间输入 < ?php bloginfo(‘name’); ? >，然后保存。

返回浏览器，这时候就可以看到博客的标题。

刚才发生了什么？

bloginfo() 函数是调用博客的信息的，其中参数 name 代表了它调用的是博客的标题。这个名字是在后台 》设置 》常规 中设置的 站点标题。

每次我们在 index.php 文件中增加或者更改任何东西之后，都可以保存，然后刷新页面查看结果。

第4步：调用博客的链接

调用了博客的标题之后，接下来就要把博客的标题放入超链接中，这时候需要一个 XHTML 标签。

返回 index.php 文件。
在同一行增加 < a href=”#” >和 < /a >。此时新行的代码变成：

返回浏览器，刷新

目前它只是一个空连接，因为是博客的标题，所以我们应该让他链接到首页。
最终代码：

4b：Header 模板 2

第1步：开启 XAMPP 和打开 index.php

第2步：给博客的标题添加 H1 的标签

第3步：添加博客描述

第4步：DIV标签

第5步：添加 Header DIV 标签

最终代码：

5：主循环

调用博客日志的 主循环（The Loop）是 wordpress 中最重要的 PHP 代码集，几乎所有的页面都会用到它。

第1步：创建 container Div

打开 index.php ，在 header DIV 标签下添加一个 DIV 标签，并将他的 id 赋值为 container。

第2步：输入主循环代码

在 container 的 div 标签中添加 主循环 代码：

刚才发生了什么？

if(have_posts())—检查博客是否有日志。
while(have_posts())—如果有日志，则执行下面的函数。
the_post()—调用具体的日志来显示。
andwhile;—关闭while。
andif;—关闭if。

第3步：调用日志标题

学习在 主循环 中如何调用 日志标题 。
index.php代码中添加 < ?php the_title(); ? >，并保存然后刷新。

第4步：给日志标题加上链接

在刚才的基础上，添加 a 标签，< a href=”< ? php the_permalink(); ? >”>< ?php the_title(); ? >< /a >

the_permalink() 是用来调用每篇日志地址的 PHP 函数。

保存并刷新浏览器，如果只有一个日志标题，把鼠标移到链接上面，观察你的浏览器底部的状态栏。如果有不止一个的日志标题，我们将看到每个链接会链到不同的页面。
最终代码：

5b：日志内容

在这篇中，我们将展示如何显示博客日志的内容，并且使用一个 DIV 标签把博客日志的内容和日志的标题 区分开。

第1步：使用 the_content() 函数显示日志内容

在日志标题代码下面输入：< ?php the_content(); ? >，保存并刷新。

刚才发生了什么？

我们使用了 PHP函数 the_content() 调用了 日志的内容， 现在，还未添加样式。记得最开始说到的 style.css 这个文件吗？我们以后用它来控制所有页面元素的显示和布局。

第2步：使用 DIV 标签把博客日志的内容和标题区分开

给 hhe_content() 两边添加 DIV 标签并给该标签附上 class=”entry” 属性。

第3步：给日志的标题和内容添加 class=”post”的div标签

用一个 DIV 标签把日志的标题和内容一起围住，并把这个 div 标签命名为 class=”post”。
保存并刷新。

增加 class=”entry”这个div 是把日志标题和日志内容区分开，而class=”post”这个div 是把当前日志和其它内容区分开。

5c：日志元数据

本章我们将开始讲解日志的元数据：日期、分类、作者、评论数，以及其它和日志相关的信息。

把主题教程源代码 postmetadata.txt文件中的代码复制到 < ? php the_content(); ? >下面。（对于这部分代码，你开始的时候可以不需要完全理解它，只要知道每部分干什么就可以了。）
保存并刷新。

详细解释：

< p class=”postmetadata” > 和 < /p >—所有的日志元数据都在一个 class=”postmetadata” 的段落标签中，因为要把日志元数据和日志内容区分开。

< ?php _e(‘Filed under:’); ? >—把Filed under: 放入 < ?php _e(”); ? >中不是必须的，这样主要是为了适应多语言，如果你的主题不支持多语言，可以简单的输入 Filed under: ；

< ?php the_category(‘,’); ? >—是用来调用日志所在的所有类别的php 函数。如果把 Filed under: 和 the_category() 放在一起，你可以得到：Filed under: Name of category 1，Name of category 2。the_category() 中的逗号是用来区分类别名。

< ?php _e(‘by’);—也是为了适应多语言。

< ?php the_author(); ? >—他是输出当前日志作者的名字。

< ?php comments_popup_link(‘No Comments >>’，’1 Comments >>’，’% Comments >>’); ? >—当弹出留言的功能激活的话，comments_popup_link() 调用一个弹出的留言窗口，如果没有激活，comments_popup_link() 则只是简单的显示留言列表。No Comments >> 是在没有留言的时候显示的。1 Comment >> 是用于当刚好只有1 条留言时候。% Comments >>是用于当有多于1 条留言的时候。比如 ：8 Comments >>。百分号 % 用来显示数字。

< ?php edit_post_link(‘Edit’，’|’，”); ? >—这个只有当我们以管理员 或者 作者身份 登陆的时候才可见。 edit_post_link() 只是简单显示一个可以用来编辑当前日志的编辑链接，这样就可以让我们不必去管理界面 搜寻该日志就可以很方便的直接进行编辑。
edit_post_link() 有3 个参数：
第1 个是显示编辑链接的标题，这里显示的是 Edit；
第2 个是显示在标题前面显示的字符，这里是 竖线 |；
第3 个是显示在标题后面显示的字符，这里没有使用。
登陆 Wordpress 之后，再返回到首页就可以看到 “Edit” 的链接和一条竖线。

5d：Else，日志 ID，链接标题

这篇课程将讲解其它3 个可以增加到日志中的元素：Else、post ID 和 链接的title 值，尽管他们是可选的，但是我们几乎可以在我们每一个免费的主题中都能找到。

第1 步：Else

在 < ?php endwhile; ? >的下面输入以下代码：
< ?php else : ? >
< div class=”post”>
< h2>< ?php _e(‘Not Found’); ?>
< /div>
保存并刷新，但是应该没有任何变化。
而当没有任何日志或者找不到任何日志的时候，Else 告诉 Wordpress 怎么处理，让 Wordpress 显示提示信息 Not Found。

第2 步：日志 ID

添加 id=”post-< ?php the_ID(); ? >” 到 < div class=”post”>
保存并刷新。

为什么要使用它呢？

可以用来定制个别的日志的面貌，因为给每篇日志附加了唯一的ID，通过 style.css 文件，就可以针对单独的一片日志进行样式化，使得他和其它日志看起来不一样。

第3 步：链接标题

添加 title=”< ?php the_title(); ? >” 到日志的标题链接。
保存并刷新。

5e：日志导航链接

在绝大多数的 Wordpress 博客的底部，都会有 下一页（Next Page） 或者 上一页（Previous Page） 这样的导航链接。
我们可以通过 Wordpress 的模板系统中的 posts_nav_link() 这个函数调用这些链接。

在< ?php endwhile; ? > 和 < ?php else : ? > 之间添加如下代码：
< div class=”navigation”>
< ?php posts_nav_link(); ? >
< /div >

< div class=”navigation”>—开始一个名为 navigation 的DIV 标签。
posts_nav_link()—调用后一页和前一页的链接。

保存并刷新。

默认情况下，如果没有超过10 篇日志的话，是不会显示导航链接的。

如何定制化 posts_nav_link()

< ?php posts_nav_link(‘in between’，’before’，’after’); ? >
第1 个参数是显示在后一页和前一页链接的中间，第2 个参数是显示在前面，第3 个参数显示在后面。

6：侧边栏

这一篇我们主要讲解 Wordpress 主题的侧边栏，让你很快掌握它的结构，并能编码和样式化它。

第1 步：创建 class 为 “sidebar”的DIV

第2 步：给侧边栏的 DIV 添加无序列表

第3 步：给无序列表添加原属

添加li 元素到 ul的中间，保存并刷新。

第4 步：添加分类链接列表

在li 元素的下面添加如下代码：
< ul >
< ?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ? >
< /ul >

wp_list_cats()—调用分类链接列表

保存并刷新。

默认的分类是 未分类。如果你没有把日志发布到多个分类下面，那么你的列表链接列表应该是只有一个链接 未分类。

sort_column=name—把分类按字符顺序排列。
optioncount=1—分类后显示每个分类包含的日志数
hierarchial=0—不按照层次结构显示子分类，这就解释了 为什么子分类链接是列在列表中第一级。
&—每次增加另一个参数的时候，需要在他之前输入&。

为什么不把 < ?php wp_list_cats(); ? > 放入 < li > 和 < /li >中呢？

当我们使用 wp_list_cats() 这个函数调用链接列表函数的时候，他会自动附上一组< li > 和 < /li >。

6b：页面链接列表

接下来我们将继续修改侧边栏，完成页面链接（Page-Link）列表。当完成常规的侧边栏之后，我们将学习如何窗体化侧边栏。

在分类链接上面添加如下代码。
< ?php wp_list_pages(); ? >
保存并刷新。

在默认情况下只有一个页面链接。

从显示上看，”Pages”这个列表标题和”Categories”这个分类链接标题的大小不一样。

如何使它们一致呢？添加 ‘title_li=< h2 >Pages< /h2 >’到wp_list_pages 作为参数。

保存并刷新。

title_li—是一个用来定制化页面链接列表的标题的参数。
< h2 >Pages< /h2 >是 title_li 这个参数的值。

进一步定制化：
为了限制显示列表的层次，添加了 depth 这个参数，并把它设置为 3：

< ?php wp_list_pages(‘depth=3&title_li=< h2 >Pages< /h2 >’); ? >

如果你只有一个页面链接，你将不会注意到有什么不同。

6c：存档链接列表

这篇将比较简单，讲解如何调用存档链接列表和友情链接列表。

第1 步：添加存档链接列表

在侧边栏区域的最下面输入以下代码：
< li >
< h2 >< ?php _e(‘Archives’); ? >< /h2 >
< ul >
< ?php wp_get_archives(‘type=monthly’); ? >
< /ul >
< /li >

保存并刷新。

发生了什么？
我们使用了 wp_get_arhives() 这个函数，并用了 type 这个参数以及 monthly 作为它的值，这样就按月调用存档链接列表。

6d：搜索框和日历

这一篇我们会结束常规的侧边栏，然后将在下一篇介绍如何窗体化侧边栏。

第1 步：添加搜索框

在该主题文件下创建一个新文件，保存为 searchform.php （与 index.php 在同一个文件夹下）。把教程源代码文件夹下的 searchform.txt 中的内容拷贝到 searchform.php 。

在 index.php 文件，在侧边栏的最顶部输入以下代码：
< li id=”search” >
< ?php include(TEMPLATEPATH . ‘/searchform.php’); ? >
< /li >

保存并刷新。

刚才发生了什么？

< li id=”search”>—开始一个名为 search 的列表元素，给他一个 ID，这样能够在以后方便样式化它。

include()—导入任何你想导入的文件。

TEMPLATEPATH—主题文件夹的位置，这里是：wp-content/themes/tutorial。

注意：搜索框不像分类，归档，页面或者 Blogroll 一样有子标题。当然如果你愿意，也可以给他一个子标题。

第2 步：添加日历

在搜索框下面输入以下代码：
< li id=”calendar” >
< h2 >< ?php _e(‘Calendar’); ? >< /h2 >
< ?php get_calendar(); ? >
< /li >

保存并刷新。

第3 步：添加元数据

在侧边栏最下面输入以下代码：
< li >
< h2 >< ?php _e(‘Meta’); ? >< /h2 >
< ul >
< ?php wp_register(); ? >
< li >< ?php wp_loginout(); ? >< /li >
< ?php wp_meta(); ? >
< /ul >
< /li >

保存并刷新。

wp_register()–该函数能产生一组 < li > 和 < /li > 标签，如果你没有登陆，它显示注册链接，如果登陆了，他显示的是 站点管理 链接。

wp_logout()—不会产生列表元素标签，需要手工输入 < li >，当未登录时，显示 登陆 链接，当已登陆时，显示 登出 链接。

到目前为止，wp_meta() 没有做任何事情，他在网页上和源代码中都不会产生东西，现在不要考虑 wp_meta()，实际上你已经在使用它了。

到此为止，我们已经完成了 Meta 并最终完成了常规的 侧边栏。

6e：窗体化侧边栏

一个支持 widget 的侧边栏或者说是窗体化的侧边栏 几乎是 wordpress 主题的标准。

首先，什么是窗体化呢？
简单的说，就是能够通过拖拉就能够整理侧边栏的模块。

第1 步：创建 functions.php 文件

在主题文件夹下，新建 functions.php 文件，把教程源代码文件下 functions.txt 文件中的所有内容拷贝到 functions.php 中。

目前，tutorial 主题文件下应该有下面几个文件：

第2 步：窗体化侧边栏

直接在侧边栏的第 1 个 < ul >标签下面输入以下代码：
< ?php if(function_exists(‘dynamic_sidebar’) && dynamic_sidebar()) : else : ? >

直接在 < /ul >标签之前输入以下代码：
< ? php endif; ? >

保存文件，然后我们可以到 wordpress 后台 =》外观 =》widget（小工具） 就可以把 Widget 拖到擦边栏了。

7：底部

这部分教程很简单，只要在侧边栏下添加一个 DIV 标签，然后输入一些版权信息。

第1 步：添加DIV 标签

在侧边栏的 DIV 标签下添加 div

第2 步：添加版权信息

添加你想要显示的底部信息

保存并刷新。

8：Style.css 和 CSS 介绍

第1 步：打开 style.css 文件

第2 步：添加 css 代码

body{
margin:0;
font-family: Arial,Helvetica,Georgia,Snas-serif;
font-size:12px;
text-align:left;
vertical-align:top;
background:#ffffff;
color:#000000;
}

保存并刷新。

9：十六进制颜色代码和样式化链接

介绍如何 着色 和十六进制颜色代码。

第1 步：添加链接颜色

输入以下代码：
a:link, a:visited{
text-decoration:underline;
color:#336699;
}

a:link—用于样式化链接（< a >和< /a >）
a:visited—用于样式化已经访问过的链接

第2 步：添加链接悬停颜色

输入以下代码：
a:hover{
text-decoration:none;
color:#ff0000;
}

保存并刷新。

10：宽度和布局

这篇将介绍如何设置每个 DIV 的宽度和布局排版，并且也会展示如何让主题显示正确。

第1 步：设置页面总体宽度

在 < body > 之后增加：< div id=”wrapper”>
在 < /body> 之前增加：< /div>
在 style.css 文件中输入以下代码：

#
wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

保存并刷新。

第2 步：自动页面居中

把 body{} 中的 text-align: left; 改成 text-align: center;。

第3 步：设置 header 宽度和布局

让 Header 浮到左边并设置宽度 750px：
#
header{
float: left;
width: 750px;
}

第4 步：设置 Container 宽度和布局

让 Container 浮到左边并设置宽度 500px：
#
container{
float: left;
width: 500px;
}

第5 步：设置 Sidebar 宽度和布局

让 Sidebar 浮到左边，宽度为 240px，并且设置灰色背景：
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}

第6 步：设置 Footer 的宽度和布局

让 Footer 浮到左边，左右两边都没有东西，并宽度为 750px：
#
footer{
clear: both;
float: left;
width: 750px;
}

Header 和 Footer 的样式不同之处在于，Footer 中有 clear: both，它使得 Footer 不能和它上面的东西（如 Sidebar 和 Container）连接起来。

保存并刷新。

第7 步：给侧边栏增加其余的10像素

.sidebar{
margin: 0 0 0 10px;
}

保存并刷新。

11：日志样式化和其它杂项

第1 步：reset css

在 body{} 上面输入以下代码来处理大部分页边空白和填充：
body,h1,h2,h3,h4,h5,h6,blockquote,p{
margin:0;
padding:0;
}

第2 步：样式化 H1 标题

在 body{} 之后输入以下代码：
h1{
font-family: Georgia,Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}

第3 步：样式化日志

在 Container{} 下面输入以下代码：
.post{
padding: 10px 0 10px 0;
}

.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}

.entry{
line-height: 18px;
}

第4 步：设置日志段落填充

在 a:hover{} 下输入以下代码：
p{
padding: 10px 0 0 0;
}

第5 步：样式化日志杂项

在 .entry{} 下面输入：
p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}

对于postmetadata这个段落便签，给他设置一个边框和顶部空白。

第6 步：格式化导航栏

在 p.postmetadata{} 下输入：

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight:bold;
line-height: 18px;
}

保存并刷新。

12：样式化侧边栏

这篇主要讲解如何样式化侧边栏里面的所有元素。

第1 步：样式化侧边栏的无序列表

在 .sidebar{} 下输入：
.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}

样式化父级无序列表（UL）标签。

第2 步：给 LI 添加填充。

在 .sidebar ul{} 下输入：
.sidebar ul li{
padding: 10px 0 10px 0;
}

第3 步：样式化侧边栏下的子标题

在 .sidebar ul li{} 下输入：
.sidebar ul li h2{
font-family: Georgia,Sans-serif;
font-size: 14px;
}

第4 步：清除子 UL 下的 LI 填充

在 .sidebar ul li h2{} 下输入：
.sidebar ul ul li{
padding: 0;
line-height:24px;
}

第5 步：扩展日历宽度到整个侧边栏

为了样式化日历，找出在里面的标签和这个标签的名字或者 id。
查看 》页面源代码或者源代码，现在我们知道日历是在一个 table 标签中并以 wp-calendar 作为 id 。

在 .sidebar ul ul li{} 下输入：
table#wp-calendar{
width: 100%;
}

保存并刷新。

13：底部和拆分 Index

这篇我们完成对主题的样式化和开始把 index.php 文件分成多个小文件。在这篇中，首先要对 style.css 文件进行修改，然后把 index.php 分成一些新的文件。

第1 步：样式化 footer

给footer DIV 添加 10px 顶部填充。

第2 步：设置 footer p 的行距

给 footer 里所有的 P 标签 18px 行距。

第3 步：header.php

创建一个新文件 header.php。
在 index.php 文件中，把 header DIV 及以上所有的东西都拷贝到 header.php 文件中。

第 4 步：在 index.php 中导入 header.php

为了使所有从 index.php 中拷出的内容依然在 index.php 中，输入以下代码：
< ?php get_header(); ? >

这个是 wordpress 主题系统特别用来导入 header.php 文件的函数。

保存并刷新，你应该看到没有什么变化。

第5 步：sidebar.php

新建 sidebar.php 文件，把 index.php 文件中的 sidebar DIV 从开始到结尾都复制到 sidebar.php 文件中。然后，在 index.php 文件中，将其取代为：< ?php get_sidebar(); ? >

保存并刷新， 你应该看到没有变化。

第6 步：footer.php

重复上面的步骤。此时调用 < ?php get_footer(); ? >

15：子模板文件

这篇还是和上篇一样创建更多的子模板文件。

现在 index.php 文件已被拆分，这样会变得更简单。

第1 步：archive.php

在做这个之前，先查看你的侧边栏，点击其中的一个存档链接，结果页面是不是和首页一样，没什么不同？

• 创建一个新文件：archive.php
• 把 index.php 中所有东西复制到 archive.php
• 保存 archive.php
• 在 archive.php 文件，把 the_content 改成 ｔｈｅ＿ｅｘｃｅｒｐｔ
• 再次保存　ａｒｃｈｉｖｅ．ｐｈｐ　文件

通过创建一个 archive.php 文件并把它改成和 index.php 不一样，这就是 定制化归档页面的 外观。

现在如果你刷新你的归档页面，页面内容将只显示摘要而不是全文。

为什么你先想这么做呢 —防止 Google 以为重复内容惩罚你的博客，如果一个归档页面和首页显示相同的内容，那就是重复的内容。

如果是私人的博客呢？—那么就没有必要去区分首页和归档内容。但这并不是说摘要对私人博客没有用。

同样—默认你的分类页面将使用 archive.php 显示内容，如果你没有archive.php文件，类别页面将使用 index.php 显示内容。

如果你想 分类页面 和 首页 和 归档页面 看起来不一样，那么创建一个 category.php 文件并定制化它。

第2 步：search.php

• 创建一个新文件：search.php
• 把 archive.php 中所有东西复制到 search.php
• 保存就完成了。

现在所有的搜索结果将会返回摘要。如果没有 search.php 这个模板文件，搜索选项将会使用 index.php 去显示搜索结果。

（可选） 你可以返回到 课程1 去回顾层次结构。

第3 步：page.php 和 single.php

• 创建两个新文件：page.php 和 single.php
• 把 index.php 中所有内容拷贝到 page.php 和 single.php。（从现在开始，页面和单篇日志应该是一样的。）
• 保存页面和单篇日志文件，关闭它们。

第4 步：定制 page.php

还记得 静态页面 和 页面 之间的不同吗？ page.php 模板文件是用来定制化这些特殊静态页面。

第一，在 page.php 中的 < ?php the_content(); ? >下输入以下代码：
< ?php link_pages(‘< p >< strong >Pages:< /strong >’,’< /p >’,’number’);? >
和
< ?php edit_post_link(‘Edit’,’< p >’,’< /p >’);? >

第二，从 page.php 中移除 postmetadata 代码。

第三，在 page.php 中移除 posts_nav_link() 或者 导航模块。

刚才发生了什么？

第一行代码 是用于 显示页面的分页链接。

举个例子，编辑示例页面，在 文本模式 下添加 < !–nextpage– >

当你想把一个非常长的页面分成几个页面的时候，这时非常有用的。

第二行代码是用于显示可以用来 编辑页面 的编辑链接。

第5 步：定制 single.php

点击一个 日志 的标题，阅读日志信息，就会带你到单篇日志查看模式。
single.php 模板就是用于处理查看单篇日志时的外观。

第一，在 single.php 中的 < ?php the_content(); ? > 下输入：
< ?php link_pages(‘< p >< strong >Pages:< /strong >’,’< /p >’,’number’);? >

这是我们可以把日志分成多篇子日志。

第二，在 postmetadata 区域，移除 < ?php comments_popup_link(); ? > 函数和前面的 < br/ >标签。不要移除整个 postmetadata。

移除了 留言链接函数 是因为 在单篇日志查看模式下留言链接函数是不起作用的，所以要在 single.php 文件中移除它。移除 BR 标签是为了显示上好看点。

第三，用以下代码取代 < ?php posts_nav_link(); ? >：
< ?php previous_post_link(‘%link’); ? > < ?php next_post_link(‘%link’); ? >

在前面，存档、分类和搜索页面，我们使用 posts_nav_link() 函数去调用 后一页和前一页 的链接。
对于查看单一日志的页面，他是没有 后一页和前一页 的链接的，我们可以使用 以上两个 函数去调用前一篇日志和后一篇日志的链接。

15：留言模板

本教程参考的是 Wordpress 2.7 之前的版本撰写的，而 Wordpress 2.7 之后支持了 Thread Comments ，你可以选择 让你的主题实现 Wordpress 2.7 的 Thread Comments 的方法。但还是建议你看下本篇教程。

本篇将涉及到博客一个比较重要的东西：评论模板 。

第1 步：创建 comments.php

创建一个新文件：comments.php 。
把 comments.txt 文件中的内容复制到 comments.php 。
保存文件。

第2 步：样式化留言

把 comments-template-css 文件中的内容拷贝到 style.css 文件中。
复制到 style.css 的底部或者刚好 #footer 的上面。

第3 步：在single.php 添加留言模板

在 single.php 文件中，entry DIV 的下面，输入以下代码：

< div class=”comments-template” >
< ? php comments_template(); ? >
< /div >
comments_template() 这个函数是用来从 comments.php 文件调用评论模板。comments.php 文件然后根据它的模板（或者代码）去显示评论模板。列表中的每个条目是一条评论。

如果想让人们在静态页面也可以留言，同样可以把 comments_template() 函数用到 page.php 文件。

评论模板的进一步解释

评论模板从根本上说是一个有序列表（OL），不是无序的，尽管他们基本上同样方式工作。

在single.php 文件中，你用 comments-template DIV 围住 comments_template() 。现在你的评论模板在一个 DIV 标签中有一个有序列表中。

到此为止，一个简单的 Wordpress 主题制作教程已经全部结束，你可以根据需要在此基础上进行优化完善。