”>

name’); ?>

保存并刷新浏览器。

同样也没有改变，这里给 DIV 标签指定了 ID ，因为将会有更多的 DIV 标签或

者无形的盒子，我们使用 ID 来区分！

#5：主循环

第1步：创建 container Div



第2步：输入主循环代码



第3步：调用日志标题



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



调用博客日志的主循环（The Loop）是 WordPress 中最重要的 PHP 代码集，几

乎所有的页面都会用到它。这也是从零开始创建 WordPress 主题系列教程

的第

五篇。

在开始继续学习之前，我们先复习下到目前为止学到了什么？

到目前为止，我们已经学到：:











规则，术语和 WordPress 主题的层式结构

每个页面有哪些部分组成

如何安装你的主题

如何调用博客的标题和把它做成一个链接

如何调用博客的描述和如何把 header 和其他部分分开

现在让我们开始第五篇：主循环（The Loop）

打开 Xampp，“tutorial”主题文件夹，浏览器，并且在浏览器中转到

localhost/wordpress，最后打开 文件。

下面应该是这时候 文件中的内容：

18

记住，为了学习这些代码，请尽量手工输入而不是拷贝和粘贴。

第1步：创建 container Div

在 header DIV 标签下添加一个 DIV 标签，并给它的 ID 赋值为 “container”，

如下：

“container” 这个 DIV 标签是用把博客的主要内容和其他东西都区分开，比

如 sidebar 和 footer 等。

第2步：输入主循环代码

在 Container 的 DIV 标签中添加如下代码：

19

这段代码就是 WordPress 中的主循环（The Loop）。在详细解释这些代码作用

之前，我们来看下现在 所包含的代码：

你可能已经注意到Container DIV 中的每一行都被缩进了，这是为了更好的组

织代码，更加利于阅读(使用 tab 健而不是空格键进行代码缩进，)。

刚才发生了什么？













if(have_posts()) – 检查博客是否有日志。

while(have_posts()) – 如果有日志，那么当博客有日志的时候，执行

下面 the_post() 这个函数。

the_post() – 调用具体的日志来显示。

endwhile; – 遵照规则 #1，这里用于关闭 while()

endif; – 关闭 if()

注释：并不是所有的代码都需要两部分用来打开和关闭。有些代码能够自

我关闭，这就解释了 have_posts() 和 the_post(); 这两个函数。因为

the_post(); 在 if() 和 while() 的外面，只需要分号去结束或者关闭。

第3步：调用日志标题

20

在前面的课程中，我们学习了使用 bloginfo('name') 去调用博客的标题。现在

我们将学习在主循环（The Loop）中如何调用日志标题。

在 the_post(); ?> 的后面和 的前面输入

the_title(); ?>

保存 文件并刷新浏览器，这时候应该看到在博客描述的下方出现

Hello World ，默认安装 WordPress 之后，博客只有一篇日志。而我的测试的

博客有多篇日志，所以这里有多个日志标题，而且因为我所用的日志标题是一样

的，我也没有进行组织整理他们，所以它们看起来像很长的一行 Hello World。

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

21

把日志标题转变成日志标题链接。还记得怎样吧博客的标题转变成一个链接的？

在 两边增加 和 。

保存并刷新你的浏览器。现在日志的标题都变成了链接了，但是它们并没有指向

哪里。为了使得每个标题都能指向正确的日志，我们需要把 # 替换为

the_permalink()。

“>

the_permalink() 是用来调用每篇日志地址的 PHP 函数。保存并刷新浏览器。

如果只有一个 Hello World 标题，把鼠标移到链接上面，观察你的浏览器底部

的状态栏，他不再是 localhost/wordpress/#。

如果有不止一个的标题链接，我们将看到每个链接会链到不同的日志或者网页。

但是我们的日志标题依然在同一行上面。为了分开它们，在日志标题链接代码的

两边添加

和

href=”the_permalink(); ?>”>the_title(); ?>

记住 H1 用作你的博客的标题，那是网页的标题。H2 被用作子标题。现在你的

日志标题链接是子标题了，每一个都是一行。保存 文件并刷新浏览

器，结果如下：

WordPress 主循环就介绍到这里，现在 文件内容应该是：

22

#5b：日志内容

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



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



日志内容是从零开始创建 WordPress 主题系列教程

第五篇的第二部分，在这篇

中，我们将展示如果显示博客日志的内容，并且使用一个 DIV 标签把博客日志

的内容和日志的标题区分开。再次强调一次，上一篇关于 WordPress 主循环

介

绍的课程非常重要，你需要彻底明白之后才能继续学习。

下面开始这篇课程。首先还是打开 XAMPP，“tutorial”主题文件夹，浏览器并

在浏览器地址栏输入：localhost/wordpress，最后打开 。

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

在日志标题代码下面输入：。

23

保存并刷新浏览器，现在在日志标题下面看到了一些文本：

刚才发生什么了?

我们使用了 PHP 函数 the_content() 调用了 日志的内容。现在，日志的内容

只是一长行的文本，一直到窗口的右边，因为我们还没有样式化它。还记得最开

始说到的 这个文件吗？我们以后用它来控制所有页面元素的显示和

布局。

我们在 WordPress 后台输入多篇多篇测试日志，就可以看到多篇日志一起被显

示的样子：

24

返回浏览器，点击”查看”选择“页面源代码”，就会弹出一个源代码窗口，如

果你使用的是 Internet Explorer，那么弹出的是记事本。

我使用的是 Firefox浏览器，下面是在 FireFox 中显示的样子：

25

你注意到 文件和它的源代码之间的区别了吗？所有的文本，图像和

其他东西等所有上图展示的东西都是通过 the_content() 这个函数调用来的。

是不是很有用？注意这些代码是不依赖具体的 WordPress 主题，我们应该自己

的这些文本和图片进行编码和样式化。

还有，有没有注意到我圈出的开启和关闭的P标签。他们都没有在 文

件中出现，但是他们在源代码中出现了。

P 标签，为什么和如何使用？

为什么 – 当我们输入日志的时候，每次跳过一行就是一个段落，这个时候需要

一个方法去展示？我们可以通过 P （段落，paragraph）标签，每个段落会在 P

标签之间，这就是为什么段落之间有行距的原因，

如何使用 – 非常容易，WordPress 模板系统会自动帮我们产生 P 标签。

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

给 the_content() 两边添加 DIV 标签并给该 DIV 标签附上class=”entry”

属性，如下：

你现在的 文件应该是：

26

保存并刷新浏览器，我们再次去查看源代码的话，就会发现每篇日志内容在

class=”entry” 的 DIV 标签中。

这样我们就很容易知道日志标题在哪里结束和日志内容在哪里开始，这样做也是

以后使用 文件对它进行样式化做准备，通过 class 我们就可以准确

定位到日志内容，样式化日志的内容而不影响页面上其他别的内容。

id 和 class之间有什么区别呢？

到目前为止，对于每个 DIV 标签，我们可以用 id 去命名它，如 id=”header”，

那么id 和 class之间有什么区别呢？id 是唯一的而 class不是。如果从头到

尾浏览源代码，你会发现只有一个 id="header" 和一个 id="container"，但是

有多个 class="entry"。

那么 header 和 container 可以用 class 去取代 id 吗？完全可以。

