WordPress 主题教程从零开始.docx

1、WordPress 主题教程从零开始WordPress 主题教程：从零开始制作 创建 WordPress 主题所需的工具和准备 从零开始制作 WordPress 主题其实不难，只要你从现在开始认真阅读这个教程，一步一步认真学习，你就会成为一个 WordPress 主题制作高手。至少你会修改现有主题。 网络上已经有很多关于制作 WordPress 主题的教程，并且 WordPress 官方网站上也有指导文章。但是当你不懂这方面的术语的话，这些教程可能不一定会帮助你，甚至还会误导你，所以这个教程会真正从零开始教你如何创建 WordPress 主题。创建 WordPress 主题所需的工具和准备开始

2、真正制作主题之前，你需要使用到下面这些工具： 为了测试方便和快速，你首先需要在本地安装 WordPress，至于如何在 Windows 系统上安装 WordPress，你可以参考这篇日志：在 WordPress 本地安装 WordPress。 如果由于某种原因不能在本地安装 WordPress，那么你也可以的服务器上安装一个测试版的 WordPress。这个时候你必须要有一个支持 WordPress 主机的服务器，一般我使用 LAMP 主机（Linux+Apache+MySQL+PHP）主机，Win+IIS 主机可能会有很多问题，调试也比较麻烦，而 LAMP 主机，从我个人使用经验来说，我推荐

3、 (MT) Media Temple 主机。 代码编辑工具，如 NotePad+ 或者 Vim 都可以，主要是适合自己个人使用习惯。 FTP 工具，用于上传主题到服务器上测试，这方面的工具很多，如 Filezilla，SmartFTP 等，如果你先安装软件麻烦（对啊，现在是云计算时代，谁还装软件），你也可以安装 Firefox 的 FTP 扩展，Fireftp，直接在 Firefox 中上传文件到服务器上。 XHTML 验证器和 CSS 验证器。你将需要这些工具去验证你的主题是否符合 XHTML 和 CSS 标准，并且可以使用它查出奇正错误的地方。 这篇就介绍到这里，主要介绍了制作 WordP

4、ress 主题所需的工具和应该做哪些准备，下面就开始要了解和开始制作 WordPress 主题。#1：介绍 基本规则： 专业术语： 层式结构： WordPress 主题教程 #1：介绍是从零开始创建 WordPress 主题系列教程 的第一篇。从零开始制作 WordPress 主题的教程不会一次就教会你所有的东西，那样也是不可能的，这个教程也不是 WordPress 主题制作的参考，我所做的是一步一步从零开始教你如何制作 WordPress 主题，所以一定要耐心。所以这一篇介绍首先是 WordPress 主题制作的一个最基本的介绍。这里会涉及到 HTML 和 WordPress 的基本规则，一

5、些专业术语，以及 WordPress 主题的层式结。这些概念是很重要的，在接下来教程的很多地方都会涉及到，所以开始之前一定要搞清楚。基本规则： 规则 #1：以正确顺序关闭所有 HTML 标签。在上图中在错误关闭标签的演示中，关闭的 ul 标签是不按次序的。每个 HTML 标签都是在 中，如果有斜线 /，则说明这个标签是结束标签，没有则是开始标签。如： 是开始标签，而 是结束标签。在上面的例子中，使用 ul（无序列表）li （列表元素）标签。注意 li 的开始和结束标签在 ul 的开始和结束标签的里面，这就是标签正确嵌套方式。 规则 #2：每个主题至少要有这两个文件 style.css 和 in

6、dex.php。index.php 告诉主题中所有的元素如何布局，style.css 则告诉主题中所有的元素该如何展示和样式。下面是一个完整的主题含有的文件列表（现在我们不用详细了解这个列表每个文件的意思，有个这样的印象就可以了）：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 专业术语： Templat

7、e（模板） 其实就是一个代码集，主题中很多地方会利用到这个代码集，所以把它们整合成一个模板，这样就就不必一遍遍输入这些重复代码。 Template file（模板文件） 一个包含一个或者多个代码集（模板）文件。每个主题是由多个模板文件组成的，如：index.php，style.css，sidebar.php 等等。 Theme（主题）或者 WordPress theme（WordPress 主题） 所有你正在使用的文件：文本，图像，代码等等。注意： WordPress theme（主题）和 WordPress template(s)（模板）是两个不同的东西，尽管有些人认为他们一样。 Post（

