超详细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)MediaTemple主机。代码编辑工具，如NotePad++或者Vim都可以，主要是适合自己个人使用习惯。FTP工具，用于上传主题到服务器上测试，这方面的工具很多，如Filezilla，SmartFTP等，如果你先安装软件麻烦（对啊，现在是云计算时代，谁还装软件），你也可以安装Firefox的FTP扩展，Fireftp，直接在Firefox中上传文件到服务器上。XHTML验证器和CSS验证器。你将需要这些工具去验证你的主题是否符合XHTML和CSS标准，并且可以使用它查出奇正错误的地方。这篇就介绍到这里，主要介绍了制作WordPress主题所需的工具和应该做哪些准备，下面就开始要了解和开始制作WordPress主题。#1：介绍基本规则：专业术语：层式结构：1WordPress主题教程#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则告诉主题中所23有的元素该如何展示和样式。下面是一个完整的主题含有的文件列表（现在我们不用详细了解这个列表每个文件的意思，有个这样的印象就可以了）：ostyle.cssoindex.phpohome.phposingle.phpopage.phpoarchive.phpocategory.phposearch.phpo404.phpocomments.phpocomments-popup.phpoauthor.phpodate.php专业术语：Template（模板）—其实就是一个代码集，主题中很多地方会利用到这个代码集，所以把它们整合成一个模板，这样就就不必一遍遍输入这些重复代码。Templatefile（模板文件）—一个包含一个或者多个代码集（模板）文件。每个主题是由多个模板文件组成的，如：index.php，style.css，sidebar.php等等。Theme（主题）或者WordPresstheme（WordPress主题）—所有你正在使用的文件：文本，图像，代码等等。注意：WordPresstheme（主题）和WordPresstemplate(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模板文件：模板文件（templatefiles）和模板（template）是从零开始创建WordPress主题系列教程的第二篇。开始之前，你要确保你已经看过WordPress主题教程#1：介绍，否则你将无法理解在教程#2中使用的名词。在WordPress主题教程#1：介绍中，我们已经学过了WordPress的两条基本规则和术语，而这篇将会深入讲解模板文件，模板，以及每个页面的结构。4WordPress博客的每个页面是由多个模板文件组成的，下面是首页的例子：在上图中，我们可以看出主题的index.php是由4个模板文件组成：header.php，index.php，sidebar.php和footer.php。Header模板文件:通常在这个文件中包含博客的标题（title）和描述（description）。而且它们通常在整个博客中都是一样的。Index模板文件：这个模板文件包含你的日志的标题，日志的内容（就是每篇日志的文本和图片）和日志的元数据（元数据是每篇日志的额外信息，如作者是谁，日志发布的时间，在哪个分类下，有多少留言等等）。5Sidebar模板文件这个模板文件主要用于控制博客的页面列表，类别列表，存档列表，友情链接列表和其他一些列表。6Footer模板文件：像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–指明你用哪种类型的代码来编码你的主题。这里你暂时还不用管它的详细意思。html是网页开始的地方。head是你的网页头部开始的地方。每个网页都有一个头部和主体。/head是头部结束的地方。?phpbloginfo(’stylesheet_url’);?是一个PHP函数，它能取得style.css文件所在的路径，这样主题就能使用style.css样式化页面上所有元素。任何时候，PHP代码都是在?php和?之间的。PHP代码和HTML的10代码是不一样的，在PHP中，?php代表开始PHP代码而?是结束PHP代码。所以：?php–开始PHP代码bloginfo(’stylesheet_url’)–调用style.css文件所在的路径;–停止调用函数。分号是用来结束一个PHP语句。?–结束PHP代码body–这是网页主体开始的地方。你能在网页上看到和读到的东西就是主体部分。你正在阅读的这个教程说明你在正在看当前这个网页的主体部分。/body是网页主体结束的地方。/html是网页结束的地方，没有东西在它的后面了。第4步：创建style.css。把style.txt中所有的代码拷贝到你的style.css文件中。保存和关闭它。第5步：安装你的主题。打开浏览器。在地址栏输入输入。登录到你的WordPress管理后台。（这里能够看到WordPress登录页面是因为你在第1步的时候启动了Xampp。否者的话，在这里你的浏览器会报找不到的错误。）在管理界面下到外观(Apperance)菜单并激活名为Tutorial的主题。11注意，你的主题文件没有屏幕缩略图，所以是空白的。一旦激活了，WordPress就会告诉你激活信息。现在打开一个新的浏览器或者标签页（如果你的浏览器支持标签页浏览）并在地址栏输入。你应该得到一个空白页面，恩，完全空白的页面。如果不是，那你就是在错误的页面上了。你的主题已经创建好了，这就是这个课程，下一步我们将讨论主题头部模板。不要忘记关闭Xampp。双击它在任务栏中小图标，点击Apache和MySQL的停止按钮，然后点击推出。12#4a：Header模板第1步：打开XAMPP和主题文件夹。第2步：打开index.php第3步：调用博客标