但是不能重复任何 id，比如，不能在同一页面上有两个 id="header" 。当你想

一遍又一遍重新利用一些东西如日志的标题，那么请使用 class。

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

用一个 DIV 标签把日志的标题和内容一起围住。并把这个 DIV 标签命名为：

class=”post”。

（class 和 ID 的名字不是一定要严格和上面一样，可以把 class 和 ID 的名

字设置任何你想要的名字，但是 post 和 entry 更加简洁明了，也更容易记。）

27

现在你的 文件为：

这个是经过缩进整理后的版本：

一般我们使用 tab 健而不是空格键产生缩进的。为什么进行要对代码进行缩进

呢？实际上的代码不像我上面的屏幕截图一样有红色或者绿色的高亮显示，我们

需要有个能够跟踪代码的方法，通过缩进就能更容易知道哪个

保存并刷新浏览器，然后查看源代码中的代码。

为什么你要添加另外一个 DIV 标签去围住日志标题和日志内容？

增加这个 DIV class=”entry” 去把日志标题和日志内容区分开。而这个div

class=”post”是把当前日志和其他内容区分开。

28

#5c：日志元数据

日志元数据是从零开始创建 WordPress 主题系列教程

的五篇的第三部分，今天

我们将开始讲解日志的元数据（Postmetadata）：日期（date），分类（categories），

作者（author），评论数（number of comments），以及其他和日志有关系的

信息。

同样请打开 XAMPP，主题文件夹，浏览器以及 文件。

先让我们复习下，现在的 文件应该有下面这些代码了：

批注 [雨林木风1]: 11-10

29

把

中的代码：

_e('by'); ?>

Comments »'); ?>

下面的屏幕截图是为了适应日志的大小而只裁剪了一部分，它主要你关注日志元

数据代码的位置：

保存并刷新浏览器，现在应该是：

我们同样可以通过查看源代码来看日志元数据是怎样的？

详细解释：

class=”postmetadata”> 和

postmetadata” 的段落标签中，因为我想把日志元数据和日志内容区分开。如

果没有段落标签，日志元数据信息将在日志内容结束的地方继续，这样就没有任

何间距去区别内容和日志元数据。

– : 是调用冒号“:”的代码；

把Filed under:放入_e(’‘); ?>中不是必须的，这样主要为了使得 Filed

under: 可翻译。如果你的主题不需要支持多语言，可以简单输入 Filed under:；

the_category(’, ‘) ?> – the_category() 是用来调用日志的在的所

有类别的 PHP 函数。如果你把 Filed under: 和 the_category() 放在一起，

你可以得到：Filed under: Name of category 1, Name of category 2。

the_category() 中的逗号是用来区分类别名。返回日志元数据的屏幕截图，我

们就可以注意到在类别连接中的逗号；

31

– 和 Filed under:一样。如果你创建的是私人用的的

主题， by 外面的 _e() 不是必须的。_e() 是用来创建可以翻译的主题，如果

主题被来自不同国家的上百人使用的话，这是非常重要的。如果你是创建公共使

用的主题，最后加上 _e() 以便你的主题可翻译化。

– 它是输出当前日志作者的名字。

– 如果你想要一个空行，又不想用段落标签来产生行间距，使用 BR。

注意斜线 / 。这是能自我关闭的标签。

comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments

»’); ?> – 当弹出留言的功能激活的话，comments_popup_link() 调用一个

弹出的留言窗口，如果没有激活，comments_popup_link() 则只是简单的显示留

言列表。No Comments » 是在没有留言的时候显示的。1 Comment » 是用于当刚

好只有1条留言时候。% Comments &187; 是用于当有多于一条留言的时候。比

如：8 Comments »。百分号 % 用来显示数字。» 是用来显示一个双层箭头 »。

– 这个只有当我们以管

理员或者作者身份登录的的时候才可见。 edit_post_link() 只是简单显示一个

可以用来编辑当前日志的编辑链接，这样就可以让我们不必去管理界面搜寻该日

志就能直接编辑。edit_post_link() 有三个参数。第一个是用来确定哪个词你

将用在编辑链接的链接标题。如果你使用 Edit post，那么将显示 Edit post 而

不是 Edit。第二个参数是用来显示在链接前面的字符，在这里是竖线 |，代码

就是&124;。第三个参数是用于显示在编辑链接后面的字符，在这里没有使用。

登录 WordPress 之后，再返回到首页就可以看到“Edit”的链接和一条竖线。

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

第1步：Else



第2步：日志 ID



第3步：链接标题



Else，日志 ID，链接标题是从零开始创建 WordPress 主题系列教程

的五篇的第

四部分，这篇课程将讲解其他3个可以增加到日志中的元素：Else，post ID, 和

链接的 title 值。尽管它们是可选的，但是我们几乎可以在我每一个免费的主

题中都能找到。

开始之前，不要忘记启动 Xampp。

第1步：Else

在 的下面输入以下代码：

32

大致如下：

保存刷新浏览器，但是应该注意到没有任何变化。我们返回教程 #5 — 主循环，

去解释你刚才上面输入的是什么？

这里就是主循环的部分代码：

第一，if(have_posts()) 检查博客是否有日志，

第二，while(have_posts()) 执行 the_post() 去调用日志。而 Else 是当博

客完全没有日志的时候执行的。 while() 和 endwhile; 应该嵌套在 if() 和

else :之间。 所以 应该在 之后。

现在你知道什么是 else 了吧，当没有任何日志或者当找不到任何日志的时候，

告诉 WordPress 怎么处理，让 WordPress 显示错误信息 Not Found，或者其他

任何你想要的东西。我们可以下载任一款免费主题，看一下它的 文

件怎么写的。

在上面的例子中，Not Found 错误信息是在 _e(”); ?> 之中。如我上一

篇所说，这不是必需的，只是为了让主题可翻译。

整个信息和代码 Not Found 外面有

和

你可以简单使用：

33

但是，给这个错误信息使用上

（子标题）标签能够使它更明显，让访问者

注意到这个页面上没有任何东西。

那么

class=”post”> 和

用来做什么的呢？恩，我们肯定不想你

的错误信息在“茫茫蛮荒之地”之间滞留，对不？我们用

> 和

标签围住每篇日志。所以同样，尽管是错误信息不是真正的日志内

容，但是我们其实可以把它当作日志来处理。

第2步：日志 ID

增加 id=”post-” 到

保存并刷新浏览器。然后 查看 > 页面源代码。现在我们会发现现在每篇日志都

附加上了一个数字或者说是日志 ID。the_ID() 只是调用每篇日志的 ID。

为什么使用它呢？这是用来定制个别的日志的面貌。后面，当你使用

文件去告诉你的主题日志将看起像怎么样。如果通过给每篇日志附加唯一的 ID，

你就可以针对单独的一篇日志进行样式化，使得它和其他日志看起来不一样。如

果没有 ID，你将没有办法通过 文件使它和其他日志不一样。

同时把 class 和 id 赋给同一个 DIV 标签，可以吗？DIV 是标签，class 是一

个属性，id 也是是一个属性。每个标签能拥有多个属性，如 DIV 就可以同时有

class 和 id这两个属性。（注释：id 是一个 XHTML 属性。the_ID() 是 PHP 函