8、日志） 现在你读的就是一篇日志。此外，它是你 blog 的一个简单的条目，如：一个页面或者一篇日记。 Page（静态页面） 一种特殊的 post，它不是以分类组织的。它有别于你其他的日志。注意：在 WordPress，page（页面）和 Page（静态页面）是两种不同的东西。 层式结构：下图就是 WordPress 的层式结果，它简单的向你展示，一旦你主题中的某个文件丢失了，WordPress 主题系统将会寻找什么模板文件来代替。这里列出了 6 个文件而不是完整的 13 个，因为这 6 个是相对更重要一些，不过在接下来的教程中，余下的文件也都涉及到。我们可以通过上面这张图的所处位置知道各个主题

9、文件的重要性，越靠左越重要。这里可能大家有个疑问，为什么会存在 WordPress 模板文件的层式结构，或者说是重要性级别呢？因为 WordPress 利用这个层式结构去寻找相应的模板文件显示页面，并且在相应的文件丢失之后如何处理。如果 archive.php 模板文件（用来显示存档页面）丢失了，那么 WordPress 将会使用 index.php 来控制存档页面如何显示。如果 single.php 模板文件丢失了呢，哪个模板文件它会去寻找用来显示单一日志呢？它会寻找 index.php。WordPress #2：模板文件和模板 Header 模板文件: Index 模板文件： Sideba

10、r 模板文件 Footer 模板文件： 模板文件（template files）和模板（template）是从零开始创建 WordPress 主题系列教程的第二篇。开始之前，你要确保你已经看过WordPress 主题教程 #1：介绍，否则你将无法理解在教程 #2 中使用的名词。在WordPress 主题教程 #1：介绍中，我们已经学过了 WordPress 的两条基本规则和术语，而这篇将会深入讲解模板文件，模板，以及每个页面的结构。WordPress 博客的每个页面是由多个模板文件组成的，下面是首页的例子：在上图中，我们可以看出主题的 index.php 是由 4 个模板文件组成： heade

11、r.php，index.php，sidebar.php 和 footer.php。Header 模板文件:通常在这个文件中包含博客的标题（title）和描述（description）。而且它们通常在整个博客中都是一样的。Index 模板文件：这个模板文件包含你的日志的标题，日志的内容（就是每篇日志的文本和图片）和日志的元数据 （元数据是每篇日志的额外信息，如作者是谁，日志发布的时间，在哪个分类下，有多少留言等等）。Sidebar 模板文件这个模板文件主要用于控制博客的页面列表，类别列表，存档列表，友情链接列表和其他一些列表。Footer 模板文件：像 header.php 模板文件一样，foo

12、ter.php 通常不会因为页面的改变而改变，你可以在这里放置任何东西，但是通常是版权信息。现在让我解释为什么把上面图片中的 index.php 所在的区域标为红色的。引文这块区域是会根据不同类型的页面而发生变化。如果你在单一日志页面，这时候页面将会包含这四个模板文件：header.php，single.php，sidebar.php 和 footer。#3：开始 Index.php 第1步：打开 XAMPP 控制面板。 第2步：创建你的主题文件夹。 第3步：创建 index.php 和 style.css 文件。 第4步：创建 style.css。 第5步：安装你的主题。 开始 Index.

13、php 是从零开始创建 WordPress 主题系列教程的第三篇。在介绍了 WordPress 主题的一些规则和术语，以及对 WordPress 模板和模板文件了解之后，现在是开始动手创建 WordPress 主题了的时候。在这篇中，你将要着手开始写 WordPress 代码。这里建议在本地电脑上安装 WordPress，而不是安装到服务器上，因为本地更方便测试。第1步：打开 XAMPP 控制面板。在 XAMPP 文件夹（通常是：C:xampp），双击 xampp-control.exe 将会弹出一个新的窗口。单击 Apache 和 MySQL 的启动按钮。如下图所示：启动之后你看最小化窗口了

