WordPress主题制作详细教程.docx

1、WordPress主题制作详细教程WordPress 主题教程 #1：介绍从零开始制作 WordPress 主题的教程不会一次就教会你所有的东西，那样也是不可能的，这个教程也不是 WordPress 主题制作的参考，我所做的是一步一步从零开始教你如何制作 WordPress 主题，所以一定要耐心。所以这一篇介绍首先是 WordPress 主题制作的一个最基本的介绍。这里会涉及到 HTML 和 WordPress 的基本规则，一些专业术语，以及 WordPress 主题的层式结。这些概念是很重要的，在接下来教程的很多地方都会涉及到，所以开始之前一定要搞清楚。基本规则： 规则 #1：以正确顺序关闭

2、所有 HTML 标签。在上图中在错误关闭标签的演示中，关闭的 ul 标签是不按次序的。每个 HTML 标签都是在 中，如果有斜线 /，则说明这个标签是开始标签，没有则是结束标签。如： 是开始标签，而 是结束标签。在上面的例子中，使用 ul（无序列表）li （列表元素）标签。注意 li 的开始和结束标签在 ul 的开始和结束标签的里面，这就是标签正确嵌套方式。 规则 #2：每个主题至少要有这两个文件 style.css 和 index.php。index.php 告诉主题中所有的元素如何布局，style.css 则告诉主题中所有的元素该如何展示和样式。下面是一个完整的主题含有的文件列表（现在我们

3、不用详细了解这个列表每个文件的意思，有个这样的印象就可以了）：o style.csso index.phpo home.phpo single.phpo page.phpo archive.phpo category.phpo search.phpo 404.phpo comments.phpo comments-popup.phpo author.phpo date.php专业术语： Template（模板） 其实就是一个代码集，主题中很多地方会利用到这个代码集，所以把它们整合成一个模板，这样就就不必一遍遍输入这些重复代码。 Template file（模板文件） 一个包含一个或者多个代码集

4、（模板）文件。每个主题是由多个模板文件组成的，如：index.php，style.css，sidebar.php 等等。 Theme（主题）或者 WordPress theme（WordPress 主题） 所有你正在使用的文件：文本，图像，代码等等。注意： WordPress theme（主题）和 WordPress template(s)（模板）是两个不同的东西，尽管有些人认为他们一样。 Post（日志） 现在你读的就是一篇日志。此外，它是你 blog 的一个简单的条目，如：一个页面或者一篇日记。 Page（静态页面） 一种特殊的 post，它不是以分类组织的。它有别于你其他的日志。注意：在

5、 WordPress，page（页面）和 Page（静态页面）是两种不同的东西。层式结构：下图就是 WordPress 的层式结果，它简单的向你展示，一旦你主题中的某个文件丢失了，WordPress 主题系统将会寻找什么模板文件来代替。这里列出了 6 个文件而不是完整的 13 个，因为这 6 个是相对更重要一些，不过在接下来的教程中，余下的文件也都涉及到。我们可以通过上面这张图的所处位置知道各个主题文件的重要性，越靠左越重要。这里可能大家有个疑问，为什么会存在 WordPress 模板文件的层式结构，或者说是重要性级别呢？因为 WordPress 利用这个层式结构去寻找相应的模板文件显示页面，

6、并且在相应的文件丢失之后如何处理。如果 archive.php 模板文件（用来显示存档页面）丢失了，那么 WordPress 将会使用 index.php 来控制存档页面如何显示。如果 single.php 模板文件丢失了呢，哪个模板文件它会去寻找用来显示单一日志呢？它会寻找 index.php。WordPress 主题教程 #2：模板文件和模板WordPress 博客的每个页面是由多个模板文件组成的，下面是首页的例子：在上图中，我们可以看出主题的 index.php 是由 4 个模板文件组成： header.php，index.php，sidebar.php 和 footer.php。Hea

7、der 模板文件:通常在这个文件中包含博客的标题（title）和描述（description）。而且它们通常在整个博客中都是一样的。Index 模板文件：这个模板文件包含你的日志的标题，日志的内容（就是每篇日志的文本和图片）和日志的元数据 （元数据是每篇日志的额外信息，如作者是谁，日志发布的时间，在哪个分类下，有多少留言等等）。Sidebar 模板文件这个模板文件主要用于控制博客的页面列表，类别列表，存档列表，友情链接列表和其他一些列表。Footer 模板文件：像 header.php 模板文件一样，footer.php 通常不会因为页面的改变而改变，你可以在这里放置任何东西，但是通常是版权信