数。他们是不同的，）

第3步：链接标题

增加 title=”” 到日志的标题链接。

保存并刷新浏览器。然后再去查看源代码，查找任何日志的标题链接，如果日志

的标题链接是 Hello World，那么他的左边应该有 title=”Hello World”。

title=”" 是 （链接）标签的另一个属性。在双引号中的是链接的描述。在

这里，每篇日志的标题也是链接的描述。这就是为什么我们要再次使用

the_title() 这个 PHP 函数。

如果不使用 the_title() 作为 title=””的值，那么每篇日志标题链接将会有

同样的描述。举个例子，如果用 title=”Click me” 取代 the_title()，每篇

日志标题链接都将会用 Click me 作为描述。

34

返回页面。把鼠标移到任何一篇日志标题的链接上，描述信息将会弹出，这就是

刚刚增加的。增加描述到链接是非常有用的，当你其他站点需要扫描你的博客的

时候，如 ，每次你发表日志的时候，WordPress 通知 Technorati

和其他网站你的博客已经更新了。Technorati 然后就会来到你的博客，扫描它，

并索引得到一个你日志的摘要，这其中会包括你链接标题的描述。

博客

» WordPress » WordPress 主题教程 #5e：日志导航链接

#5e：日志导航链接

日志导航链接是从零开始创建 WordPress 主题系列教程

的第五篇的第五部，在

绝大多数的 WordPress 博客的底部，都会有 下一页 (Next Page) 或者 上一页

(Previous Page) 这样的导航链接。我们可以通过 WordPress 的模板系统中的

posts_nav_link() 这个函数调用这些链接。

在 和 之间添加如下代码：

– 开始一个名为 navigation 的 DIV 标签。

– 开始 PHP 代码

posts_nav_link() – 调用后一页和前一页的链接。

; – 停止调用。

?> – 结束 PHP 代码

– 结束名为 navigation 的 DIV 标签。

效果如下：

35

保存并刷新，查看后一页或者前一页的链接。默认情况下，如果没有超过10篇

日志的话，是不会显示导航链接。如果没有超过10篇日志，依然想看到导航链

接，登录到管理界面，选择 Settings > Reading，然后把它设置为比所有日志

少一篇。如，有6篇日志，就设置为5。

如何定制化 posts_nav_link()：

和前面 postmetadata 课程中介绍的函数一样，我们也可以给这个函数3个参

数，分别给链接的中间，前面和后面的设置字符，如下：

第1个参数是显示在后一页和前一页链接的中间。第2个参数显示在前面。第3

个参数显示在后面。

这里是一个定制化 posts_nav_link() 的例子：

#6：侧边栏

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



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



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



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



侧边栏是从零开始创建 WordPress 主题系列教程

的第六篇，这一篇我们主要讲

解 WordPress 主题的侧边栏，让你很快掌握它的结构，并能编码和样式化它。

36

在开始侧边栏之前，这是现在 文件的样子。

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

首先让我们创建一个名字为 sidebar 的 DIV，这样可以把侧边栏中的所有东西

都放入其中。在 container 的后面和 标签的前面输入以下代码：

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

在新的 sidebar 的 DIV 标签中创建一个新的无序列表。

– 开始无序列表

– 结束无序列表

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

增加一个列表元素（LI）到无序列表（UL）的中间并把一个子标题添加到这个列

表中。

37

注意添加制表符到

和

标签之前为了代码缩进。

– 开始列表元素

– 开始子标题

– 输出字符 Categories

– 结束子标题

– 结束列表条目

保存 文件并刷新浏览器。现在应该可以看到 Categories 子标题结

构应该这样：

子标题前面的小圆点指明这个子标题是在一个列表元素中（LI）。如果无序列表

（UL）有两个列表元素，那么将有两个小点。

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

在列表条目中添加下面代码：

′); ?>

38

这里是上面代码的解释：

– 开始另一个无序列表

– 调用分类链接列表

– 结束无序列表

保存并刷新浏览器。下面是分类链接列表的样子：

默认的分类是 Uncategorized。如果你没有把日志发布到多个分类下面，那么你

的列表链接列表应该是只有一个链接 Uncategorized。

更进一步的解释：

sort_column=name – 把分类按字符顺序排列



optioncount=1 – 显示每个分类含有的日志数



hierarchial=0 – 不按照层式结构显示子分类，这就解释了为什么子分

类链接是列在列表中第一级。



& – 每次增加另一个参数的时候，需在它之前要输入 & 用来把和现有的

参数区分开。如 & 在 sort_column 和 optioncount之间。



为什么不把 放入

和

标签中呢？

当我们使用 wp_list_cats() 这个函数调用链接列表函数的时候，它会自动附上

一组

和

（列表条目）标签在每个链接的左右。查看页面源代码；可

以看到每个连接的周围都已经有一组列表元素的标签。

当处理侧边栏，无序列表和列表元素的时候，我们一定记得规则 #1：按顺序关

闭所有标签。

批注 [雨林木风2]: 11-12

#6b：页面链接列表

页面链接列表是从零开始创建 WordPress 主题系列教程的第六篇的第二部分，

通过上一篇的学习，现在已经熟悉了侧边栏的结构，接下来我们将继续修改侧边

栏，完成页面链接（Page-link）列表。当完成常规的侧边栏之后，我们将学习

39

如何窗体化（widgetize）侧边栏。

在分类链接上面添加以下代码：

保存并刷新浏览器。效果如下所示：

在默认情况下只有一个页面链接，就是 About 链接。我在我的本地的博客增加

第一，它把所有东西放入列表元素标签（LI），第二，它给列表一个名字，Pages。

第三，它增加一个无序列表（UL）。第四，它把每个链接放入到

和

标签之间。

在上面的截图中，注意到“Pages”这个列表标题和“Categories”这个分类链

接标题的大小不一样。

如何使它们一致呢？ 添加 ‘title_li=

Pages

’ 到 wp_list_pages()

作为参数。

保存并刷新浏览器结果如下：

41

title_li 是一个用来定制化页面链接列表的标题的参数。

Pages

是

title_li 这个参数的值

进一步定制化：

在我的例子中，我有四级页面链接。由于布局或者设计的原因使得不能在侧边栏

处理那么多级别的链接。为了限制显示列表的层数，增加了 depth 这个参数，

并把它设置为 3：

注意，我添加了 depth=3& 而不是仅仅 depth=3。这个 & 在这儿用于把 depth

和 title_li 这两个参数区分开。（如果你只有一个 about 页面链接，你将不

会注意有什么不同。）

这里是我的列表的不同之处：（对比这个截图和上面的截图。）

#6c：存档和链接列表

第1步 – 增加存档链接列表。



第2步：增加友情链接列表



存档和链接列表是从零开始创建 WordPress 主题系列教程

的第六篇的第三分，

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

第1步 – 增加存档链接列表。

在侧边栏区域的 Categories 列表下面输入以下代码:

42

复制之后检查下代码是否和下面一样：

保存并刷新浏览器。结果如下所示：

发生什么了？

我们使用了 wp_get_arhives() 这个 PHP 函数，并用了 type 这个参数以及

monthly 作为它的值，这样就按月调用存档链接列表。













– 开始列表元素