14、。第2步：创建你的主题文件夹。转到你本地安装的 WordPress 主题文件夹，应该在xampp/htdocs/wordpress/wp-content/themes。创建一个新的文件夹，命名为 tutorial。第3步：创建 index.php 和 style.css 文件。打开记事本或者你选择的文本编辑器，把 index.txt 这个文件中的所有内容都拷贝到你的记事本。保存为 index.php。打开另外一个记事本，直接保存为 style.css 到相同的文件夹下.现在有两个文件了: index.php 和 style.css.index.php 解释：点击上面的图片查看大图。我会向你解释

15、每个红色圆圈区域是什么意思。Doctype 指明你用哪种类型的代码来编码你的主题。这里你暂时还不用管它的详细意思。 是网页开始的地方。 是你的网页头部开始的地方。每个网页都有一个头部和主体。 是头部结束的地方。 是一个 PHP 函数，它能取得 style.css 文件所在的路径，这样主题就能使用 style.css 样式化页面上所有元素。任何时候，PHP 代码都是在 之间的。PHP 代码和 HTML 的代码是不一样的，在 PHP 中， 是结束 PHP 代码。所以： 结束 PHP 代码 这是网页主体开始的地方。你能在网页上看到和读到的东西就是主体部分。你正在阅读的这个教程说明你在正在看当前这个网

16、页的主体部分。 是网页主体结束的地方。 是网页结束的地方，没有东西在它的后面了。第4步：创建 style.css。把 style.txt 中所有的代码拷贝到你的 style.css 文件中。保存和关闭它。第5步：安装你的主题。打开浏览器。在地址栏输入输入 http:/localhost/wordpress/wp-login.php。登录到你的 WordPress 管理后台。（这里能够看到 WordPress 登录页面是因为你在第1步的时候启动了 Xampp。否者的话，在这里你的浏览器会报找不到的错误。）在管理界面下到 外观 (Apperance) 菜单并激活名为 Tutorial 的主题。注意

17、，你的主题文件没有屏幕缩略图，所以是空白的。一旦激活了，WordPress 就会告诉你激活信息。现在打开一个新的浏览器或者标签页（如果你的浏览器支持标签页浏览）并在地址栏输入 http:/localhost/wordpress。你应该得到一个空白页面，恩，完全空白的页面。如果不是，那你就是在错误的页面上了。你的主题已经创建好了，这就是这个课程，下一步我们将讨论主题头部模板。不要忘记关闭 Xampp。双击它在任务栏中小图标，点击 Apache 和 MySQL 的停止按钮，然后点击推出。#4a：Header 模板 第1步：打开 XAMPP 和主题文件夹。 第2步：打开 index.php 第3步：

18、调用博客标题 第4步：调用博客链接 Header 模板是从零开始创建 WordPress 主题系列教程的第四篇。前面我向你讲解了如何安装和启动 XAMPP，安装 WordPress 主题以及介绍了 PHP 语言的最基本语言，这篇我们将继续 PHP 并学习如何调用博客的标题和链接。尽量输入所有代码而不是直接拷贝我给你的代码，这样可以让你尽量记住你所学到的的。第1步：打开 XAMPP 和主题文件夹。打开 Xampp，然后打开上次创建的主题文件夹，xampp/htdocs/wordpress/wp-content/themes/tutorial。我们应该看到上次创建的两个文件：index.php 和

19、 style.css。index.php 和 style.css 文件的内容应该和index.txt 和 style.txt 一致。第2步：打开 index.php打开浏览器，转到 http:/localhost/wordpress。因为上次安装了一个空白的主题，这时我们应该看到一个空白的页面。返回主题文件夹并打开 index.php 文件。到目前为止，我们已经打开了主题文件夹，浏览器和 index.php 文件。第3步：调用博客标题编辑 index.php 文件。在 和 这两个标签之间输入 ，然后保存它。返回到浏览器并刷新。这时候我们应该能够看到博客的标题。博客的标题是 Demo Theme

