admin 管理员组文章数量: 1086019
2023年12月22日发(作者：disp matlab)
超详细WordPress 主题教程：从零开始制作
创建 WordPress 主题所需的工具和准备
从零开始制作 WordPress 主题其实不难，只要你从现在开始认真阅读这个教程，一步一步认真学习，你就会成为一个 WordPress 主题制作高手。至少你会修改现有主题。
网络上已经有很多关于制作 WordPress 主题的教程，并且 WordPress 官方网站上也有指导文章。但是当你不懂这方面的术语的话，这些教程可能不一定会帮助你，甚至还会误导你，所以这个教程会真正从零开始教你如何创建 WordPress 主题。
创建 WordPress 主题所需的工具和准备
开始真正制作主题之前，你需要使用到下面这些工具：
为了测试方便和快速，你首先需要在本地安装 WordPress，至于如何在
Windows 系统上安装 WordPress，你可以参考这篇日志：在 WordPress 本地安装 WordPress。
如果由于某种原因不能在本地安装 WordPress，那么你也可以的服务器上安装一个测试版的 WordPress。这个时候你必须要有一个支持 WordPress
主机的服务器，一般我使用 LAMP 主机（Linux+Apache+MySQL+PHP）主机，Win+IIS 主机可能会有很多问题，调试也比较麻烦，而 LAMP 主机，从我个人使用经验来说，我推荐 (MT) Media Temple 主机。
代码编辑工具，如 NotePad++ 或者 Vim 都可以，主要是适合自己个人使用习惯。
FTP 工具，用于上传主题到服务器上测试，这方面的工具很多，如
Filezilla，SmartFTP 等，如果你先安装软件麻烦（对啊，现在是云计算时代，谁还装软件），你也可以安装 Firefox 的 FTP 扩展，Fireftp，直接在 Firefox 中上传文件到服务器上。
XHTML 验证器和 CSS 验证器。你将需要这些工具去验证你的主题是否符合 XHTML 和 CSS 标准，并且可以使用它查出奇正错误的地方。
这篇就介绍到这里，主要介绍了制作 WordPress 主题所需的工具和应该做哪些准备，下面就开始要了解和开始制作 WordPress 主题。
#1：介绍
基本规则：
专业术语：
层式结构：
1
WordPress 主题教程 #1：介绍是从零开始创建 WordPress 主题系列教程 的第一篇。
从零开始制作 WordPress 主题的教程不会一次就教会你所有的东西，那样也是不可能的，这个教程也不是 WordPress 主题制作的参考，我所做的是一步一步从零开始教你如何制作 WordPress 主题，所以一定要耐心。
所以这一篇介绍首先是 WordPress 主题制作的一个最基本的介绍。这里会涉及到 HTML 和 WordPress 的基本规则，一些专业术语，以及 WordPress 主题的层式结。这些概念是很重要的，在接下来教程的很多地方都会涉及到，所以开始之前一定要搞清楚。
基本规则：
规则 #1：以正确顺序关闭所有 HTML 标签。
在上图中在错误关闭标签的演示中，关闭的 ul 标签是不按次序的。
每个 HTML 标签都是在 < 和 > 中，如果有斜线 /，则说明这个标签是结束标签，没有则是开始标签。如：<> 是开始标签，而 是结束标签。
在上面的例子中，使用 ul（无序列表）li （列表元素）标签。注意 li 的开始和结束标签在 ul 的开始和结束标签的里面，这就是标签正确嵌套方式。
规则 #2：每个主题至少要有这两个文件 – 和 。 告诉主题中所有的元素如何布局， 则告诉主题中所2
有的元素该如何展示和样式。下面是一个完整的主题含有的文件列表（现在我们不用详细了解这个列表每个文件的意思，有个这样的印象就可以了）：
o
o
o
o
o
o
o
o
o
o
o
o
o
专业术语：
Template（模板） — 其实就是一个代码集，主题中很多地方会利用到这个代码集，所以把它们整合成一个模板，这样就就不必一遍遍输入这些重复代码。
Template file（模板文件） — 一个包含一个或者多个代码集（模板）文件。每个主题是由多个模板文件组成的，如：，， 等等。
Theme（主题）或者 WordPress theme（WordPress 主题） — 所有你正在使用的文件：文本，图像，代码等等。注意： WordPress theme（主题）和 WordPress template(s)（模板）是两个不同的东西，尽管有些人认为他们一样。
Post（日志） — 现在你读的就是一篇日志。此外，它是你 blog 的一个简单的条目，如：一个页面或者一篇日记。
Page（静态页面） — 一种特殊的 post，它不是以分类组织的。它有别于你其他的日志。注意：在 WordPress，page（页面）和 Page（静态页面）是两种不同的东西。
层式结构：
下图就是 WordPress 的层式结果，它简单的向你展示，一旦你主题中的某个文件丢失了，WordPress 主题系统将会寻找什么模板文件来代替。这里列出了 6 个文件而不是完整的 13 个，因为这 6 个是相对更重要一些，不过在接下来的教程中，余下的文件也都涉及到。
3
我们可以通过上面这张图的所处位置知道各个主题文件的重要性，越靠左越重要。
这里可能大家有个疑问，为什么会存在 WordPress 模板文件的层式结构，或者说是重要性级别呢？因为 WordPress 利用这个层式结构去寻找相应的模板文件显示页面，并且在相应的文件丢失之后如何处理。
如果 模板文件（用来显示存档页面）丢失了，那么 WordPress 将会使用 来控制存档页面如何显示。
如果 模板文件丢失了呢，哪个模板文件它会去寻找用来显示单一日志呢？它会寻找 。
WordPress
#2：模板文件和模板
Header 模板文件:
Index 模板文件：
Sidebar 模板文件
Footer 模板文件：
模板文件（template files）和模板（template）是从零开始创建 WordPress 主题系列教程的第二篇。开始之前，你要确保你已经看过WordPress 主题教程 #1：介绍，否则你将无法理解在教程 #2 中使用的名词。
在WordPress 主题教程 #1：介绍中，我们已经学过了 WordPress 的两条基本规则和术语，而这篇将会深入讲解模板文件，模板，以及每个页面的结构。
4
WordPress 博客的每个页面是由多个模板文件组成的，下面是首页的例子：
在上图中，我们可以看出主题的 是由 4 个模板文件组成：
，， 和 。
Header 模板文件:
通常在这个文件中包含博客的标题（title）和描述（description）。而且它们通常在整个博客中都是一样的。
Index 模板文件：
这个模板文件包含你的日志的标题，日志的内容（就是每篇日志的文本和图片）和日志的元数据 （元数据是每篇日志的额外信息，如作者是谁，日志发布的时间，在哪个分类下，有多少留言等等）。
5
Sidebar 模板文件
这个模板文件主要用于控制博客的页面列表，类别列表，存档列表，友情链接列表和其他一些列表。
6
Footer 模板文件：
像 模板文件一样， 通常不会因为页面的改变而改变，你可以在这里放置任何东西，但是通常是版权信息。
现在让我解释为什么把上面图片中的 所在的区域标为红色的。引文这块区域是会根据不同类型的页面而发生变化。
如果你在单一日志页面，这时候页面将会包含这四个模板文件：，， 和 footer。
7
#3：开始
第1步：打开 XAMPP 控制面板。
第2步：创建你的主题文件夹。
第3步：创建 和 文件。
第4步：创建 。
第5步：安装你的主题。
开始 是从零开始创建 WordPress 主题系列教程的第三篇。在介绍了
WordPress 主题的一些规则和术语，以及对 WordPress 模板和模板文件了解之后，现在是开始动手创建 WordPress 主题了的时候。
在这篇中，你将要着手开始写 WordPress 代码。这里建议在本地电脑上安装
WordPress，而不是安装到服务器上，因为本地更方便测试。
第1步：打开 XAMPP 控制面板。
8
在 XAMPP 文件夹（通常是：C:xampp），双击 将会弹出一个新的窗口。单击 Apache 和 MySQL 的启动按钮。如下图所示：
启动之后你看最小化窗口了。
第2步：创建你的主题文件夹。
转到你本地安装的 WordPress 主题文件夹，应该在xampp/htdocs/wordpress/wp-content/themes。创建一个新的文件夹，命名为
tutorial。
第3步：创建 和 文件。
打开记事本或者你选择的文本编辑器，把 这个文件中的所有内容都拷贝到你的记事本。保存为 。
9
打开另外一个记事本，直接保存为 到相同的文件夹下.
现在有两个文件了: 和 .
解释：
点击上面的图片查看大图。我会向你解释每个红色圆圈区域是什么意思。
Doctype – 指明你用哪种类型的代码来编码你的主题。这里你暂时还不用管它的详细意思。
是网页开始的地方。
是你的网页头部开始的地方。每个网页都有一个头部和主体。 是头部结束的地方。是一个 PHP 函数，它能取得
文件所在的路径，这样主题就能使用 样式化页面上所有元素。任何时候，PHP 代码都是在 之间的。PHP 代码和 HTML 的 10
代码是不一样的，在 PHP 中， 是结束 PHP 代码。
所以：
bloginfo(’stylesheet_url’) – 调用 文件所在的路径
; – 停止调用函数。分号是用来结束一个 PHP 语句。
?> – 结束 PHP 代码
– 这是网页主体开始的地方。你能在网页上看到和读到的东西就是主体部分。你正在阅读的这个教程说明你在正在看当前这个网页的主体部分。是网页主体结束的地方。
是网页结束的地方，没有东西在它的后面了。
第4步：创建 。
把 中所有的代码拷贝到你的 文件中。保存和关闭它。
第5步：安装你的主题。
打开浏览器。在地址栏输入输入 localhost/wordpress/。登录到你的 WordPress 管理后台。（这里能够看到 WordPress 登录页面是因为你在第1步的时候启动了 Xampp。否者的话，在这里你的浏览器会报找不到的错误。）
在管理界面下到 外观 (Apperance) 菜单并激活名为 Tutorial 的主题。
11
注意，你的主题文件没有屏幕缩略图，所以是空白的。一旦激活了，WordPress 就会告诉你激活信息。
现在打开一个新的浏览器或者标签页（如果你的浏览器支持标签页浏览）并在地址栏输入 localhost/wordpress。你应该得到一个空白页面，恩，完全空白的页面。如果不是，那你就是在错误的页面上了。
你的主题已经创建好了，这就是这个课程，下一步我们将讨论主题头部模板。
不要忘记关闭 Xampp。双击它在任务栏中小图标，点击 Apache 和 MySQL 的停止按钮，然后点击推出。
12
#4a：Header 模板
第1步：打开 XAMPP 和主题文件夹。
第2步：打开
第3步：调用博客标题
第4步：调用博客链接
前面我向你讲Header 模板是从零开始创建 WordPress 主题系列教程的第四篇。解了如何安装和启动 XAMPP，安装 WordPress 主题以及介绍了 PHP 语言的最基本语言，这篇我们将继续 PHP 并学习如何调用博客的标题和链接。
尽量输入所有代码而不是直接拷贝我给你的代码，这样可以让你尽量记住你所学到的的。
第1步：打开 XAMPP 和主题文件夹。
打开 Xampp，然后打开上次创建的主题文件夹，xampp/htdocs/wordpress/wp-content/themes/tutorial。我们应该看到上次创建的两个文件： 和 。
和 文件的内容应该和 和 一致。
第2步：打开
打开浏览器，转到 localhost/wordpress。因为上次安装了一个空白的主题，这时我们应该看到一个空白的页面。
返回主题文件夹并打开 文件。
到目前为止，我们已经打开了主题文件夹，浏览器和 文件。
第3步：调用博客标题
编辑 文件。在
和 这两个标签之间输入bloginfo(‘name’); ?>，然后保存它。
13
返回到浏览器并刷新。这时候我们应该能够看到博客的标题。博客的标题是 Demo
Theme Development。
刚才发生什么了？
我们在网页的主体 (body) 之间加入了一行 PHP 代码到 。bloginfo()
是调用博客的信息的函数。其中参数 name 代表了它调用的是博客的标题。这个名字是在 option 页面中设置的 Weblog Title。
bloginfo(‘name’) – 调用博客信息，具体是博客的标题。
; – 结束调用博客信息
?> – 结束 PHP 代码
14
每次我们在 文件中增加或者更改任何东西之后，都可以保存，然后刷新页面去查看结果。
第4步：调用博客链接
调用了博客的标题之后，接下来就要把博客的标题放入超链接中，这时候需要一个 XHTML 标签。
返回 文件。
在同一行增加 和 。此时新行的代码应该是：
返回到浏览器，刷新，然后就可以看到博客的标题变成了链接。
现在它是一个链接，但是它没有链接到哪里。因为这个是博客的标题，我们应该让它链接到首页。为此，在 href=后的双引号中输入
保存，现在的代码应该是：
返回到浏览器，刷新，当鼠标在链接上面的时候，浏览器的状态栏应该显示
localhost/wordpress
现在点击这个链接，它就会让我们返回首页。可能现在看到还是是相同的页面，但是用 # 或者 localhost/wordpress 作为链接地址是完全不一样的。在接下来的课程我们会学到到他们之间的不同。
刚才发生什么了？
我们把网站名字变成了链接，并使它链接到博客的主页。
15
bloginfo(‘url’) – 调用博客基本信息，具体是首页的的地址或者 URL
– 链接的结束标签。否则网页将不知道哪里结束链接，这样会使得页面接下来的内容全部都变成链接。还记得规则 #1吗？正确关闭打开的所有标签。
href=”" – 超文本的简写。在引号之间就是它的值。
最终代码为：
意思为：开始一个链接，链接的地址是博客的URL，用 PHP 函数 bloginfo(‘url’)
去调用这个地址或者URL。这个链接的文本是博客的标题并使用 PHP 函数
bloginfo(‘name’) 去调用博客的标题。最后结束链接。
这篇主要介绍了 WordPress 主题的 XHTML 代码，下一篇我们将继续 Header 模板。
#4b：Header 模板 2
第1步：开启 XAMPP 和打开
第2步：给博客的标题添加 H1 的标签
第3步：添加博客描述
第4步：DIV 标签
第5步：添加 Header DIV 标签
Header 模板 2是从零开始创建 WordPress 主题教程系列教程的第四篇第二部分。最后说一次，开始之前务必先读下前面的日志。这篇会完成 Herder 模板，并且开始介绍 DIV Box 模型。
第1步：开启 XAMPP 和打开
- 启动 Xampp
- 打开 Tutorial 的主题文件夹
- 打开浏览器，在地址栏输入 localhost/wordpress
- 返回主题文件夹，用记事本打开
第2步：给博客的标题添加 H1 的标签
现在， 的代码是：
16
给它添加
和
标签。H1 标签意思是标题一。HTML 一共可以有7级标题：H1，H2，H3，H4，H5，H6。按照默认，H1是字体最大而H6是则最小。添加之后的的 文件是：
”>
保存，返回浏览器并刷新。
第3步：添加博客描述
调用博客的描述，则在博客标题链接的下面输入以下代码： 。
现在变成了：
”>
保存并刷新浏览器，可以看到在博客标题链接的下面出现博客的描述，我们可以到 WordPress 管理后下修改博客的描述。
bloginfo(’description’) – 调用博客信息，这里的是描述
; – 停止调用
?> 结束 PHP 代码
第4步：DIV 标签
这步将介绍一个新的标签 — DIV。
给以上代码添加
保存，刷新浏览器，应该看到没有任何变化
可以把 DIV 想像成一个无形的盒子 (box)。在这里它把博客标题链接和博客描述从其他东西中区分开。如果没有对它进行样式化，它无非是单独的内容，以后 17
我们可以会用 这个文件去样式化这个无形的盒子。我们可以给 DIV
附上 边框（borders），填充（paddings）, 页边空白（margins），背景颜色（background color），背景图片（background images），以及其他一些东东。
第5步：添加 Header DIV 标签
添加 id=”header” 到 DIV 标签，如下：
保存并刷新浏览器。
同样也没有改变，这里给 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/#。
如果有不止一个的标题链接，我们将看到每个链接会链到不同的日志或者网页。但是我们的日志标题依然在同一行上面。为了分开它们，在日志标题链接代码的两边添加
和
标签。”>
记住 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 »'); ?>
复制到 下面。（注意：在这部分，我们只需要复制和粘贴。当我制作 WordPress 主题的时候，我也只是复制和粘贴这部分代码。对于这部分代码，你不需要完全理解它，只要知道每部分干什么已经足够了。）
30
下面的屏幕截图是为了适应日志的大小而只裁剪了一部分，它主要你关注日志元数据代码的位置：
保存并刷新浏览器，现在应该是：
我们同样可以通过查看源代码来看日志元数据是怎样的？
详细解释：
– 所有的日志元数据都在一个 class=”postmetadata” 的段落标签中，因为我想把日志元数据和日志内容区分开。如果没有段落标签，日志元数据信息将在日志内容结束的地方继续，这样就没有任何间距去区别内容和日志元数据。– : 是调用冒号“:”的代码；
把Filed under:放入中不是必须的，这样主要为了使得 Filed
under: 可翻译。如果你的主题不需要支持多语言，可以简单输入 Filed under:；
– 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() 调用一个弹出的留言窗口，如果没有激活，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 错误信息是在 之中。如我上一篇所说，这不是必需的，只是为了让主题可翻译。
整个信息和代码 Not Found 外面有
和
。这个同样也不是必需的。你可以简单使用：Not Found
33
但是，给这个错误信息使用上
（子标题）标签能够使它更明显，让访问者注意到这个页面上没有任何东西。
那么
第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 标签。
效果如下：
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 的后面和
发表评论