– 开始子标题

– 子标题文本

– 结束子标题

– 开始在存档链接这个无序列表

– 按月调用存档列表

链接，并把每个链接放入

• 和
标签中。如果查看源代码，我

– 结束在子标题下的无序列表



– 结束列表元素



第2步：增加友情链接列表

在存档链接列表下输入以下代码：

保存并刷新，结果如下：

默认情况下，我的 blogroll 和你的是没有什么不同，这里是它在源代码中的样

子：

44

上面的代码完全没有正确的被缩进，因为它们是由函数 get_links_list() 产生

的，就像上一篇所学的函数 wp_list_pages() 产生的代码一样，但是它遵循规

则 #1，按正确顺序关闭所有的东西。我已经圈出了元素和无序列表的标签让你

看得更明显。

#6d：搜索框和日历

第1步：增加搜索框



第2步：增加日历



第3步：增加元数据



搜索框和日历是从零开始创建 WordPress 主题系列教程

的第六篇的第四部分，

尽管这篇的题目是 搜索框（Search Form） 和 日历（Calendar），但是我同

样也会介绍 元数据（Meta） 。这一篇我们会结束常规的侧边栏，然后将在下一

篇将介绍如何窗体化（widgetize）化侧边栏。

第1步：增加搜索框

创建一个新文件，然后把该空白文件保存为 （当然是和

在同一个文件夹下）。把

中的内容拷贝到

。

在 文件，在侧边栏的最顶部输入以下代码：

45

保存并刷新浏览器，结果如下：

刚才发什么了呢？



id=”search”> – 开始一个名字为 search 的列表元素，给它一个

ID，这样就能够以后样式化它。

46











include() – 导入任何你想导入的文件。这和使用 WordPress 模板函数

去调用模板文件是不同的，因为 include() 只是简单导入已经存在的文

件。这里是调用在 文件中的代码。被导入的信息应该在

一个博客上基本不会被改变的。

TEMPLATEPATH – 主题文件夹的位置，这里是：

wp-content/themes/tutorial

‘/’ – 文件名：/

在 TEMPLATEPATH 和 “/” 中间的点把它们连接起来，

所以最终得到：

wp-content/themes/tutorial/

– 结束列表元素

注意，搜索框不像分类，归档，页面或者 Blogroll 一样有子标题。当然如果你

愿意，也可以给它一个子标题。

第2步：增加日历

在搜索框或者页面链接列表下面输入以下代码：

保存并刷新浏览器，结果如下：

47

发生了什么？













– 开始一个 ID 为 “Calendar” 的列表元素

– 开始一个子标题

– 输出 Calendar 这个词

– 关闭子标题

get_calendar() – 使用 get_calendar() 这个 WP 函数调用日历

– 结束列表元素

这样日历就完成了

第3步：增加元数据

在 get_links_list() 函数下输入以下代码：

保存并刷新浏览器，结果如下：

（如果你没有登录 WordPress）

（如果你已经登录）

那么这是怎么回事呢？

你开始一个列表元素（LI），跟着是一个子标题（H2） Meta。在子标题下，嵌

入了一个无序列表（UL）。最后把每个链接都放入了列表元素中（LI）。

wp_register() 这个函数能产生一组

• 和
标签，如果你没有登陆，

它显示注册（Register）链接，如果登录了，它显示的是 站点管理（Site Admin）

的链接。

wp_loginout() 不会产生列表元素标签，所以需要我们手工输入列表元素标签，

当你没有登录的时候，得到的是 登录（Login） 的链接，当已经登录的时候，

得到的是登出（Logout）链接。

到目前为止，wp_meta() 没有做任何事情，他在网页上和源代码中都不会产生东

西，现在不要考虑 wp_meta()，实际上你已经在使用它了。

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

#6e：窗体化侧边栏

49

第1步：创建 文件



第2步：窗体化侧边栏



窗体化侧边栏是从零开始创建 WordPress 主题系列教程

的第六篇的第五部分，

一个支持 Widget 的侧边栏或者说是窗体化（widgetized）的侧边栏几乎是

WordPress 主题的标准。

首先，什么是窗体化（widgetizing）呢？简单的说，窗体化就是能够通过拖拉

就能够整理侧边栏的模块。比如我们需要更改分类和存档的位置，只需要简单把

分类和存档列表拖到它们的位置即可，根本不用去修改侧边栏的代码。

第1步：创建 文件

打开记事本，然后把空白文件保存为 。把

文件

中所有的内容拷贝到 中。

回顾一下，现在在“tutorial”主题文件夹下应该有4个文件。

第2步：窗体化侧边栏

直接在侧边栏的第一个

标签输入以下代码：

if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) :

else : ?>

50

直接在

标签之前输入以下代码：

保存 文件，然后我们到 WordPress 后台 => 外观 => Widget 就可

以把 Widget 拖到侧边栏了。

#7：尾部

第1步：增加个 DIV 标签



第2步：添加版权信息



尾部（footer）是从零开始创建 WordPress 主题系列教程

的第七篇，这篇教程

将会很简单，去只要在侧边栏下增加个 DIV 标签，然后输入一些版权信息。其

实你完全可以不用我说明就能自己去做，可以先自己尝试下，然后返回这里再仔

细检查下。

第1步：增加个 DIV 标签

在侧边栏的 DIV 标签下输入以下代码：

51

第2步：添加版权信息

把尾部的文本放入段落标签中，你可以输入任何你想要的东西，这里是我的：

Copyright © 2007

保存并刷新浏览器，结果如下：

© 用于显示版权符号，还记得在 header 的时候使用的 bloginfo() 函数吗？这

里再次使用，“name”是用于调用博客标题，而“url”调用博客的地址。

如果你想你的博客标题成为一个链接，查下头部就知道怎么做了。

#8：验证 XHTML

验证 XHTML 是从零开始创建 WordPress 主题系列教程的第八篇

。在开始学习

CSS 并修改 文件之前，我们需要学习如何验证代码，简单说，验证

（Validate/Validating/Validation）就是检查下代码有没有错误，而验证又分

52

为：XHTML Validator 和 CSS Validator。这篇我们学到 XHTML 验证器。

首先打开 Xampp Control 和浏览器，并进入 localhost/wordpress。

然后查看 > 页面源代码。

全选并所有的源代码。

然后到 XHTML Validator

。

把刚才复制的源代码粘贴到 Validate by Direct Input 框中。

点击 Check 之后，验证器会就会检查代码，然后把检测结果反馈给我们。如果

反馈回来的结果是绿色的，那么代码没有错误。

如果有错误，则根据其提示进行修改。

#9： 和 CSS 介绍

第1步：打开 文件



第2步：添加 CSS 代码



学的第九篇，

和 CSS 介绍是从零开始创建 WordPress 主题系列教程

习 CSS 最好的方法就是去使用它，不像 XHTML 和 PHP 需要接触模板的核心文

件，同样不要需要理解任何基本概念，只要去用它，通过试用和修正错误是可以

让你快速学会。

我们现在已经在 文件有些内容，让我们先来看看这部分内容是干什

么的？

53











第一行显而易见就是主题的名字。

第二行是这个主题的地址，如果你的主题只是私用的而不准备发布的话，

那就不用管它了。

