超详细WordPress_主题教程：从零开始制作.pdf-资料库

asthesky-5728865-16359647541571560761.pdf-第1页.png

第1页 / 共81页

asthesky-5728865-16359647541571560761.pdf-第2页.png

第2页 / 共81页

asthesky-5728865-16359647541571560761.pdf-第3页.png

第3页 / 共81页

asthesky-5728865-16359647541571560761.pdf-第4页.png

第4页 / 共81页

asthesky-5728865-16359647541571560761.pdf-第5页.png

第5页 / 共81页

asthesky-5728865-16359647541571560761.pdf-第6页.png

第6页 / 共81页

asthesky-5728865-16359647541571560761.pdf-第7页.png

第7页 / 共81页

asthesky-5728865-16359647541571560761.pdf-第8页.png

第8页 / 共81页

超详细 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

有的元素该如何展示和样式。下面是一个完整的主题含有的文件列表（现在我们不用详细了解这个列表每个文件的意思，有个这样的印象就可以了）： 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 个是相对更重要一些，不过在接下来的教程中，余下的文件也都涉及到。 3

我们可以通过上面这张图的所处位置知道各个主题文件的重要性，越靠左越重要。这里可能大家有个疑问，为什么会存在 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

资料库

超详细WordPress_主题教程：从零开始制作.pdf

相关推荐

课程资源

热门标签

最新资料