8、息。现在让我解释为什么把上面图片中的 index.php 所在的区域标为红色的。引文这块区域是会根据不同类型的页面而发生变化。如果你在单一日志页面，这时候页面将会包含这四个模板文件：header.php，single.php，sidebar.php 和 footer。WordPress 主题教程 #3：开始 Index.php第1步：打开 XAMPP 控制面板。在 XAMPP 文件夹（通常是：C:xampp），双击 xampp-control.exe 将会弹出一个新的窗口。单击 Apache 和 MySQL 的启动按钮。如下图所示：启动之后你看最小化窗口了。第2步：创建你的主题文件夹。转到你本

9、地安装的 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 解释：点击上面的图片查看大图。我会向你解释每个红色圆圈区域是什么意思。Docty

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

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

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

13、pp/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步：调用博客标题编辑 inde

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

15、下来就要把博客的标题放入超链接中，这时候需要一个 XHTML 标签。返回 index.php 文件。在同一行增加 和 。此时新行的代码应该是：返回到浏览器，刷新，然后就可以看到博客的标题变成了链接。现在它是一个链接，但是它没有链接到哪里。因为这个是博客的标题，我们应该让它链接到首页。为此，在 href=后的双引号中输入 保存，现在的代码应该是：a href=”返回到浏览器，刷新，当鼠标在链接上面的时候，浏览器的状态栏应该显示 http:/localhost/wordpress现在点击这个链接，它就会让我们返回首页。可能现在看到还是是相同的页面，但是用 # 或者 http:/localhost/

16、wordpress 作为链接地址是完全不一样的。在接下来的课程我们会学到到他们之间的不同。刚才发生什么了？我们把网站名字变成了链接，并使它链接到博客的主页。bloginfo(url) 调用博客基本信息，具体是首页的的地址或者 URL 是一个用于添加链接的 XHTML 标签 链接的结束标签。否则网页将不知道哪里结束链接，这样会使得页面接下来的内容全部都变成链接。还记得规则 #1吗？正确关闭打开的所有标签。href=” 超文本的简写。在引号之间就是它的值。最终代码为：a href=”意思为：开始一个链接，链接的地址是博客的URL，用 PHP 函数 bloginfo(url) 去调用这个地址或者UR

17、L。这个链接的文本是博客的标题并使用 PHP 函数 bloginfo(name) 去调用博客的标题。最后结束链接。这篇主要介绍了 WordPress 主题的 XHTML 代码，下一篇我们将继续 Header 模板。WordPress 主题教程 #4b：Header 模板 2第1步：开启 XAMPP 和打开 index.php- 启动 Xampp- 打开 Tutorial 的主题文件夹- 打开浏览器，在地址栏输入 http:/localhost/wordpress- 返回主题文件夹，用记事本打开 index.php第2步：给博客的标题添加 H1 的标签现在，index.php 的代码是：a hr

18、ef=”给它添加 和 标签。H1 标签意思是标题一。HTML 一共可以有7级标题：H1，H2，H3，H4，H5，H6。按照默认，H1是字体最大而H6是则最小。添加之后的的 index.php 文件是：a href=”保存，返回浏览器并刷新。第3步：添加博客描述调用博客的描述，则在博客标题链接的下面输入以下代码： 。现在变成了：a href=”保存并刷新浏览器，可以看到在博客标题链接的下面出现博客的描述，我们可以到 WordPress 管理后下修改博客的描述。 结束 PHP 代码第4步：DIV 标签这步将介绍一个新的标签 DIV。给以上代码添加 和 标签：”保存，刷新浏览器，应该看到没有任何变化

19、可以把 DIV 想像成一个无形的盒子 (box)。在这里它把博客标题链接和博客描述从其他东西中区分开。如果没有对它进行样式化，它无非是单独的内容，以后我们可以会用 style.css 这个文件去样式化这个无形的盒子。我们可以给 DIV 附上 边框（borders），填充（paddings）, 页边空白（margins），背景颜色（background color），背景图片（background images），以及其他一些东东。第5步：添加 Header DIV 标签添加 id=”header” 到 DIV 标签，如下：保存并刷新浏览器。同样也没有改变，这里给 DIV 标签指定了 ID ，因

20、为将会有更多的 DIV 标签或者无形的盒子，我们使用 ID 来区分！WordPress 主题教程 #5：主循环第1步：创建 container Div在 header DIV 标签下添加一个 DIV 标签，并给它的 ID 赋值为 “container”，如下：“container” 这个 DIV 标签是用把博客的主要内容和其他东西都区分开，比如 sidebar 和 footer 等。第2步：输入主循环代码在 Container 的 DIV 标签中添加如下代码：这段代码就是 WordPress 中的主循环（The Loop）。在详细解释这些代码作用之前，我们来看下现在 index.php 所包含