第三行是主题的描述。

第四行是版本号，这是非常重要的，特别是当你公开发布你主题新版本的

时候。

第五和第六行分别是主题作者的名字和主页。

在主题信息两边的 /* 和 */ 符号是为了让主题的信息不影响该文件的其他内

容，这是 CSS 的注释。当输入 CSS 代码去样式化你的网页的时候，你可能想在

这里增加些注释使得能够在以后更清楚知道这部分是干什么的。显然我们并不想

你的注释影响实际的代码，所以可以使用 /* 和 */ 这一对符号使得注释不被解

释。

打开 Xampp，主题文件夹，FireFox，IE 浏览器和 文件。



在两个浏览器的地址栏都输入：localhost/wordpress



从这里开始，我们需要同时在 FireFox 和 IE 上测试主题，不同的浏览器对 CSS

的代码解释是不同的。如果能够在尽可能多的浏览器器上和尽可能多的操作系统

上测试你的主题是最好的（Safari，Opera，Linux，Netscape 等等）。如果你

和我一样懒，那就只在 FireFox 和 IE 上测试你的主题吧。

第2步：添加 CSS 代码

在 文件中输入以下代码：

body{

margin: 0;

font-family: Arial, Helvetica, Georgia, Sans-serif;

font-size: 12px;

text-align: left;

vertical-align: top;

background: #ffffff;

color: #000000;

}

像 XHTML 和 PHP 一样，通过制表符增加缩进来组织代码：

把 body{ } 看作一个标签，然后它里面所有的东西看作属性和值，和处理 XHTML

时一样。{ 是开始符，} 是结束符。在 { 和 } 之间，冒号意思是开始而分号意

思是结束。（我在涉及到 XHTML，PHP，CSS的时候都使用标签，属性和值这些

术语是为了保持简单，实际上 PHP 和 CSS 有不同术语。如参数（parameters），

选择器（selector）和属性（property）。）

在我们继续之前，我需要解释下为什么使用 body{ } （CSS 选择器），是因为

你是在样式化网页的绝大基本部分（或者说是总体部分）， 标签。你不

会样式 因为这个标签没有东西需要样式化。你网页上展示的绝大部分的

东西是在 和 标签之间。

然后，在后面你会样式化 ID 为 header 的 DIV 标签。

进一步的解释：

margin: 0; 处理 body 标签的默认的页边空白，如果你要页边空白或者更大的

页面空白，把 0 改成 10px，20px 或者其他。PX 意思是像素。每个像素使你电

脑屏幕的一个点。当你的页边空白是 0 的话，就不需要后面跟上 px。

在下面的图片中，红色高亮的区域就是应用于 body 标签的默认的页边空白。

当给其样式化为 margin: 0;，下面是没有页边空白的相同页面：

font-family: Arial, Helvetica, Georgia, Sans-serif; 为你的网页或者网

站选择使用哪种字体。这些字体中的第一个，Arial 是可替换的，如果你的用户

56

没有在他们的电脑上安装 Arial 这种字体， 文件就会寻找

Helvetica，然后是 Georgia，再接着是 Sans-serif。你可以在字体文件夹（我

的电脑 > 系统盘 > Windows下面）找到你的字体列表。

font-size: 12px; 显而易见是字体大小。可以把它改大或

改小以查看变化。

text-align: left; 让你的文本向左对齐。把它改成 text-align: right; 去查

看不同之处。

vertical-align: top; 使得所有的东西从上面开始。如果是中部或底部排行你

的 body 标签，所有东西将会向下推。

background: #ffffff; 意思是白色背景。#ffffff 是白色十六进制代码。

#000000 是黑色十六进制代码。

color: #000000; 意思是文本颜色是黑色。

如果你想向前更进一步或者自己学习 CSS，最好的地方是

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

十六进制代码



第1步：添加链接颜色



第2步：添加链接

悬停颜色



十六进制颜色代码和样式化链接是从零开始创建 WordPress 主题系列教程

的第

十篇。这篇继续昨天介绍 CSS 的课程，我们今天将介绍如何着色和十六进制颜

色代码。