20、 Development。刚才发生什么了？我们在网页的主体 (body) 之间加入了一行 PHP 代码到 index.php。bloginfo() 是调用博客的信息的函数。其中参数 name 代表了它调用的是博客的标题。这个名字是在 option 页面中设置的 Weblog Title。 结束 PHP 代码每次我们在 index.php 文件中增加或者更改任何东西之后，都可以保存，然后刷新页面去查看结果。第4步：调用博客链接调用了博客的标题之后，接下来就要把博客的标题放入超链接中，这时候需要一个 XHTML 标签。返回 index.php 文件。在同一行增加 和 。此时新行的代码应该是：返回到

21、浏览器，刷新，然后就可以看到博客的标题变成了链接。现在它是一个链接，但是它没有链接到哪里。因为这个是博客的标题，我们应该让它链接到首页。为此，在 href=后的双引号中输入 保存，现在的代码应该是：a href=”返回到浏览器，刷新，当鼠标在链接上面的时候，浏览器的状态栏应该显示 http:/localhost/wordpress现在点击这个链接，它就会让我们返回首页。可能现在看到还是是相同的页面，但是用 # 或者 http:/localhost/wordpress 作为链接地址是完全不一样的。在接下来的课程我们会学到到他们之间的不同。刚才发生什么了？我们把网站名字变成了链接，并使它链接到博客

22、的主页。bloginfo(url) 调用博客基本信息，具体是首页的的地址或者 URL 是一个用于添加链接的 XHTML 标签 链接的结束标签。否则网页将不知道哪里结束链接，这样会使得页面接下来的内容全部都变成链接。还记得规则 #1吗？正确关闭打开的所有标签。href=” 超文本的简写。在引号之间就是它的值。最终代码为：a href=”意思为：开始一个链接，链接的地址是博客的URL，用 PHP 函数 bloginfo(url) 去调用这个地址或者URL。这个链接的文本是博客的标题并使用 PHP 函数 bloginfo(name) 去调用博客的标题。最后结束链接。这篇主要介绍了 WordPress

23、 主题的 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 的主题文件夹- 打开

24、浏览器，在地址栏输入 http:/localhost/wordpress- 返回主题文件夹，用记事本打开 index.php第2步：给博客的标题添加 H1 的标签现在，index.php 的代码是：a href=”给它添加 和 标签。H1 标签意思是标题一。HTML 一共可以有7级标题：H1，H2，H3，H4，H5，H6。按照默认，H1是字体最大而H6是则最小。添加之后的的 index.php 文件是：a href=”保存，返回浏览器并刷新。第3步：添加博客描述调用博客的描述，则在博客标题链接的下面输入以下代码： 。现在变成了：a href=”保存并刷新浏览器，可以看到在博客标题链接的下面出现

25、博客的描述，我们可以到 WordPress 管理后下修改博客的描述。 结束 PHP 代码第4步：DIV 标签这步将介绍一个新的标签 DIV。给以上代码添加 和 标签：”保存，刷新浏览器，应该看到没有任何变化可以把 DIV 想像成一个无形的盒子 (box)。在这里它把博客标题链接和博客描述从其他东西中区分开。如果没有对它进行样式化，它无非是单独的内容，以后我们可以会用 style.css 这个文件去样式化这个无形的盒子。我们可以给 DIV 附上 边框（borders），填充（paddings）, 页边空白（margins），背景颜色（background color），背景图片（backgrou

26、nd images），以及其他一些东东。第5步：添加 Header DIV 标签添加 id=”header” 到 DIV 标签，如下：保存并刷新浏览器。同样也没有改变，这里给 DIV 标签指定了 ID ，因为将会有更多的 DIV 标签或者无形的盒子，我们使用 ID 来区分！#5：主循环 第1步：创建 container Div 第2步：输入主循环代码 第3步：调用日志标题 第4步：给日志标题加上链接 调用博客日志的主循环（The Loop）是 WordPress 中最重要的 PHP 代码集，几乎所有的页面都会用到它。这也是从零开始创建 WordPress 主题系列教程的第五篇。在开始继续学习之

27、前，我们先复习下到目前为止学到了什么？到目前为止，我们已经学到：: 规则，术语和 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 标签中添加如下代码：?php while(have_posts()