超详细wordpress_主题教程:从零开始制作


超详细 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:每个主题至少要有这两个文件 – style.css 和 index.php。 index.php 告诉主题中所有的元素如何布局,style.css 则告诉主题中所 2 3 有的元素该如何展示和样式。下面是一个完整的主题含有的文件列表(现 在我们不用详细了解这个列表每个文件的意思,有个这样的印象就可以 了): o style.css o index.php o home.php o single.php o page.php o archive.php o category.php o search.php o 404.php o comments.php o comments-popup.php o author.php o date.php 专业术语:  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 主题系统将会寻找什么模板文件来代替。这里列出了 6 个 文件而不是完整的 13 个,因为这 6 个是相对更重要一些,不过在接下来的教 程中,余下的文件也都涉及到。 我们可以通过上面这张图的所处位置知道各个主题文件的重要性,越靠左越重 要。 这里可能大家有个疑问,为什么会存在 WordPress 模板文件的层式结构,或者 说是重要性级别呢?因为 WordPress 利用这个层式结构去寻找相应的模板文件 显示页面,并且在相应的文件丢失之后如何处理。 如果 archive.php 模板文件(用来显示存档页面)丢失了,那么 WordPress 将 会使用 index.php 来控制存档页面如何显示。 如果 single.php 模板文件丢失了呢,哪个模板文件它会去寻找用来显示单一日 志呢?它会寻找 index.php。 WordPress #2:模板文件和模板  Header 模板文件:  Index 模板文件:  Sidebar 模板文件  Footer 模板文件: 模板文件(template files)和 模板(template)是 从零开始创建 WordPress 主 题系列教程的第二篇。开始之前,你要确保你已经看过WordPress 主题教程 #1: 介绍,否则你将无法理解在教程 #2 中使用的名词。 在WordPress 主题教程 #1:介绍中,我们已经学过了 WordPress 的两条基本规 则和术语,而这篇将会深入讲解模板文件,模板,以及每个页面的结构。 4 WordPress 博客的每个页面是由多个模板文件组成的,下面是首页的例子: 在上图中,我们可以看出主题的 index.php 是由 4 个模板文件组成: header.php,index.php,sidebar.php 和 footer.php。 Header 模板文件: 通常在这个文件中包含博客的标题(title)和描述(description)。而且它们 通常在整个博客中都是一样的。 Index 模板文件: 这个模板文件包含你的日志的标题,日志的内容(就是每篇日志的文本和图片) 和日志的元数据 (元数据是每篇日志的额外信息,如作者是谁,日志发布的时 间,在哪个分类下,有多少留言等等)。 5 Sidebar 模板文件 这个模板文件主要用于控制博客的页面列表,类别列表,存档列表,友情链接列 表和其他一些列表。 6 Footer 模板文件: 像 header.php 模板文件一样,footer.php 通常不会因为页面的改变而改变, 你可以在这里放置任何东西,但是通常是版权信息。 现在让我解释为什么把上面图片中的 index.php 所在的区域标为红色的。引文 这块区域是会根据不同类型的页面而发生变化。 如果你在单一日志页面,这时候页面将会包含这四个模板文件:header.php, single.php,sidebar.php 和 footer。 7 #3:开始 Index.php  第 1 步:打开 XAMPP 控制面板。  第 2 步:创建你的主题文件夹。  第 3 步:创建 index.php 和 style.css 文件。  第 4 步:创建 style.css。  第 5 步:安装你的主题。 开始 Index.php 是从零开始创建 WordPress 主题系列教程的第三篇。在介绍了 WordPress 主题的一些规则和术语,以及对 WordPress 模板和模板文件了解之 后,现在是开始动手创建 WordPress 主题了的时候。 在这篇中,你将要着手开始写 WordPress 代码。这里建议在本地电脑上安装 WordPress,而不是安装到服务器上,因为本地更方便测试。 第 1 步:打开 XAMPP 控制面板。 8 在 XAMPP 文件夹(通常是:C:\xampp),双击 xampp-control.exe 将会弹出一 个新的窗口。单击 Apache 和 MySQL 的启动按钮。如下图所示: 启动之后你看最小化窗口了。 第 2 步:创建你的主题文件夹。 转到你本地安装的 WordPress 主题文件夹,应该在 xampp/htdocs/wordpress/wp-content/themes。创建一个新的文件夹,命名为 tutorial。 第 3 步:创建 index.php 和 style.css 文件。 打开记事本或者你选择的文本编辑器,把 index.txt 这个文件中的所有内容都 拷贝到你的记事本。保存为 index.php。 9 打开另外一个记事本,直接保存为 style.css 到相同的文件夹下. 现在有两个文件了: index.php 和 style.css. index.php 解释: 点击上面的图片查看大图。我会向你解释每个红色圆圈区域是什么意思。 Doctype – 指明你用哪种类型的代码来编码你的主题。这里你暂时还不用管它 的详细意思。 是网页开始的地方。 是你的网页头部开始的地方。每个网页都有一个头部和主体。 是 头部结束的地方。 是一个 PHP 函数,它能取得 style.css 文件所在的路径,这样主题就能使用 style.css 样式化页面上所有 元素。任何时候,PHP 代码都是在 之间的。PHP 代码和 HTML 的 10 代码是不一样的,在 PHP 中, 是结束 PHP 代 码。 所以:  – 结束 PHP 代码 – 这是网页主体开始的地方。你能在网页上看到和读到的东西就是主体 部分。你正在阅读的这个教程说明你在正在看当前这个网页的主体部分。 是网页主体结束的地方。 是网页结束的地方,没有东西在它的后面了。 第 4 步:创建 style.css。 把 style.txt 中所有的代码拷贝到你的 style.css 文件中。保存和关闭它。 第 5 步:安装你的主题。 打开浏览器。在地址栏输入输入 http://localhost/wordpress/wp-login.php。 登录到你的 WordPress 管理后台。(这里能够看到 WordPress 登录页面是因为 你在第 1 步的时候启动了 Xampp。否者的话,在这里你的浏览器会报找不到的错 误。) 在管理界面下到 外观 (Apperance) 菜单并激活名为 Tutorial 的主题。 11 注意,你的主题文件没有屏幕缩略图,所以是空白的。一旦激活了,WordPress 就 会告诉你激活信息。 现在打开一个新的浏览器或者标签页(如果你的浏览器支持标签页浏览)并在地 址栏输入 http://localhost/wordpress。你应该得到一个空白页面,恩,完全 空白的页面。如果不是,那你就是在错误的页面上了。 你的主题已经创建好了,这就是这个课程,下一步我们将讨论主题头部模板。 不要忘记关闭 Xampp。双击它在任务栏中小图标,点击 Apache 和 MySQL 的停 止按钮,然后点击推出。 12 #4a:Header 模板  第 1 步:打开 XAMPP 和主题文件夹。  第 2 步:打开 index.php  第 3 步:调用博客标题  第 4 步:调用博客链接 Header 模板是从零开始创建 WordPress 主题系列教程的第四篇。前面我向你讲 解了如何安装和启动 XAMPP,安装 WordPress 主题以及介绍了 PHP 语言的最基 本语言,这篇我们将继续 PHP 并学习如何调用博客的标题和链接。 尽量输入所有代码而不是直接拷贝我给你的代码,这样可以让你尽量记住你所学 到的的。 第 1 步:打开 XAMPP 和主题文件夹。 打开 Xampp,然后打开上次创建的主题文件夹, xampp/htdocs/wordpress/wp-content/themes/tutorial。我们应该看到上次创 建的两个文件:index.php 和 style.css。 index.php 和 style.css 文件的内容应该和index.txt 和 style.txt 一致。 第 2 步:打开 index.php 打开浏览器,转到 http://localhost/wordpress。因为上次安装了一个空白的 主题,这时我们应该看到一个空白的页面。 返回主题文件夹并打开 index.php 文件。 到目前为止,我们已经打开了主题文件夹,浏览器和 index.php 文件。 第 3 步:调用博客标题 编辑 index.php 文件。在 和 这两个标签之间输入 ,然后保存它。 13 返回到浏览器并刷新。这时候我们应该能够看到博客的标题。博客的标题是 Demo Theme Development。 刚才发生什么了? 我们在网页的主体 (body) 之间加入了一行 PHP 代码到 index.php。bloginfo() 是调用博客的信息的函数。其中参数 name 代表了它调用的是博客的标题。这个 名字是在 option 页面中设置的 Weblog Title。 – 结束 PHP 代码 14 每次我们在 index.php 文件中增加或者更改任何东西之后,都可以保存,然后 刷新页面去查看结果。 第 4 步:调用博客链接 调用了博客的标题之后,接下来就要把博客的标题放入超链接中,这时候需要一 个 XHTML 标签。 返回 index.php 文件。 在同一行增加 。此时新行的代码应该是: 返回到浏览器,刷新,然后就可以看到博客的标题变成了链接。 现在它是一个链接,但是它没有链接到哪里。因为这个是博客的标题,我们应该 让它链接到首页。为此,在 href=后的双引号中输入 保存,现在的代码应该是: ”> 返回到浏览器,刷新,当鼠标在链接上面的时候,浏览器的状态栏应该显示 http://localhost/wordpress 现在点击这个链接,它就会让我们返回首页。可能现在看到还是是相同的页面, 但是用 # 或者 http://localhost/wordpress 作为链接地址是完全不一样的。 在接下来的课程我们会学到到他们之间的不同。 刚才发生什么了? 我们把网站名字变成了链接,并使它链接到博客的主页。 15 16 bloginfo(‘url’) – 调用博客基本信息,具体是首页的的地址或者 URL – 是一个用于添加链接的 XHTML 标签 – 链接的结束标签。否则网页将不知道哪里结束链接,这样会使得页面接 下来的内容全部都变成链接。还记得规则 #1 吗?正确关闭打开的所有标签。 href=”" – 超文本的简写。在引号之间就是它的值。 最终代码为: ”> 意思为:开始一个链接,链接的地址是博客的 URL,用 PHP 函数 bloginfo(‘url’) 去调用这个地址或者 URL。这个链接的文本是博客的标题并使用 PHP 函数 bloginfo(‘name’) 去调用博客的标题。最后结束链接。 这篇主要介绍了 WordPress 主题的 XHTML 代码,下一篇我们将继续 Header 模 板。 #4b:Header 模板 2  第 1 步:开启 XAMPP 和打开 index.php  第 2 步:给博客的标题添加 H1 的标签  第 3 步:添加博客描述  第 4 步:DIV 标签  第 5 步:添加 Header DIV 标签 Header 模板 2 是从零开始创建 WordPress 主题教程系列教程的第四篇第二部 分。最后说一次,开始之前务必先读下前面的日志。这篇会完成 Herder 模板, 并且开始介绍 DIV Box 模型。 第 1 步:开启 XAMPP 和打开 index.php - 启动 Xampp - 打开 Tutorial 的主题文件夹 - 打开浏览器,在地址栏输入 http://localhost/wordpress - 返回主题文件夹,用记事本打开 index.php 第 2 步:给博客的标题添加 H1 的标签 现在,index.php 的代码是: ”> 17 给它添加