{ color: 色属性，跟着的是一个十六进制代码，是用于给文本上色。如 body

颜

#000000;} 意思是你页面 body 内所有文本将是黑色的。

背景颜色属性，跟着的是一个十六进制代码，是给除背景上

色。如

body{ background: #ffffff; } 意思是为 body 上白色背景。

十六进制代码

每个十六

进制代码前都有 # 号，然后跟着六位数字。这些数字的范围是

从 #ffffff

（白色）到 #000000（黑色）。



#ffffff， #eeeeee， #dddddd， #cccccc， #bbbbbb， #aaaaaa， #999999，

#888888， #777777， #666666， #555555， #444444， #333333， #222222，

#111111



前两位表示红色，第三和第四代表绿色，而最后两位代表蓝色。#ff0000 是

红色（red）。#550000 是暗红色（dark red）。 #220000 是更黑色的红

色（darker red）。 #00ff00 是绿色（green）。 #0000ff 是蓝色（blue）。



57

那么哪个十六进制代码是黄色呢？ #ffff00 就是黄色（yellow）。

#ff00ff 是紫色（violet）。

第1步：添加链接颜色

在 body{ }

选择器下输入以下代码：

a:link, a:visited{

text-decoration: underline;

color: #336699;

}

这些代码是干吗用的？，给所有的链接都加上下划线的（text-decoration:

underline;）和上了蓝色（color: #336699;）。这是不是纯正的蓝色，

但它确实是蓝色是因为最后两个数字（代表蓝色）是最高值的数字。



a:link 用于样式化链接。当你想把一个词转变为链接的时候，用什么实

现呢？使用 和 这对标签，因此样式化链接就是样式化

a:link。



a:visited 用于样式化已经访问过的链接。



另外一种输入方式：

a:link{

text-decoration: underline;

color: #336699;

}



和

a:visited{

text-decoration: underline;

color: #336699;

}



当给a:link

和 a:

visited这两个选择器应用相同的 text-decoration:

underline; 和 color: #336699; 这两个属性的时候。可以把它么你放在

一起，使用逗号来区分。

批注 [雨林木风3]: 11-14

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

在 a:link, a:visited{ } 下输入以下代码：

58

a:hover{

text-decoration: none;

}

这些代码是

干吗用的呀？ 当把指针移到链接上面时候下划线消失。

如果

不想在默认情况下有下划线而是在当把指针移到链接上面的时候才出现下

划线，那么就在 a:link 和 a:hover 之间交换下 text-decoration: 的值。

如果你想更改你链接悬停时的颜色，那么就增加 color: 和任何你想要的十六进

制代码，如：

a:hover{

text-decoration: none;

color: #ff0000

;

}

#11：宽度和布局

















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

第2步：自动页面居中

第3步：设置 header 宽

度和布局

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

第5步：设置 Sidebar 宽度和

布局

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

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

第8步（额外的步骤）：修正 IE 的双倍

页边距 bug

宽度和布局是从零开始创建 WordPress 主题系列教程

的第十一篇，这篇将介绍

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

同时在 Firefox 和 IE 下兼容，显示一致。

在我们开始之前，打开 Xampp Control，主题文件夹，Firefox 浏览器，IE 浏

览器，和这两个文件。

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

现在我们首先要确定的是主题的总体宽度。我们

使用 750px；主题的大小取决于

博客绝大多数访问者的屏幕分辨率。需要避免的是使用过大宽度的 的主题，如

果博客的读者都大多数使用 8

00px × 600px 的屏幕，这样的话，如果是使用

900px 宽的主题将会有 100多像素超出他们的屏幕，显然这是对用户很不友好

的。

不管怎样，我们怎么样把主题的总体宽度设置为 750px 呢？

59

container，sidebar 和 footer）

我们需要把现在主题中的所有的东西（header，

放入一

个 750px 的 DIV 标签中。

在 之后增加：

在 之前增加：

在 文件中输入以下代码：

#wrapper{

margin: 0 auto 0 auto;

width: 750px;

text-align: left;

}

在 CSS，# 号是通过 id 来

定位页面中的元素，而点号是通过 class 来定位页

面中的元素，如果

你的代码是

class=”wrapper”>，那么就应该用 .wrapper
来替代 #wrapper 去定
位 wrapper 这个 DIV 标签。
同时保存 和 文件。刷新 Firefox 和 IE 浏览器（按 F5）
查看所做的改动。
详细解释：
margin: 0 auto 0 auto; 意思是（注意顺序）：0上页边空白，自动右
页面空白，0下页边空白和自动左页面空白。从现在开始，记得设置左右
页边空白为自动将使得居中对齐。

width:
750px; 显而易见是 750 像素。

text-align: left; 是让 wrapper DIV 中的文本向左对齐因为我们等下
要要将
body{ text-align: left;} 改成 text-align: center;

第2步：自动页面居中
把 body{} 中的 text-align: left; 改成 text-align: center;。
为什么？（我假设你使用的是 Firefox 和 Internet Explorer 6）。你的布局
可能你看起来是正确的，但对于使用早前版本的 IE 用户可能不正确。还记得设
置左边和右边的页边空白为自动是居中吗？但是这并不是对所有的 IE 都适用，
所以 body{ text-align: center; } 是让 wrapper DIV 居中在旧版本 IE 的
一种解决方案。
（随便说一下，在 Firefox 和 IE 中文本大小是不同的，我们稍后解决。）
第3步：设置 header 宽度和布局
让 Header 浮到左边并且设置它的宽度为 750px：
60
#header{
float: left;
width: 750px;
}
第4步：设置 C
ontainer 宽度和布局
让
Container 浮到左边并且宽度为 500px：
#container{
float: left;
width: 500px;
}
第5步：设置 S
idebar 宽度和布局
让
Sidebar 浮到左边，宽度为240px，并且给它灰色的背景：
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}
#eeeeee; 是非常浅的灰色。我们给侧边栏增加background:
#ffffff 是白色而
一个背景颜色只是去查看
当增加剩下的 10 像素之后的不同之处。
第6步：设置 Footer 的宽度和布局
让 Footer 浮到左边，左右两边都没有东西，并且宽度为：750px：
#footer{
clear: both;
float: left;
width: 750px;
}
Header 和 Foot
er 的样式有什么区别呢？答案是 footer{} 中有 clear:
both;。它在那儿
使得 Footer 不能和它上面的东西（如 Sidebar 或者
Conta
iner）连接起来。
保存并刷新浏览器。
批注 [雨林木风4]: 11-15
第7步：给侧边栏增加其余的 10 像素
给侧边栏增加其余的 10 像素的页边空白。现在侧边栏的 CSS 应该是：
61
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}
保存并刷新浏览器去查看 10 像素的空白增加到侧边栏的左边了。
margin: 0 0 0 10px; 具体的意思是：上边空白为0，右边空白为0，底部空白
为0，左边空白为10像素。当大小为0的时候，px 单位不是必需的。
第8步（额外的步骤）：修正 IE 的双倍页边距 bug
Internet Explorer 有个双倍页边距的 bug，这样在 IE 下，我们的页面距就是
20像素，20像素的页边距可能会破坏布局并把侧边栏挤到页面的底部，因为一
个20像素的页边距使得 Container 和 Sidebar 的宽度之和为 760px 而不是
750px。为了解决这个问题，增加 display: inline; 到侧边栏。现在你的侧边
栏应该是：
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline; }
这里是现在的 index
和 style 文件的内容。
#12：日志样式化和其他杂项






第1步：Reset CSS
第2步：样式化 H1 标题
第3步：样式化日志
第4步：设置日志段落填充
第5步：样式化日志杂项
第6步：样式化导航栏
日志样式化和其他杂项是从零开始创建 WordPress 主题系列教程
的第十二篇，
这篇主要讲解如何样式日志，这篇不需要 ，
打开Xampp Control，theme 文件夹，Firefox，Internet Explorer 和
文件。
62
第1步：Reset CSS
在
文件中的 body{} 上面输入以下代码来处理大部分页边空白和填
充：
body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin
: 0;
padding: 0;
}
这里我们
使用的是 margin: 0;
而不是 margin: 0 0 0 0;。因为所有的
值都是一样的话，只用一个数字就够了，对于填充的设置也是一样的。

保存，刷新 Firefox 和 IE。接下来我们可以增加空白和填充到需要的地
方。

第2步：样式化 H1 标题
在 body{} 之后输入以下代码：
h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}
font-family: Geo
rgia, Sans-seriff; 把 H1 标题的字体从 Arial 改
成 Georgia。如果没有 Georgia，网页就会寻找 Sans-serif；

font-size: 24px; 我们在 body{} 中把字体设置为 12px，H1 和 H2 标
签是不会遵守的。
这就是因为标题标签遵循他们自己的规则。为了控制他
们，我们需要特别的去样式化它们。

padding: 0 0 10px 0; 意思是 10 像素的底部填充。这是为了在博客的
标题和描述之间增加空间。

保存，刷新，结果如下：
第3步：样式化日志
在 #container{}下面输入以下代码：（可以在输入每块代码之后，保存并刷新
去查看其中的变化。）
63
.post{
padding: 10px 0 10px 0
;
}
（给每个 class 名字为 post
的 DIV 增加 10 像素的顶部和底部空白。）
.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}
（.post h2 不是一般
的 CSS 规则。他是特别样式化在 class 名为 post 的
DIV
中的 H2 子标题。在侧边栏中的 H2 子标题就不受影响。）
.entry{
line-height: 18px;
}
（设置 entry DIV 中行
距。）
第4步：设置日志段落填充
在 a:hover{} 下输入以下代码：
p{
padding: 10px 0 0 0;
}
（给每个段落标签增加 1
0 像素的顶部填充。)
第5步：样式化日志杂项
在 .entry{} 下面输入：
tadata{
border-top: 1px solid #c
cc;
margin: 10px 0 0 0;
}
对于 postmetadata 这个段落便签，给它增加一个灰色的边框和10像素顶部空
白。
border-top 意思是仅仅顶部边框 border-left 意思是仅仅左边边框，等等。 如
果只是单独的 border，没有 -top，-right，-bottom 或者 -left 则意味着所
有的边框。如 border: 1px solid #ccc; 意思为所有的四边都有1像素的灰色
的边框。
64
批注 [雨林木风5]: 11-16
第6步：样式化导航栏
在 tadata{} 下输入：
.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}
对于 Next page 和
Previous page 链接外面的的 navigation DIV 标签，我
们
增加了一个10像素的顶部填充。