21、的代码：你可能已经注意到Container DIV 中的每一行都被缩进了，这是为了更好的组织代码，更加利于阅读(使用 tab 健而不是空格键进行代码缩进，)。刚才发生了什么？ if(have_posts() 检查博客是否有日志。 while(have_posts() 如果有日志，那么当博客有日志的时候，执行下面 the_post() 这个函数。 the_post() 调用具体的日志来显示。 endwhile; 遵照规则 #1，这里用于关闭 while() endif; 关闭 if() 注释：并不是所有的代码都需要两部分用来打开和关闭。有些代码能够自我关闭，这就解释了 have_posts()

22、和 the_post(); 这两个函数。因为 the_post(); 在 if() 和 while() 的外面，只需要分号去结束或者关闭。第3步：调用日志标题在前面的课程中，我们学习了使用 bloginfo(name) 去调用博客的标题。现在我们将学习在主循环（The Loop）中如何调用日志标题。在 the_post(); ? 的后面和 的前面输入 保存 index.php 文件并刷新浏览器，这时候应该看到在博客描述的下方出现 Hello World ，默认安装 WordPress 之后，博客只有一篇日志。而我的测试的博客有多篇日志，所以这里有多个日志标题，而且因为我所用的日志标题是一样的，

23、我也没有进行组织整理他们，所以它们看起来像很长的一行 Hello World。第4步：给日志标题加上链接把日志标题转变成日志标题链接。还记得怎样吧博客的标题转变成一个链接的？在 两边增加 和 。保存并刷新你的浏览器。现在日志的标题都变成了链接了，但是它们并没有指向哪里。为了使得每个标题都能指向正确的日志，我们需要把 # 替换为 the_permalink()。a href=”“the_permalink() 是用来调用每篇日志地址的 PHP 函数。保存并刷新浏览器。如果只有一个 Hello World 标题，把鼠标移到链接上面，观察你的浏览器底部的状态栏，他不再是 http:/localhos

24、t/wordpress/#。如果有不止一个的标题链接，我们将看到每个链接会链到不同的日志或者网页。但是我们的日志标题依然在同一行上面。为了分开它们，在日志标题链接代码的两边添加 和 标签。a href=”记住 H1 用作你的博客的标题，那是网页的标题。H2 被用作子标题。现在你的日志标题链接是子标题了，每一个都是一行。保存 index.php 文件并刷新浏览器，结果如下：WordPress 主循环就介绍到这里，现在 index.php 文件内容应该是：WordPress 主题教程 #5b：日志内容下面开始这篇课程。首先还是打开 XAMPP，“tutorial”主题文件夹，浏览器并在浏览器地址栏

25、输入：http:/localhost/wordpress，最后打开 index.php。第1步：使用 the_content() 函数显示日志内容在日志标题代码下面输入：。保存并刷新浏览器，现在在日志标题下面看到了一些文本：刚才发生什么了?我们使用了 PHP 函数 the_content() 调用了 日志的内容。现在，日志的内容只是一长行的文本，一直到窗口的右边，因为我们还没有样式化它。还记得最开始说到的 style.css 这个文件吗？我们以后用它来控制所有页面元素的显示和布局。我们在 WordPress 后台输入多篇多篇测试日志，就可以看到多篇日志一起被显示的样子：返回浏览器，点击”查看”

26、选择“页面源代码”，就会弹出一个源代码窗口，如果你使用的是 Internet Explorer，那么弹出的是记事本。我使用的是 Firefox浏览器，下面是在 FireFox 中显示的样子：你注意到 index.php 文件和它的源代码之间的区别了吗？所有的文本，图像和其他东西等所有上图展示的东西都是通过 the_content() 这个函数调用来的。是不是很有用？注意这些代码是不依赖具体的 WordPress 主题，我们应该自己的这些文本和图片进行编码和样式化。还有，有没有注意到我圈出的开启和关闭的P标签。他们都没有在 index.php 文件中出现，但是他们在源代码中出现了。P 标签，为什么和如何使用？为什么 当我们输入日志的时候，每次跳过一行就是一个段落，这个时候需要一个方法去展示？我们可以通过 P （段落，paragraph）标签，每个段落会在 P 标签之间，这就是为什么段落之间有行距的原因，如何使用 非常容易，WordPress 模板系统会自动帮我们产生 P 标签。第2步：DIV 标签把博客日志的内容和标题区分开给 the_content() 两边添加 DIV 标签并给该 DIV 标签附上class=”entry”属性，如下：你现在的 index.php