标签。H1 标签意思是标题一。HTML 一共可以有 7 级 标题:H1,H2,H3,H4,H5,H6。按照默认,H1 是字体最大而 H6 是则最小。 添加之后的的 index.php 文件是:

”>

保存,返回浏览器并刷新。 第 3 步:添加博客描述 调用博客的描述,则在博客标题链接的下面输入以下代码: 。 现在变成了:

”>

保存并刷新浏览器,可以看到在博客标题链接的下面出现博客的描述,我们可以 到 WordPress 管理后下修改博客的描述。 结束 PHP 代码 第 4 步:DIV 标签 这步将介绍一个新的标签 — DIV。 给以上代码添加
标签: 保存,刷新浏览器,应该看到没有任何变化 可以把 DIV 想像成一个无形的盒子 (box)。在这里它把博客标题链接和博客描 述从其他东西中区分开。如果没有对它进行样式化,它无非是单独的内容,以后 18 我们可以会用 style.css 这个文件去样式化这个无形的盒子。我们可以给 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”主题文件夹,浏览器,并且在浏览器中转到 http://localhost/wordpress,最后打开 index.php 文件。 下面应该是这时候 index.php 文件中的内容: 记住,为了学习这些代码,请尽量手工输入而不是拷贝和粘贴。 第 1 步:创建 container Div 在 header DIV 标签下添加一个 DIV 标签,并给它的 ID 赋值为 “container”, 如下:
“container” 这个 DIV 标签是用把博客的主要内容和其他东西都区分开,比 如 sidebar 和 footer 等。 第 2 步:输入主循环代码 在 Container 的 DIV 标签中添加如下代码: 19 这段代码就是 WordPress 中的主循环(The Loop)。在详细解释这些代码作用 之前,我们来看下现在 index.php 所包含的代码: 你可能已经注意到 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(); ?> 的后面和 的前面输入 保存 index.php 文件并刷新浏览器,这时候应该看到在博客描述的下方出现 Hello World ,默认安装 WordPress 之后,博客只有一篇日志。而我的测试的 博客有多篇日志,所以这里有多个日志标题,而且因为我所用的日志标题是一样 的,我也没有进行组织整理他们,所以它们看起来像很长的一行 Hello World。 第 4 步:给日志标题加上链接 21 把日志标题转变成日志标题链接。还记得怎样吧博客的标题转变成一个链接的? 在 两边增加 。 保存并刷新你的浏览器。现在日志的标题都变成了链接了,但是它们并没有指向 哪里。为了使得每个标题都能指向正确的日志,我们需要把 # 替换为 the_permalink()。 “> the_permalink() 是用来调用每篇日志地址的 PHP 函数。保存并刷新浏览器。 如果只有一个 Hello World 标题,把鼠标移到链接上面,观察你的浏览器底部 的状态栏,他不再是 http://localhost/wordpress/#。 如果有不止一个的标题链接,我们将看到每个链接会链到不同的日志或者网页。 但是我们的日志标题依然在同一行上面。为了分开它们,在日志标题链接代码的 两边添加

标签。

”>