把字体大小改成14像素。

把字体改成粗体。

把行高增加到18像素。

#13：样式化侧边栏





第1步：样式化侧边栏的无序列表
第2步：给 LI 添加填充
第3步：样式化侧边栏下的子标题
第4步：清除子 UL 下的 LI 填充
第5步（可选的）：扩展日历宽度到整个侧边栏
样式化侧边栏是从零开始创建 WordPress 主题系列教程
的第十三篇，这篇主要
讲解如何样式化侧边栏里面的所有元素，在对
侧边栏样式化之后，这系列教程就
将差不多结束了。
打开 XAMPP，主题文件夹，Firefox，IE 和 文件。
第1步：样式化侧边
栏的无序列表
在 .sidebar{} 下输入：
.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}
65
现在已经为侧边栏样式化父级无序列表（UL）标签。所有的子 UL 或者内嵌的 UL
将会击继承同样的样式。在这里，它是无列表样式，零空白和10像素的填充。
如下所示：
第二级的（或内嵌的） UL 继承了第一级 UL 的样式。如果你给了第一级 UL 应
用了边框，第二级的 UL 同样也会有个边框。
保存并刷新就可以看到列表条目现在已经没有前面的圆点了。
注意下你是如何增加顶部和底部填充的。
第2步：给 LI 添加填充
在 .sidebar ul{} 下输入：
.sidebar ul li{
padding: 10px 0 10px 0;
}
这是现在的填充：
66
在进行这步之前，搜索框和日历之间以及日历和页面之间是没有空间，如何给这
些模块之间添加空间呢，我们需要给 .sidebar ul li{} 添加的10像素顶部和
底部填充。为什么不在第一个地方的 UL 标签增加10像素的填充呢？这样的话
将会有20像素的顶部填充和20像素的底部填充。如果你还是不明白，那么就去
给 .sidebar ul{} 增加顶部和底部填充，就会看到问题的所在了。
第3步：样式化侧边栏下的子标题
在 .sidebar ul li{} 下输入：
.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}
还记得我们已经样式化了在 .post{} 下的子标题，但是这个是不会对侧边栏的
子标题起作用的，因为前面我们仅仅样式化在 .post{} 下的子标题？现在我们
是在样式化侧边栏下的子标题，结果如下：
67
这就是我的页面链接的样子。可能默认安装下的 WordPrss 只有一个链接：
About。我的离线 WordPress 增加了多重页面链接是为了测试最低级别的链接看
起的样子，注意到我已圈出在底部有不必要额外的填充，这是一个非常好的关于
样式继承的例子。这里不是10像素而是20。
因为你给 .sidebar ul li{} 增加了填充，为了解决这个问题，直行第4步。
第4步：清除子 UL 下的 LI 填充
在 .sidebar ul li h2{} 下输入：
.sidebar ul ul li{
padding: 0;
}
在 .sidebar ul ul li{} 中连续的 UL 指明了我们是在定义第二级别的 LIs。
再说一次，当所有的值都为 0 的时候，你不需要 px 这个后缀。
结果如下：
68
行距太近了，所以我们把行高改成 24px。
增加 line-height: 24px; 到 .sidebar ul ul li{}.
另外，如果你在 IE 下，搜索框下有多出了额外的空白，在下面增加 form：
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p{
margin: 0;
padding: 0;
}
改成：
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}
第5步（可选的）：扩展日历宽度到整个侧边栏
执行这一步，如果你想让你的日历的数据能够扩展并覆盖整个侧边栏的宽度。当
为了样式化日历，找出在里面的标签和这个便签的名字或者 id。 查看 > 页面
源代码或者源代码，侧边栏是在底部，所以到源代码的底部查找 Calendar。
现在我们知道日历是在一个 TABLE 标签中并以 wp-calendar 作为 id。那么如
何在 文件中锁定 wp-calendar table 呢？
答案是 table#wp-calendar{}。为什么？早前，你学了使用 # 号当样式化使用
id 而不是 class 命名的 DIV。在这里，是 table 而不是 DIV，跟着是 id 的
值，wp-calendar。
如果仅仅 #wp-calendar{} 也是可以的因为它是唯一的而且 WordPress 不会使
用 #wp-calendar 给别的标签。但是你应该试着特定化当能够的时候。如果要更
加特定化 使用 .sidebar ul li table#wp-calendar{}，想更加特定化？好的，
使用 .sidebar ul li#calendar table#wp-calendar{}. 因为列表条目（LI）
包含日历子标题和一个 id 被命名为 calendar 的日历表格。
现在你知道可以使用什么，如何怎么扩展 table，给表格加上 width: 100%; 。
在 .sidebar ul ul li{} 下输入：
table#wp-calendar{
width: 100%;
}
保存和刷新，结果如下：
70
width: 100%; 因为你想日历表格适应到侧边栏的宽度，无论你把侧边栏改成多
少像素。
可能这样看起来并不好，但是我相信你已经知道如何改进。日历需要更多的样式
去看起来更好。技巧：再次查看源代码，找出在 TABLE 下的哪个标签你可以样
式化。
#14：底部和拆分 Index







第1步：样式化 footer
第2步：设置 footer P 的行距
第3步：
第4步：在 中导入
第4步：
第5步：
教程回顾
底部和拆分 Index是从零开始创建 WordPress 主题系列教程
的第十四篇，这篇
我们完成对主题的样式化和开始把 文件分成多个小文件。在这篇中，
首先要对 文件进行修改，然后把 分成一些新的文件。
打开 XAMPP，主题文件夹，Firefox，IE， 和 。
第1步：样式化 footer
给 footer DIV 增加 10px 顶部填充。你还记得如何增加填充？这次我不提供代
码。
第2步：设置 footer P 的行距
给 footer 里的所有的 P 标签 18px 行距。那是 #footer p{}.。（今天关于 CSS
的就这么多。）
第3步：
71
创建一个新文件，把它命名为 。

在 文件中，把 header DIV 及以上所有东西都拷贝到
文件中。

这是我的
文件。不要从我的这里拷贝，从你自己的 文
件拷贝。
第4步：在 中导入
为了使所有从 中拷出的内容依然在 文件中，输入以下代
码：
72
这是个 WordPress 主题系统特别用来导入 文件的函数，而不用使
用 PHP 的函数：.
保存并刷新浏览器，你应该看到没有变化。如果你的改变破坏了主题，那么肯定
有错误。
第4步：





和第4步一样，更多相同的事情。这次，创建 文件。
把 文件中的 Sidebar DIV 从开始到结尾都复制到
文件中。
那么，在 文件，将其取代为：.
保存并刷新浏览器，再一次，你应该看到没有变化。
这是我的 文件。
第5步：
为 重复上面的步骤。

这是我的 文件。

教程回顾
创建了三个新文件：， 和 。

使用了三个新的函数：get_header()，get_sidebar() 和 get_footer()。

73

下面是这节课结束之后的文件：index，style，header，sidebar，footer。
#15：子模板文件






第1步：
第2步：
第3步： 和
第4步：定制
第5步：定制
课程回顾
子模板文件是从零开始创建 WordPress 主题系列教程
的第十五篇，这篇将和像
上一篇创建 ， 和 这些模板文件一样创建
更多的子模板文件。
现在 文件已被拆分
，这一切都变得更简单。
第1步：
在做这步之前，查看你的侧边栏，点击其中的一个存档链接，结果的页面是不是
和首页没有什么不同？





创建一个新文件：
把 中所有东西复制到
保存
在 文件，把 the_content 改成 the_excerpt。
再次保存 文件
通过创建一个 文件并把它改成和 不一样，这就是定制
化存档页面的外观。
现在如果你刷新你的存档页面，它将只显示摘要而不是全文的日志。
为什么你想这么做呢？ — 防止 Google 以为重复内容惩罚你的博客，如果一个
存档页面和首页显示相同的内容，那就是重复的内容。
如果是私人的博客呢？那么就没有必要去区分首页和存档页面。但这并不是说摘
要对私人博客没有用。
同样 — 默认你的类别页面将使用 显示内容，如果你没有
文件，类别页面将使用 显示内容。
如果你想类别页面和首页和存档页面看起来不一样，那么创佳一个
文件并定制化它。
74
第2步：
创建一个新文件：

把 中所有东西复制到

保存就完成了。

现在所有的，所有的搜索结果将会返回摘要。如果没有 这个模板文
件，搜索选项将会使用 去显示搜索结果。
（可选）你可以返回到课程1
去回顾者层次结构。
第3步： 和
创建两个新文件： 和

把 中所有内容拷贝到 和 。（从现在开
始，页面和单篇日志应该是一样的。）

保存页面和单篇日志文件，关闭它们。

第4步：定制
还记得静态页面和页面之间的不同吗？ 模板文件是用来定制化这些特
殊静态静态页面。
第一，在 中的 下输入以下代码：
link_pages(’
Pages: ‘, ‘
’, ‘number’); ?>
和
’, ‘
’); ?>
第二，从 中移除 postmetadata 代码。结果如下：
第三，在 中移除 posts_nav_link() 或者导航模块。
75
刚才发生了什么？
第一行代码是用于显示页面的分页链接。
举个例子，编辑 About 页面。根据我的屏幕截图增加代码：
当你想把一个非常长的页面分成几个页面的时候，这是非常有用的。
第二行代码是用于显示可以用来编辑静态页面的编辑链接。
76
通常页面是没有分类，并且通常不想给他们显示创建时间，所以需要去移除
postmetadata。同样要移除 posts_nav_link() 代码因为静态页面不会显示后一
页和前一页的链接。
保存 文件并关闭它。
第5步：定制
点击一个日志的标题去阅读日志其余部分就会带你到单篇日志查看模式。
模板就是用于处理查看单篇日志时的外观。
在 中的 下输入：
link_pages(’
Pages: ‘, ‘
’, ‘number’); ?>
是的，这是相同的用于编码页面的分页链接的代码。同样我们也可以把日志分成
多篇子日志。
第二，在 postmetadata 区域，移除 函数
和前面的
标签。不要移除整个 postmetadata。
移除了留言链接函数是因为在单篇日志查看模式下留言链接函数是不起作用，所
以要在 文件中移除它。只有管理员可见的编辑链接，在 BR 标签的
左边。你不想跳过一行才能看到这个本来你可以在右边看到链接？这就是移除
BR 标签的原因。
第三，用以下代码取代 ：
%link ?’) ?>
在前面，存档，分类和搜索页面，我们使用 posts_nav_link() 函数去调用后一
页和前一页的链接。对于查看单一日志的页面，它是没有后一页和前一页链接的，
我们可以使用 previous_post_link() 和 next_post_link() 函数去调用前一
篇日志和后一篇日志的链接。
保存 文件，到某篇日志下查看在导航区域的不同。
课程回顾
创建了四个新的文件或者或者子模板：，，
和 。

和 模板文件是相同的。

Pages （和日志不同）是没有分类的，他们同样没有后一页和前一页的链
接。

77

不会显示留言链接（被 comments_popup_link() 函数调用）
并且他不用 posts_nav_link() 去调用导航链接。
#16：留言模板





第1步：创建
第2步：样式化留言
第3步：在 添加留言模板
第4步：验证代码
评论模板的进一步解释
这篇教程是在 WordPress 2.7 之前撰写的，而 WordPress 2.7 之后支持了
Thread Comments，这里有让你的主题实现 WordPress 2.7 的 Thread Comments
的方法。但是还是建议你查看下这篇教程。
留言模板是从零开始创建 WordPress 主题系列教程
的最后一篇。这篇将涉及到
博客一个比较重要的东西；评论模板。
你应该知道：
没有快速的方式在 建立评论模板

大部分的 WordPress 设计者使用来自 WordPress 默认主题（Kubrick）
的默认评论模板根据。

一些设计者会修改默认的评论模板去适合他们自己的需求。

你将使用我的对默认评论模板的修改版本。

第1步：创建
创建一个新文件：。

把我的 文件中的内容复制到 。

保存 文件。

第2步：样式化留言
把我的 comments-template-css 文件中的内容拷贝到你的
文件中。

复制到 的底部或者刚好 #footer 的上面。

第3步：在 添加留言模板
在 文件中，entry DIV 的下面，输入以下代码：
comments_template() 这个函数是用来从 文件调用评论模板。
文件然后就会根据它的模板（或者代码）去显示评论列表。列表
中的每个条目是一条评论。
如果想让人们可以在静态页面也可以留言，同样可以把 comments_template()
函数用到 文件。
第4步：验证代码
第四步是验证你的代码，然而可以不进行第四步的，因为你在使用的是我已经整
理过的默认主题评论模板的修改版。我已经替你验证过代码了。
验证：





查看 > 页面源代码
拷贝所有源代码
然后到 validator。
把你的代码粘贴到 Direct Input 框中。
点击 Check。
以后的参考（当你创建你自己的主题和评论模板），下面是需要验证的页面：






密码保护的单一日志并有留言 — Password protected single post with
comments
评论模板的进一步解释
评论模板从根本上说是一个有序列表（OL），不是无序的，尽管它们基本
上同样方式工作。 无序列表是以圆点列表组织的。有序列表则是以数字
列表组织的（每个条目都有一个数字，从1开始）。

在 文件中，你用 comments-template DIV 围住
comments_template()。现在你的评论模板在一个 DIV 标签中的一个有序
列表中。

当你你的日志是密码保护的，你的评论同样是密码保护的：
这个修改版的留言模板有一个 H2 子标题显示 Password Protected。默认的留
言模板是没有的。
下面展示了哪些东西组成了你的留言列表：
简单整理下就是：
80
comment_text() 函数就是用来调用每条留言的。
我不会解释留言模板的 CSS 代码的意思。不像 文件中的代码，
你可以随便测试你的 CSS 代码而不会弄坏留言模板。自己去测试回比我的解释
对你更有好处。
今天没有课程回顾，你已经完成了 WordPress 主题制作教程。
免费分享教程，爱心接力分享ing!
Godaddy支付宝人民币付款购买空间教程图解
IX Web Hosting 信用卡和支付宝(Alipay)购买教程
[教程] 购买Godaddy域名赠送10G免费空间的开通方法(图)