记住 H1 用作你的博客的标题,那是网页的标题。H2 被用作子标题。现在你的 日志标题链接是子标题了,每一个都是一行。保存 index.php 文件并刷新浏览 器,结果如下: WordPress 主循环就介绍到这里,现在 index.php 文件内容应该是: 22 #5b:日志内容  第 1 步:使用 the_content() 函数显示日志内容  第 2 步:DIV 标签把博客日志的内容和标题区分开 日志内容是从零开始创建 WordPress 主题系列教程第五篇的第二部分,在这篇 中,我们将展示如果显示博客日志的内容,并且使用一个 DIV 标签把博客日志 的内容和日志的标题区分开。再次强调一次,上一篇关于 WordPress 主循环介 绍的课程非常重要,你需要彻底明白之后才能继续学习。 下面开始这篇课程。首先还是打开 XAMPP,“tutorial”主题文件夹,浏览器并 在浏览器地址栏输入:http://localhost/wordpress,最后打开 index.php。 第 1 步:使用 the_content() 函数显示日志内容 在日志标题代码下面输入:。 23 保存并刷新浏览器,现在在日志标题下面看到了一些文本: 刚才发生什么了? 我们使用了 PHP 函数 the_content() 调用了 日志的内容。现在,日志的内容 只是一长行的文本,一直到窗口的右边,因为我们还没有样式化它。还记得最开 始说到的 style.css 这个文件吗?我们以后用它来控制所有页面元素的显示和 布局。 我们在 WordPress 后台输入多篇多篇测试日志,就可以看到多篇日志一起被显 示的样子: 24 返回浏览器,点击”查看”选择“页面源代码”,就会弹出一个源代码窗口,如 果你使用的是 Internet Explorer,那么弹出的是记事本。 我使用的是 Firefox 浏览器,下面是在 FireFox 中显示的样子: 25 你注意到 index.php 文件和它的源代码之间的区别了吗?所有的文本,图像和 其他东西等所有上图展示的东西都是通过 the_content() 这个函数调用来的。 是不是很有用?注意这些代码是不依赖具体的 WordPress 主题,我们应该自己 的这些文本和图片进行编码和样式化。 还有,有没有注意到我圈出的开启和关闭的 P 标签。他们都没有在 index.php 文 件中出现,但是他们在源代码中出现了。 P 标签,为什么和如何使用? 为什么 – 当我们输入日志的时候,每次跳过一行就是一个段落,这个时候需要 一个方法去展示?我们可以通过 P (段落,paragraph)标签,每个段落会在 P 标签之间,这就是为什么段落之间有行距的原因, 如何使用 – 非常容易,WordPress 模板系统会自动帮我们产生 P 标签。 第 2 步:DIV 标签把博客日志的内容和标题区分开 给 the_content() 两边添加 DIV 标签并给该 DIV 标签附上 class=”entry” 属性,如下:
你现在的 index.php 文件应该是: 26 保存并刷新浏览器,我们再次去查看源代码的话,就会发现每篇日志内容在 class=”entry” 的 DIV 标签中。 这样我们就很容易知道日志标题在哪里结束和日志内容在哪里开始,这样做也是 以后使用 style.css 文件对它进行样式化做准备,通过 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 现在你的 index.php 文件为: 这个是经过缩进整理后的版本: 一般我们使用 tab 健而不是空格键产生缩进的。为什么进行要对代码进行缩进 呢?实际上的代码不像我上面的屏幕截图一样有红色或者绿色的高亮显示,我们 需要有个能够跟踪代码的方法,通过缩进就能更容易知道哪个
是结束哪 个
。 保存并刷新浏览器,然后查看源代码中的代码。 为什么你要添加另外一个 DIV 标签去围住日志标题和日志内容? 增加这个 DIV class=”entry” 去把日志标题和日志内容区分开。而这个 div class=”post”是把当前日志和其他内容区分开。 28 #5c:日志元数据 日志元数据是从零开始创建 WordPress 主题系列教程的五篇的第三部分,今天 我们将开始讲解日志的元数据(Postmetadata):日期(date),分类(categories), 作者(author),评论数(number of comments),以及其他和日志有关系的 信息。 批注 [雨林木风1]: 11-10 同样请打开 XAMPP,主题文件夹,浏览器以及 index.php 文件。 先让我们复习下,现在的 index.php 文件应该有下面这些代码了: 29 把 postmetadata.txt 中的代码: 复制到 下面。(注意:在这部分,我们只需要复制 和粘贴。当我制作 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 32 – 和 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 在 的下面输入以下代码:

大致如下: 保存刷新浏览器,但是应该注意到没有任何变化。我们返回教程 #5 — 主循环, 去解释你刚才上面输入的是什么? 这里就是主循环的部分代码: 第一,if(have_posts()) 检查博客是否有日志, 第二,while(have_posts()) 执行 the_post() 去调用日志。而 Else 是当博 客完全没有日志的时候执行的。 while() 和 endwhile; 应该嵌套在 if() 和 else :之间。 所以 应该在 之后。 现在你知道什么是 else 了吧,当没有任何日志或者当找不到任何日志的时候, 告诉 WordPress 怎么处理,让 WordPress 显示错误信息 Not Found,或者其他 任何你想要的东西。我们可以下载任一款免费主题,看一下它的 index.php 文 件怎么写的。 在上面的例子中,Not Found 错误信息是在 之中。如我上一 篇所说,这不是必需的,只是为了让主题可翻译。 整个信息和代码 Not Found 外面有

。这个同样也不是必需的。 你可以简单使用:
Not Found
33 但是,给这个错误信息使用上

(子标题)标签能够使它更明显,让访问者 注意到这个页面上没有任何东西。 那么
用来做什么的呢?恩,我们肯定不想你 的错误信息在“茫茫蛮荒之地”之间滞留,对不?我们用
标签围住每篇日志。所以同样,尽管是错误信息不是真正的日志内 容,但是我们其实可以把它当作日志来处理。 第 2 步:日志 ID 增加 id=”post-” 到
保存并刷新浏览器。然后 查看 > 页面源代码。现在我们会发现现在每篇日志都 附加上了一个数字或者说是日志 ID。the_ID() 只是调用每篇日志的 ID。 为什么使用它呢?这是用来定制个别的日志的面貌。后面,当你使用 style.css 文件去告诉你的主题日志将看起像怎么样。如果通过给每篇日志附加唯一的 ID, 你就可以针对单独的一篇日志进行样式化,使得它和其他日志看起来不一样。如 果没有 ID,你将没有办法通过 style.css 文件使它和其他日志不一样。 同时把 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 返回页面。把鼠标移到任何一篇日志标题的链接上,描述信息将会弹出,这就是 刚刚增加的。增加描述到链接是非常有用的,当你其他站点需要扫描你的博客的 时候,如 Technorati.com,每次你发表日志的时候,WordPress 通知 Technorati 和其他网站你的博客已经更新了。Technorati 然后就会来到你的博客,扫描它, 并索引得到一个你日志的摘要,这其中会包括你链接标题的描述。 博客 » WordPress » WordPress 主题教程 #5e:日志导航链接 #5e:日志导航链接 日志导航链接是从零开始创建 WordPress 主题系列教程的第五篇的第五部,在 绝大多数的 WordPress 博客的底部,都会有 下一页 (Next Page) 或者 上一页 (Previous Page) 这样的导航链接。我们可以通过 WordPress 的模板系统中的 posts_nav_link() 这个函数调用这些链接。 在 之间添加如下代码:
– 开始一个名为 navigation 的 DIV 标签。 – 结束 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 在开始侧边栏之前,这是现在 index.php 文件的样子。 第 1 步:创建 id 为 “sidebar” 的 DIV 首先让我们创建一个名字为 sidebar 的 DIV,这样可以把侧边栏中的所有东西 都放入其中。在 container 的后面和 标签的前面输入以下代码:
第 2 步:给侧边栏的 DIV 添加无序列表 在新的 sidebar 的 DIV 标签中创建一个新的无序列表。
    – 开始无序列表
– 结束无序列表 第 3 步:给这个无序列表添加原属 增加一个列表元素(LI)到无序列表(UL)的中间并把一个子标题添加到这个列 表中。
  • 37 注意添加制表符到
  • 标签之前为了代码缩进。
  • – 开始列表元素

    – 开始子标题 – 输出字符 Categories

    – 结束子标题
  • – 结束列表条目 保存 index.php 文件并刷新浏览器。现在应该可以看到 Categories 子标题结 构应该这样: 子标题前面的小圆点指明这个子标题是在一个列表元素中(LI)。如果无序列表 (UL)有两个列表元素,那么将有两个小点。 第 4 步:添加分类链接列表 在列表条目中添加下面代码:
    38 这里是上面代码的解释:
      – 开始另一个无序列表 – 调用分类链接列表
    – 结束无序列表 保存并刷新浏览器。下面是分类链接列表的样子: 默认的分类是 Uncategorized。如果你没有把日志发布到多个分类下面,那么你 的列表链接列表应该是只有一个链接 Uncategorized。 更进一步的解释:  sort_column=name – 把分类按字符顺序排列  optioncount=1 – 显示每个分类含有的日志数  hierarchial=0 – 不按照层式结构显示子分类,这就解释了为什么子分 类链接是列在列表中第一级。  & – 每次增加另一个参数的时候,需在它之前要输入 & 用来把和现有的 参数区分开。如 & 在 sort_column 和 optioncount 之间。 为什么不把 放入
  • 标签中呢? 当我们使用 wp_list_cats() 这个函数调用链接列表函数的时候,它会自动附上 一组
  • (列表条目)标签在每个链接的左右。查看页面源代码;可 以看到每个连接的周围都已经有一组列表元素的标签。 当处理侧边栏,无序列表和列表元素的时候,我们一定记得规则 #1:按顺序关 闭所有标签。 39 #6b:页面链接列表 批注 [雨林木风2]: 11-12 页面链接列表是从零开始创建 WordPress 主题系列教程的第六篇的第二部分, 通过上一篇的学习,现在已经熟悉了侧边栏的结构,接下来我们将继续修改侧边 栏,完成页面链接(Page-link)列表。当完成常规的侧边栏之后,我们将学习 如何窗体化(widgetize)侧边栏。 在分类链接上面添加以下代码: 保存并刷新浏览器。效果如下所示: 在默认情况下只有一个页面链接,就是 About 链接。我在我的本地的博客增加 了很多多页面和子页面,这样我就有四级页面链接。 查看页面源代码,我们可以看到 wp_list_pages() 产生的完整结构以及代码, 如下: 40 第一,它把所有东西放入列表元素标签(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 作为它的值,这样就按月调用存档链接列表。 
  • – 开始列表元素 

    – 开始子标题  – 子标题文本 

    – 结束子标题 
      – 开始在存档链接这个无序列表  – 按月调用存档列表 链接,并把每个链接放入
    • 标签中。如果查看源代码,我 43 
    – 结束在子标题下的无序列表 
  • – 结束列表元素 第 2 步:增加友情链接列表 在存档链接列表下输入以下代码: 保存并刷新,结果如下: 默认情况下,我的 blogroll 和你的是没有什么不同,这里是它在源代码中的样 子: 44 上面的代码完全没有正确的被缩进,因为它们是由函数 get_links_list() 产生 的,就像上一篇所学的函数 wp_list_pages() 产生的代码一样,但是它遵循规 则 #1,按正确顺序关闭所有的东西。我已经圈出了元素和无序列表的标签让你 看得更明显。 #6d:搜索框和日历  第 1 步:增加搜索框  第 2 步:增加日历  第 3 步:增加元数据 搜索框和日历是从零开始创建 WordPress 主题系列教程的第六篇的第四部分, 尽管这篇的题目是 搜索框(Search Form) 和 日历(Calendar),但是我同 样也会介绍 元数据(Meta) 。这一篇我们会结束常规的侧边栏,然后将在下一 篇将介绍如何窗体化(widgetize)化侧边栏。 第 1 步:增加搜索框 创建一个新文件,然后把该空白文件保存为 searchform.php(当然是和 index.php 在同一个文件夹下)。把 searchform.txt 中的内容拷贝到 searchform.php。 在 index.php 文件,在侧边栏的最顶部输入以下代码:
  • 45 保存并刷新浏览器,结果如下: 刚才发什么了呢? 
  • – 开始一个名字为 search 的列表元素,给它一个 ID,这样就能够以后样式化它。 46  include() – 导入任何你想导入的文件。这和使用 WordPress 模板函数 去调用模板文件是不同的,因为 include() 只是简单导入已经存在的文 件。这里是调用在 searhform.php 文件中的代码。被导入的信息应该在 一个博客上基本不会被改变的。  TEMPLATEPATH – 主题文件夹的位置,这里是: wp-content/themes/tutorial  ‘/searchform.php’ – 文件名:/searchform.php  在 TEMPLATEPATH 和 “/searchform.php” 中间的点把它们连接起来, 所以最终得到: wp-content/themes/tutorial/searchform.php 
  • – 结束列表元素 注意,搜索框不像分类,归档,页面或者 Blogroll 一样有子标题。当然如果你 愿意,也可以给它一个子标题。 第 2 步:增加日历 在搜索框或者页面链接列表下面输入以下代码:
  • 保存并刷新浏览器,结果如下: 47 发生了什么? 
  • – 开始一个 ID 为 “Calendar” 的列表元素 

    – 开始一个子标题  – 输出 Calendar 这个词 

    – 关闭子标题  get_calendar() – 使用 get_calendar() 这个 WP 函数调用日历 
  • – 结束列表元素 这样日历就完成了 第 3 步:增加元数据 在 get_links_list() 函数下输入以下代码:
  • 48 保存并刷新浏览器,结果如下: (如果你没有登录 WordPress) (如果你已经登录) 那么这是怎么回事呢? 你开始一个列表元素(LI),跟着是一个子标题(H2) Meta。在子标题下,嵌 入了一个无序列表(UL)。最后把每个链接都放入了列表元素中(LI)。 wp_register() 这个函数能产生一组
  • 标签,如果你没有登陆, 它显示注册(Register)链接,如果登录了,它显示的是 站点管理(Site Admin) 的链接。 wp_loginout() 不会产生列表元素标签,所以需要我们手工输入列表元素标签, 当你没有登录的时候,得到的是 登录(Login) 的链接,当已经登录的时候, 得到的是登出(Logout)链接。 到目前为止,wp_meta() 没有做任何事情,他在网页上和源代码中都不会产生东 西,现在不要考虑 wp_meta(),实际上你已经在使用它了。 到此为止,我们已经完成 Meta 并最终完成了常规的侧边栏。 #6e:窗体化侧边栏 49  第 1 步:创建 functions.php 文件  第 2 步:窗体化侧边栏 窗体化侧边栏是从零开始创建 WordPress 主题系列教程的第六篇的第五部分, 一个支持 Widget 的侧边栏或者说是窗体化(widgetized)的侧边栏几乎是 WordPress 主题的标准。 首先,什么是窗体化(widgetizing)呢?简单的说,窗体化就是能够通过拖拉 就能够整理侧边栏的模块。比如我们需要更改分类和存档的位置,只需要简单把 分类和存档列表拖到它们的位置即可,根本不用去修改侧边栏的代码。 第 1 步:创建 functions.php 文件 打开记事本,然后把空白文件保存为 functions.php。把 functions.txt 文件 中所有的内容拷贝到 functions.php 中。 回顾一下,现在在“tutorial”主题文件夹下应该有 4 个文件。 第 2 步:窗体化侧边栏 直接在侧边栏的第一个
      标签输入以下代码: 50 直接在
    标签之前输入以下代码: 保存 index.php 文件,然后我们到 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 并修改 style.css 文件之前,我们需要学习如何验证代码,简单说,验证 (Validate/Validating/Validation)就是检查下代码有没有错误,而验证又分 52 为:XHTML Validator 和 CSS Validator。这篇我们学到 XHTML 验证器。 首先打开 Xampp Control 和浏览器,并进入 http://localhost/wordpress。 然后查看 > 页面源代码。 全选并所有的源代码。 然后到 XHTML Validator。 把刚才复制的源代码粘贴到 Validate by Direct Input 框中。 点击 Check 之后,验证器会就会检查代码,然后把检测结果反馈给我们。如果 反馈回来的结果是绿色的,那么代码没有错误。 如果有错误,则根据其提示进行修改。 #9:Style.css 和 CSS 介绍  第 1 步:打开 style.css 文件  第 2 步:添加 CSS 代码 Style.css 和 CSS 介绍是从零开始创建 WordPress 主题系列教程的第九篇,学 习 CSS 最好的方法就是去使用它,不像 XHTML 和 PHP 需要接触模板的核心文 件,同样不要需要理解任何基本概念,只要去用它,通过试用和修正错误是可以 让你快速学会。 我们现在已经在 style.css 文件有些内容,让我们先来看看这部分内容是干什 么的? 53  第一行显而易见就是主题的名字。  第二行是这个主题的地址,如果你的主题只是私用的而不准备发布的话, 那就不用管它了。  第三行是主题的描述。  第四行是版本号,这是非常重要的,特别是当你公开发布你主题新版本的 时候。  第五和第六行分别是主题作者的名字和主页。 在主题信息两边的 /* 和 */ 符号是为了让主题的信息不影响该文件的其他内 容,这是 CSS 的注释。当输入 CSS 代码去样式化你的网页的时候,你可能想在 这里增加些注释使得能够在以后更清楚知道这部分是干什么的。显然我们并不想 你的注释影响实际的代码,所以可以使用 /* 和 */ 这一对符号使得注释不被解 释。 下面是处理后的主题信息 第 1 步:打开 style.css 文件 54  打开 Xampp,主题文件夹,FireFox,IE 浏览器和 style.css 文件。  在两个浏览器的地址栏都输入:http://localhost/wordpress 从这里开始,我们需要同时在 FireFox 和 IE 上测试主题,不同的浏览器对 CSS 的代码解释是不同的。如果能够在尽可能多的浏览器器上和尽可能多的操作系统 上测试你的主题是最好的(Safari,Opera,Linux,Netscape 等等)。如果你 和我一样懒,那就只在 FireFox 和 IE 上测试你的主题吧。 第 2 步:添加 CSS 代码 在 style.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 一样,通过制表符增加缩进来组织代码: 保存 style.css 文件并刷新 两个浏览器 Firefox 和 Internet Explorer 查 看变化。 55 把 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;,下面是没有页边空白的相同页面: ont-family: Arial, Helvetica, Georgia, Sans- 站选择使用哪种字体。这些字体中的第一个,Arial 是 f serif; 为你的网页或者网 可替换的,如果你的用户 56 57 改小以查看变化。 看不同之处。 : top; 使得所有的东西从上面开始。如果是中部或底部排行你 的 body 标签,所有东西将会向下推。 #ffffff 是白色十六进制代码。 #000000 是黑色十六进制代码。 是黑色。 好的地方是 w3schools.com 没有在他们的电脑上安装 Arial 这种字体,style.css 文件就会寻找 Helvetica,然后是 Georgia,再接着是 Sans-serif。你可以在字体文件夹(我 的电脑 > 系统盘 > Windows 下面)找到你的字体列表。 font-size: 12px; 显而易见是字体大小。可以把它改大或 text-align: left; 让你的文本向左对齐。把它改成 text-align: right; 去查 vertical-align background: #ffffff; 意思是白色背景。 color: #000000; 意思是文本颜色 如果你想向前更进一步或者自己学习 CSS,最 #10:十六进制颜色代码和样式化链接  十六进制代码  第 1 步:添加链接颜色 悬停颜色 第 2 步:添加链接 开始创建 WordPress 主题系列教程十六进制颜色代码和样式化链接是从零 的第 十篇。这篇继续昨天介绍 CSS 的课程,我们今天将介绍如何着色和十六进制颜 色属性,跟着的是一个十六进制代码,是用于给文本上色。如 body { color: #000000;} 意思是你页面 body 内所有文本将是黑色的。 色。如 body{ background: #ffffff; } 意思是为 body 上白色背景。 进制代码前都有 # 号,然后跟着六位数字。这些数字的范围是 从 #ffffff(白色)到 #000000(黑色)。 444, #333333, #222222, 。#550000 是暗红色(dark red)。 #220000 是更黑色的红 色(darker red)。 #00ff00 是绿色(green)。 #0000ff 是蓝色(blue)。 色代码。 颜 背景颜色属性,跟着的是一个十六进制代码,是给除背景上 十六进制代码  每个十六  #ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444 #111111  前两位表示红色,第三和第四代表绿色,而最后两位代表蓝色。#ff0000 是 红色(red) 那么哪个十六进制代码是黄色呢? #ffff00 就是黄色(yellow)。 #ff00ff 是紫色(violet)。 第 1 步:添加链接颜色 58 在 body{ } 选择器下输入以下代码: a:link, a:visited{ color: #336699; text-decoration: underline; }  这些代码是干吗用的?,给所有的链接都加上下划线的(text-decoration: underline;)和上了蓝色(c or: #336699;)。这是不是纯正的蓝色, 但它确实是蓝色是因为最后两个数字(代表蓝色)是最高值的数字。 a:visited{ -decoration: underline; color: #336699;  visited 这两个选择器应用相同的 text-decoration: rline; 和 color: #336699; 这两个属性的时候。可以把它么你放在 一起,使用逗号来区分。 ol  a:link 用于样式化链接。当你想把一个词转变为链接的时候,用什么实 现呢?使用
    这对标签,因此样式化链接就是样式化 a:link。  a:visited 用于样式化已经访问过的链接。  另外一种输入方式: a:link{ text-decoration: underline; color: #336699; } 和 text } 当给 a: link 和 a: unde 第 2 步:添加链接悬停颜色 批注 [雨林木风3]: 11-14 在 a:link, a:visited{ } 下输入以下代码: 59 text-decoration: none; 干吗用的呀? 当把指针移到链接上面时候下划线消失。 不想在默认情况下有下划线而是在当把指针移到链接上面的时候才出现下 划线,那么就在 a:link 和 a:hover 之间交换下 text-decoration: 的值。 如果你想更改你链接悬停时的颜色,那么就增加 color: 和任何你想要的十六进 a:hover{ ; }  第 1 步:设置页面总体宽度 a:hover{ } 这些代码是 如果 制代码,如: text-decoration: none; color: #ff0000 #11:宽度和布局  第 2 步:自动页面居中 度和布局 第 3 步:设置 header 宽  第 4 步:设置 Container 宽度和布局 布局 第 5 步:设置 Sidebar 宽度和 布局 第 6 步:设置 Footer 的宽度和  第 7 步:给侧边栏增加其余的 10 像素 页边距 bug 第 8 步(额外的步骤):修正 IE 的双倍 列教程宽度和布局是从零开始创建 WordPress 主题系 的第十一篇,这篇将介绍 展示如何让主题显示正确,并 第 1 步:设置页面总体宽度 使用 750px;主题的大小取决于 博客绝大多数访问者的屏幕分辨率。需要避免的是使用过大宽度的 的主题,如 00px × 600px 的屏幕,这样的话,如果是使用 900px 宽的主题将会有 100 多像素超出他们的屏幕,显然这是对用户很不友好 如何设置每个 DIV 的宽度和布局排版,并且也会 同时在 Firefox 和 IE 下兼容,显示一致。 在我们开始之前,打开 Xampp Control,主题文件夹,Firefox 浏览器,IE 浏 览器,index.php 和 style.css 这两个文件。 现在我们首先要确定的是主题的总体宽度。我们 果博客的读者都大多数使用 8 的。 不管怎样,我们怎么样把主题的总体宽度设置为 750px 呢? 60 个 750px 的 DIV 标签中。 在 style.css 文件中输入以下代码: margin: 0 auto 0 auto; text-align: left; 定位页面中的元素,而点号是通过 class 来定位页 你的代码是
    ,那么就应该用 .wrapper 位 wrapper 这个 DIV 标签。 同时保存 index.php 和 style.css 文件。刷新 Firefox 和 IE 浏览器(按 F5) 下页边空白和自动左页面空白。从现在开始,记得设置左右 页边空白为自动将使得居中对齐。 750px; 显而易见是 750 像素。  text-align: left; 是让 wrapper DIV 中的文本向左对齐因为我们等下 为什么?(我假设你使用的是 Firefox 和 Internet Explorer 6)。你的布局 但对于使用早前版本的 IE 用户可能不正确。还记得设 置左边和右边的页边空白为自动是居中吗?但是这并不是对所有的 IE 都适用, IE 的 一种解决方案。 让 Header 浮到左边并且设置它的宽度为 750px: 我们需要把现在主题中的所有的东西(header,container,sidebar 和 footer) 放入一 在 之后增加:
    在 之前增加:
    #wrapper{ width: 750px; } 在 CSS,# 号是通过 id 来 面中的元素,如果 来替代 #wrapper 去定 查看所做的改动。 详细解释:  margin: 0 auto 0 auto; 意思是(注意顺序):0 上页边空白,自动右 页面空白,0  width: 要要将 body{ text-align: left;} 改成 text-align: center; 第 2 步:自动页面居中 把 body{} 中的 text-align: left; 改成 text-align: center;。 可能你看起来是正确的, 所以 body{ text-align: center; } 是让 wrapper DIV 居中在旧版本 (随便说一下,在 Firefox 和 IE 中文本大小是不同的,我们稍后解决。) 第 3 步:设置 header 宽度和布局 61 float: left; } ontainer 宽度和布局 Container 浮到左边并且宽度为 500px: float: left; } idebar 宽度和布局 Sidebar 浮到左边,宽度为 240px,并且给它灰色的背景: float: left; background: #eeeeee; background: #eeeeee; 是非常浅的灰色。我们给侧边栏增加 当增加剩下的 10 像素之后的不同之处。 第 6 步:设置 Footer 的宽度和布局 clear: both; width: 750px; er 的样式有什么区别呢?答案是 footer{} 中有 clear: 使得 Footer 不能和它上面的东西(如 Sidebar 或者 iner)连接起来。 #header{ width: 750px; 第 4 步:设置 C 让 #container{ width: 500px; 第 5 步:设置 S 让 .sidebar{ width: 240px; } #ffffff 是白色而 一个背景颜色只是去查看 让 Footer 浮到左边,左右两边都没有东西,并且宽度为:750px: #footer{ float: left; } Header 和 Foot both;。它在那儿 Conta 保存并刷新浏览器。 第 7 步:给侧边栏增加其余的 10 像素 给侧边栏增加其余的 10 像素的页边空白。现在侧边栏的 CSS 应该是: 批注 [雨林木风4]: 11-15 62 float: left; background: #eeeeee; 0 10px; 10 像素的空白增加到侧边栏的左边了。 gin: 0 0 0 10px; 具体的意思是:上边空白为 0,右边空白为 0,底部空白 为 0,左边空白为 10 像素。当大小为 0 的时候,px 单位不是必需的。 第 8 步(额外的步骤):修正 IE 的双倍页边距 bug 距就是 20 像素,20 像素的页边距可能会破坏布局并把侧边栏挤到页面的底部,因为一 之和为 760px 而不是 750px。为了解决这个问题,增加 display: inline; 到侧边栏。现在你的侧边 background: #eeeeee; 0 10px; e; } .sidebar{ width: 240px; margin: 0 0 } 保存并刷新浏览器去查看 mar Internet Explorer 有个双倍页边距的 bug,这样在 IE 下,我们的页面 个 20 像素的页边距使得 Container 和 Sidebar 的宽度 栏应该是: .sidebar{ float: left; width: 240px; margin: 0 0 display: inlin 这里是现在的 index 和 style 文件的内容。 项 #12:日志样式化和其他杂  第 1 步:Reset CSS  第 2 步:样式化 H1 标题  第 3 步:样式化日志  第 4 步:设置日志段落填充 项 第 5 步:样式化日志杂  第 6 步:样式化导航栏 日志样式化和其他杂项是从零开始创建 WordPress 主题系列教程的第十二篇, 需要 index.php, 这篇主要讲解如何样式日志,这篇不 打开 Xampp Control,theme 文件夹,Firefox,Internet Explorer 和 style.css 文件。 第 1 步:Reset CSS 63 在 style.css 文件中的 body{} 上面输入以下代码来处理大部分页边空白和填 : 0; padding: 0; 使用的是 margin: 0; 而不是 margin: 0 0 0 0;。因为所有的 值都是一样的话,只用一个数字就够了,对于填充的设置也是一样的。  保存,刷新 Firefox 和 IE。接下来我们可以增加空白和填充到需要的地 在 body{} 之后输入以下代码: h1{ if; font-size: 24px; ng: 0 0 10px 0; rgia, Sans-seriff; 把 H1 标题的字体从 Arial 改 成 Georgia。如果没有 Georgia,网页就会寻找 Sans-serif;  font-size: 24px; 我们在 body{} 中把字体设置为 12px,H1 和 H2 标 充: body, h1, h2, h3, h4, h5, h6, blockquote, p{ margin }  这里我们 方。 第 2 步:样式化 H1 标题 font-family: Georgia, Sans-ser paddi }  font-family: Geo 签是不会遵守的。这就是因为标题标签遵循他们自己的规则。为了控制他 们,我们需要特别的去样式化它们。  padding: 0 0 10px 0; 意思是 10 像素的底部填充。这是为了在博客的 标题和描述之间增加空间。 保存,刷新,结果如下: 第 后,保存并刷新 3 步:样式化日志 在 #container{}下面输入以下代码:(可以在输入每块代码之 去查看其中的变化。) 64 ; } 的 DIV 增加 10 像素的顶部和底部空白。) .post h2{ font-size: 18px; 的 CSS 规则。他是特别样式化在 class 名为 post 的 中的 H2 子标题。在侧边栏中的 H2 子标题就不受影响。) } 距。) 第 4 步:设置日志段落填充 在 a:hover{} 下输入以下代码: p{ } 0 像素的顶部填充。) 第 5 步:样式化日志杂项 在 .entry{} 下面输入: p.postmetadata{ cc; margin: 10px 0 0 0; 段落便签,给它增加一个灰色的边框和 10 像素顶部空 单独的 border,没有 -top,-right,-bottom 或者 -left 则意味着所 有的边框。如 border: 1px solid #ccc; 意思为所有的四边都有 1 像素的灰色 的边框。 .post{ padding: 10px 0 10px 0 (给每个 class 名字为 post font-family: Georgia, Sans-serif; } (.post h2 不是一般 DIV .entry{ line-height: 18px; (设置 entry DIV 中行 padding: 10px 0 0 0; (给每个段落标签增加 1 border-top: 1px solid #c } 对于 postmetadata 这个 白。 border-top 意思是仅仅顶部边框 border-left 意思是仅仅左边边框,等等。 如 果只是 65 第 6 步:样式化导航栏 在 p.postmetadata{} 下输入: .navigation{ font-size: 14px; line-height: 18px; Previous page 链接外面的的 navigation DIV 标签,我  增加了一个 10 像素的顶部填充。  把字体大小改成 14 像素。 把行高增加到 18 像素。  第 1 步:样式化侧边栏的无序列表 padding: 10px 0 0 0; font-weight: bold; } 对于 Next page 和 们  把字体改成粗体。  #13:样式化侧边栏  第 2 步:给 LI 添加填充  第 3 步:样式化侧边栏下的子标题 UL 下的 LI 填充 第 4 步:清除子  第 5 步(可选的):扩展日历宽度到整个侧边栏 Press 主题系列教程样式化侧边栏是从零开始创建 Word 的第十三篇,这篇主要 侧边栏样式化之后,这系列教程就 栏的无序列表 在 .sidebar{} 下输入: .sidebar ul{ margin: 0; } 讲解如何样式化侧边栏里面的所有元素,在对 将差不多结束了。 打开 XAMPP,主题文件夹,Firefox,IE 和 style.css 文件。 第 1 步:样式化侧边 list-style-type: none; padding: 0 10px 0 10px; 批注 [雨林木风5]: 11-16 66 栏样式化父级无序列表(UL)标签。所有的子 UL 或者内嵌的 UL 这里,它是无列表样式,零空白和 10 像素的填充。 现在已经为侧边 将会击继承同样的样式。在 如下所示: 第二级的(或内嵌的) UL 继承了第一级 UL 的样式。如果你给了第一级 UL 应 用了边框,第二级的 UL 同样也会有个边框。 保存并刷新就可以看到列表条目现在已经没有前面的圆点了。 注意下你是如何增加顶部和底部填充的。 2 步:给 LI 添加填充 第 在 .sidebar ul{} 下输入: padding: 10px 0 10px 0; .sidebar ul li{ } 这是现在的填充: 在进行这步之前,搜索框和日历之间以及日历和页面之间是没有空间,如何给这 些模块之间添加空间呢,我们需要给 .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 步(可选的):扩展日历宽度到整个侧边栏 执行这一步,如果你想让你的日历的数据能够扩展并覆盖整个侧边栏的宽度。当 前你的日历应该是这样的: 69 为了样式化日历,找出在里面的标签和这个便签的名字或者 id。 查看 > 页面 源代码或者源代码,侧边栏是在底部,所以到源代码的底部查找 Calendar。 现在我们知道日历是在一个 TABLE 标签中并以 wp-calendar 作为 id。那么如 何在 style.css 文件中锁定 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 步:header.php  第 4 步:在 index.php 中导入 header.php  第 4 步:sidebar.php  第 5 步:footer.php  教程回顾 底部和拆分 Index是从零开始创建 WordPress 主题系列教程的第十四篇,这篇 我们完成对主题的样式化和开始把 index.php 文件分成多个小文件。在这篇中, 首先要对 style.css 文件进行修改,然后把 index.php 分成一些新的文件。 打开 XAMPP,主题文件夹,Firefox,IE,index.php 和 style.css。 第 1 步:样式化 footer 给 footer DIV 增加 10px 顶部填充。你还记得如何增加填充?这次我不提供代 码。 第 2 步:设置 footer P 的行距 给 footer 里的所有的 P 标签 18px 行距。那是 #footer p{}.。(今天关于 CSS 的就这么多。) 第 3 步:header.php 71  创建一个新文件,把它命名为 header.php。  在 index.php 文件中,把 header DIV 及以上所有东西都拷贝到 header.php 文件中。 这是我的 header.php 文件。不要从我的这里拷贝,从你自己的 index.php 文 件拷贝。 第 4 步:在 index.php 中导入 header.php 为了使所有从 index.php 中拷出的内容依然在 index.php 文件中,输入以下代 码: 72 这是个 WordPress 主题系统特别用来导入 header.php 文件的函数,而不用使 用 PHP 的函数:. 保存并刷新浏览器,你应该看到没有变化。如果你的改变破坏了主题,那么肯定 有错误。 第 4 步:sidebar.php  和第 4 步一样,更多相同的事情。这次,创建 sidebar.php 文件。  把 index.php 文件中的 Sidebar DIV 从开始到结尾都复制到 sidebar.php 文件中。  那么,在 index.php 文件,将其取代为:.  保存并刷新浏览器,再一次,你应该看到没有变化。  这是我的 sidebar.php 文件。 第 5 步:footer.php  为 footer.php 重复上面的步骤。  这是我的 footer.php 文件。 教程回顾  创建了三个新文件:header.php,sidebar.php 和 footer.php。  使用了三个新的函数:get_header(),get_sidebar() 和 get_footer()。 73 74  下面是这节课结束之后的文件:index,style,header,sidebar,footer。 #15:子模板文件  第 1 步:archive.php  第 2 步:search.php  第 3 步:page.php 和 single.php  第 4 步:定制 page.php  第 5 步:定制 single.php  课程回顾 子模板文件是从零开始创建 WordPress 主题系列教程的第十五篇,这篇将和像 上一篇创建 header.php,sidebar.php 和 footer.php 这些模板文件一样创建 更多的子模板文件。 现在 index.php 文件已被拆分,这一切都变得更简单。 第 1 步:archive.php 在做这步之前,查看你的侧边栏,点击其中的一个存档链接,结果的页面是不是 和首页没有什么不同?  创建一个新文件:archive.php  把 index.php 中所有东西复制到 archive.php  保存 archive.php  在 archive.php 文件,把 the_content 改成 the_excerpt。  再次保存 archive.php 文件 通过创建一个 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 中的 下输入以下代码: Pages: ‘, ‘

    ’, ‘number’); ?> 和 ’, ‘

    ’); ?> 第二,从 page.php 中移除 postmetadata 代码。结果如下: 第三,在 page.php 中移除 posts_nav_link() 或者导航模块。 75 刚才发生了什么? 第一行代码是用于显示页面的分页链接。 举个例子,编辑 About 页面。根据我的屏幕截图增加代码: 当你想把一个非常长的页面分成几个页面的时候,这是非常有用的。 第二行代码是用于显示可以用来编辑静态页面的编辑链接。 76 77 通常页面是没有分类,并且通常不想给他们显示创建时间,所以需要去移除 postmetadata。同样要移除 posts_nav_link() 代码因为静态页面不会显示后一 页和前一页的链接。 保存 page.php 文件并关闭它。 第 5 步:定制 single.php 点击一个日志的标题去阅读日志其余部分就会带你到单篇日志查看模式。 single.php 模板就是用于处理查看单篇日志时的外观。 在 single.php 中的 下输入: Pages: ‘, ‘

    ’, ‘number’); ?> 是的,这是相同的用于编码页面的分页链接的代码。同样我们也可以把日志分成 多篇子日志。 第二,在 postmetadata 区域,移除 函数 和前面的
    标签。不要移除整个 postmetadata。 移除了留言链接函数是因为在单篇日志查看模式下留言链接函数是不起作用,所 以要在 singel.php 文件中移除它。只有管理员可见的编辑链接,在 BR 标签的 左边。你不想跳过一行才能看到这个本来你可以在右边看到链接?这就是移除 BR 标签的原因。 第三,用以下代码取代 在前面,存档,分类和搜索页面,我们使用 posts_nav_link() 函数去调用后一 页和前一页的链接。对于查看单一日志的页面,它是没有后一页和前一页链接的, 我们可以使用 previous_post_link() 和 next_post_link() 函数去调用前一 篇日志和后一篇日志的链接。 保存 single.php 文件,到某篇日志下查看在导航区域的不同。 课程回顾  创建了四个新的文件或者或者子模板:archive.php,search.php, page.php 和 single.php。  archive.php 和 search.php 模板文件是相同的。  Pages (和日志不同)是没有分类的,他们同样没有后一页和前一页的链 接。 78  Single.php 不会显示留言链接(被 comments_popup_link() 函数调用) 并且他不用 posts_nav_link() 去调用导航链接。 #16:留言模板  第 1 步:创建 comments.php  第 2 步:样式化留言  第 3 步:在 single.php 添加留言模板  第 4 步:验证代码  评论模板的进一步解释 这篇教程是在 WordPress 2.7 之前撰写的,而 WordPress 2.7 之后支持了 Thread Comments,这里有让你的主题实现 WordPress 2.7 的 Thread Comments 的方法。但是还是建议你查看下这篇教程。 留言模板是从零开始创建 WordPress 主题系列教程的最后一篇。这篇将涉及到 博客一个比较重要的东西;评论模板。 你应该知道:  没有快速的方式在 comments.php 建立评论模板  大部分的 WordPress 设计者使用来自 WordPress 默认主题(Kubrick) 的默认评论模板根据。  一些设计者会修改默认的评论模板去适合他们自己的需求。  你将使用我的对默认评论模板的修改版本。 第 1 步:创建 comments.php  创建一个新文件:comments.php。  把我的 comments.txt 文件中的内容复制到 comments.php。  保存 comments.php 文件。 第 2 步:样式化留言  把我的 comments-template-css 文件中的内容拷贝到你的 style.css 文件中。  复制到 style.css 的底部或者刚好 #footer 的上面。 第 3 步:在 single.php 添加留言模板 在 single.php 文件中,entry DIV 的下面,输入以下代码:
    comments_template() 这个函数是用来从 comments.php 文件调用评论模板。 comments.php 文件然后就会根据它的模板(或者代码)去显示评论列表。列表 中的每个条目是一条评论。 如果想让人们可以在静态页面也可以留言,同样可以把 comments_template() 函数用到 page.php 文件。 第 4 步:验证代码 第四步是验证你的代码,然而可以不进行第四步的,因为你在使用的是我已经整 理过的默认主题评论模板的修改版。我已经替你验证过代码了。 验证:  查看 > 页面源代码  拷贝所有源代码  然后到 validator。  把你的代码粘贴到 Direct Input 框中。  点击 Check。 以后的参考(当你创建你自己的主题和评论模板),下面是需要验证的页面:  主页 — Home page  存档页面 — Archive pages  类别页面 — Category pages (如果你自定义了类别页面)  搜索结果页面 — Search result pages  静态页面 — Pages (如:About)  单一日志页面 — Single post view page  单一日志没有留言 — Single post with no comments  单一日志有留言 — Single post with comments  单一日志含有必须登录信息 — Single post with must login message  单一日志没有必须登录信息 — Single post with no login required message 79  密码保护的单一日志并有留言 — Password protected single post with comments 评论模板的进一步解释  评论模板从根本上说是一个有序列表(OL),不是无序的,尽管它们基本 上同样方式工作。 无序列表是以圆点列表组织的。有序列表则是以数字 列表组织的(每个条目都有一个数字,从 1 开始)。  在 single.php 文件中,你用 comments-template DIV 围住 comments_template()。现在你的评论模板在一个 DIV 标签中的一个有序 列表中。 当你你的日志是密码保护的,你的评论同样是密码保护的: 这个修改版的留言模板有一个 H2 子标题显示 Password Protected。默认的留 言模板是没有的。 下面展示了哪些东西组成了你的留言列表: 简单整理下就是: 80 comment_text() 函数就是用来调用每条留言的。 我不会解释留言模板的 CSS 代码的意思。不像 comments.php 文件中的代码, 你可以随便测试你的 CSS 代码而不会弄坏留言模板。自己去测试回比我的解释 对你更有好处。 今天没有课程回顾,你已经完成了 WordPress 主题制作教程。 免费分享教程,爱心接力分享 ing! Godaddy支付宝人民币付款购买空间教程图解 IX Web Hosting 信用卡和支付宝(Alipay)购买教程 [教程] 购买Godaddy域名赠送 10G免费空间的开通方法(图) LunarPages美国虚拟主机购买过程图解(支持国内银行卡付款) 超详细的BlueHost 虚拟主机购买教程图解 81

    还剩80页未读

    继续阅读

    下载pdf到电脑,查找使用更方便

    pdf的实际排版效果,会与网站的显示效果略有不同!!

    需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

    下载pdf

    pdf贡献者

    butong

    贡献于2018-07-23

    下载需要 10 金币 [金币充值 ]
    亲,您也可以通过 分享原创pdf 来获得金币奖励!