May 2014

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 则告诉主题中所有的元素该如何展示和样式。下面是一个完整的主题含有的文件列表（现在我们不用详细了解这个列表每个文件的意思，有个这样的印象就可以了）： […]

模板文件（template files）和模板（template）是从零开始创建 WordPress 主题系列教程的第二篇。开始之前，你要确保你已经看过WordPress 主题教程 #1：介绍，否则你将无法理解在教程 #2 中使用的名词。 在WordPress 主题教程 #1：介绍中，我们已经学过了 WordPress 的两条基本规则和术语，而这篇将会深入讲解模板文件，模板，以及每个页面的结构。 WordPress 博客的每个页面是由多个模板文件组成的，下面是首页的例子： 在上图中，我们可以看出主题的 index.php 是由 4 个模板文件组成： header.php，index.php，sidebar.php 和 footer.php。 Header 模板文件: 通常在这个文件中包含博客的标题（title）和描述（description）。而且它们通常在整个博客中都是一样的。 Index 模板文件： 这个模板文件包含你的日志的标题，日志的内容（就是每篇日志的文本和图片）和日志的元数据 （元数据是每篇日志的额外信息，如作者是谁，日志发布的时间，在哪个分类下，有多少留言等等）。 Sidebar 模板文件 这个模板文件主要用于控制博客的页面列表，类别列表，存档列表，友情链接列表和其他一些列表。 Footer 模板文件： 像 header.php 模板文件一样，footer.php 通常不会因为页面的改变而改变，你可以在这里放置任何东西，但是通常是版权信息。 现在让我解释为什么把上面图片中的 index.php 所在的区域标为红色的。引文这块区域是会根据不同类型的页面而发生变化。 如果你在单一日志页面，这时候页面将会包含这四个模板文件：header.php，single.php，sidebar.php 和 footer。 原文：link 标签：WordPress 主题 WordPress 教程

调用博客日志的主循环（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”，如下： <div id=”container”> </div> “container” 这个 DIV 标签是用把博客的主要内容和其他东西都区分开，比如 sidebar 和 footer 等。 第2步：输入主循环代码 在 […]

日志内容是从零开始创建 WordPress 主题系列教程第五篇的第二部分，在这篇中，我们将展示如果显示博客日志的内容，并且使用一个 DIV 标签把博客日志的内容和日志的标题区分开。再次强调一次，上一篇关于 WordPress 主循环介绍的课程非常重要，你需要彻底明白之后才能继续学习。 下面开始这篇课程。首先还是打开 XAMPP，“tutorial”主题文件夹，浏览器并在浏览器地址栏输入：http://localhost/wordpress，最后打开 index.php。 第1步：使用 the_content() 函数显示日志内容 在日志标题代码下面输入：<?php the_content(); ?>。 保存并刷新浏览器，现在在日志标题下面看到了一些文本： 刚才发生什么了? 我们使用了 PHP 函数 the_content() 调用了 日志的内容。现在，日志的内容只是一长行的文本，一直到窗口的右边，因为我们还没有样式化它。还记得最开始说到的 style.css 这个文件吗？我们以后用它来控制所有页面元素的显示和布局。 我们在 WordPress 后台输入多篇多篇测试日志，就可以看到多篇日志一起被显示的样子： 返回浏览器，点击”查看”选择“页面源代码”，就会弹出一个源代码窗口，如果你使用的是 Internet Explorer，那么弹出的是记事本。 我使用的是 Firefox浏览器，下面是在 FireFox 中显示的样子： 你注意到 index.php 文件和它的源代码之间的区别了吗？所有的文本，图像和其他东西等所有上图展示的东西都是通过 the_content() 这个函数调用来的。是不是很有用？注意这些代码是不依赖具体的 WordPress 主题，我们应该自己的这些文本和图片进行编码和样式化。 还有，有没有注意到我圈出的开启和关闭的P标签。他们都没有在 index.php 文件中出现，但是他们在源代码中出现了。 P 标签，为什么和如何使用？ 为什么 – 当我们输入日志的时候，每次跳过一行就是一个段落，这个时候需要一个方法去展示？我们可以通过 P （段落，paragraph）标签，每个段落会在 P 标签之间，这就是为什么段落之间有行距的原因， […]

日志元数据是从零开始创建 WordPress 主题系列教程的五篇的第三部分，今天我们将开始讲解日志的元数据（Postmetadata）：日期（date），分类（categories），作者（author），评论数（number of comments），以及其他和日志有关系的信息。 同样请打开 XAMPP，主题文件夹，浏览器以及 index.php 文件。 先让我们复习下，现在的 index.php 文件应该有下面这些代码了： 把 postmetadata.txt 中的代码复制到 <?php the_content(); ?> 下面。（注意：在这部分，我们只需要复制和粘贴。当我制作 WordPress 主题的时候，我也只是复制和粘贴这部分代码。对于这部分代码，你不需要完全理解它，只要知道每部分干什么已经足够了。） 下面的屏幕截图是为了适应日志的大小而只裁剪了一部分，它主要你关注日志元数据代码的位置： 保存并刷新浏览器，现在应该是： 我们同样可以通过查看源代码来看日志元数据是怎样的？ 详细解释： <p class=”postmetadata”> 和 </p> – 所有的日志元数据都在一个 class=”postmetadata” 的段落标签中，因为我想把日志元数据和日志内容区分开。如果没有段落标签，日志元数据信息将在日志内容结束的地方继续，这样就没有任何间距去区别内容和日志元数据。 <?php _e(’Filed under:’); ?> – : 是调用冒号“:”的代码； 把Filed under:放入<?php _e(’ ‘); ?>中不是必须的，这样主要为了使得 Filed under: 可翻译。如果你的主题不需要支持多语言，可以简单输入 Filed under:； <?php the_category(’, ‘) ?> – […]

侧边栏是从零开始创建 WordPress 主题系列教程的第六篇，这一篇我们主要讲解 WordPress 主题的侧边栏，让你很快掌握它的结构，并能编码和样式化它。 在开始侧边栏之前，这是现在 index.php 文件的样子。 第1步：创建 id 为 “sidebar” 的 DIV 首先让我们创建一个名字为 sidebar 的 DIV，这样可以把侧边栏中的所有东西都放入其中。在 container 的后面和 </body> 标签的前面输入以下代码： <div class=”sidebar”> </div> 第2步：给侧边栏的 DIV 添加无序列表 在新的 sidebar 的 DIV 标签中创建一个新的无序列表。 <ul> – 开始无序列表 </ul> – 结束无序列表 第3步：给这个无序列表添加原属 增加一个列表元素（LI）到无序列表（UL）的中间并把一个子标题添加到这个列表中。 <li><h2><?php _e(’Categories’); ?></h2> </li> 注意添加制表符到<li> 和 </li> 标签之前为了代码缩进。 <li> – 开始列表元素 <h2> – 开始子标题 […]

搜索框和日历是从零开始创建 WordPress 主题系列教程的第六篇的第四部分，尽管这篇的题目是 搜索框（Search Form） 和 日历（Calendar），但是我同样也会介绍 元数据（Meta） 。这一篇我们会结束常规的侧边栏，然后将在下一篇将介绍如何窗体化（widgetize）化侧边栏。 第1步：增加搜索框 创建一个新文件，然后把该空白文件保存为 searchform.php（当然是和 index.php 在同一个文件夹下）。把 searchform.txt 中的内容拷贝到 searchform.php。 在 index.php 文件，在侧边栏的最顶部输入以下代码： <li id=”search”> <?php include(TEMPLATEPATH . ‘/searchform.php’); ?> </li> 保存并刷新浏览器，结果如下： 刚才发什么了呢？ <li id=”search”> – 开始一个名字为 search 的列表元素，给它一个 ID，这样就能够以后样式化它。 include() – 导入任何你想导入的文件。这和使用 WordPress 模板函数去调用模板文件是不同的，因为 include() 只是简单导入已经存在的文件。这里是调用在 searhform.php 文件中的代码。被导入的信息应该在一个博客上基本不会被改变的。 TEMPLATEPATH – 主题文件夹的位置，这里是：wp-content/themes/tutorial ‘/searchform.php’ – 文件名：/searchform.php 在 TEMPLATEPATH 和 […]

窗体化侧边栏是从零开始创建 WordPress 主题系列教程的第六篇的第五部分，一个支持 Widget 的侧边栏或者说是窗体化（widgetized）的侧边栏几乎是 WordPress 主题的标准。 首先，什么是窗体化（widgetizing）呢？简单的说，窗体化就是能够通过拖拉就能够整理侧边栏的模块。比如我们需要更改分类和存档的位置，只需要简单把分类和存档列表拖到它们的位置即可，根本不用去修改侧边栏的代码。 第1步：创建 functions.php 文件 打开记事本，然后把空白文件保存为 functions.php。把 functions.txt 文件中所有的内容拷贝到 functions.php 中。 回顾一下，现在在“tutorial”主题文件夹下应该有4个文件。 第2步：窗体化侧边栏 直接在侧边栏的第一个 <ul> 标签输入以下代码： <?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?> 直接在 </ul> 标签之前输入以下代码： <?php endif; ?> 保存 index.php 文件，然后我们到 WordPress 后台 => 外观 => Widget 就可以把 Widget 拖到侧边栏了。 原文：link 标签：WordPress 主题 WordPress […]

尾部（footer）是从零开始创建 WordPress 主题系列教程的第七篇，这篇教程将会很简单，去只要在侧边栏下增加个 DIV 标签，然后输入一些版权信息。其实你完全可以不用我说明就能自己去做，可以先自己尝试下，然后返回这里再仔细检查下。 第1步：增加个 DIV 标签 在侧边栏的 DIV 标签下输入以下代码： <div id=”footer”> </div> 第2步：添加版权信息 把尾部的文本放入段落标签中，你可以输入任何你想要的东西，这里是我的： <p> Copyright © 2007 <?php bloginfo(’name’); ?> </p> 保存并刷新浏览器，结果如下： © 用于显示版权符号，还记得在 header 的时候使用的 bloginfo() 函数吗？这里再次使用，“name”是用于调用博客标题，而“url”调用博客的地址。 如果你想你的博客标题成为一个链接，查下头部就知道怎么做了。 原文：link 标签：WordPress 主题 WordPress 教程

样式化侧边栏是从零开始创建 WordPress 主题系列教程的第十三篇，这篇主要讲解如何样式化侧边栏里面的所有元素，在对侧边栏样式化之后，这系列教程就将差不多结束了。 打开 XAMPP，主题文件夹，Firefox，IE 和 style.css 文件。 第1步：样式化侧边栏的无序列表 在 .sidebar{} 下输入： .sidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px; } 现在已经为侧边栏样式化父级无序列表（UL）标签。所有的子 UL 或者内嵌的 UL 将会击继承同样的样式。在这里，它是无列表样式，零空白和10像素的填充。 如下所示： 第二级的（或内嵌的） UL 继承了第一级 UL 的样式。如果你给了第一级 UL 应用了边框，第二级的 UL 同样也会有个边框。 保存并刷新就可以看到列表条目现在已经没有前面的圆点了。 注意下你是如何增加顶部和底部填充的。 第2步：给 LI 添加填充 在 .sidebar ul{} 下输入： .sidebar ul li{ padding: 10px 0 10px […]

子模板文件是从零开始创建 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 把 […]

这篇教程是在 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 […]

从零开始制作 WordPress 主题的这个教程是我发布在我爱水煮鱼上的第一个非常完整的 WordPress 相关教程，它会一步一步教你如何制作 WordPress 主题，这个教程最初翻译自 So you want to create WordPress themes huh? 经过多次修正以适应中文习惯，并加入了个人的理解。 很早之前我就发布这个教程的 PDF 电子书之后，截至目前为止已经被下载超过 12354 次，并且这个统计只是 box.net提供的数据，其他下载站的数据无法统计，估计至少还有1万次的下载，从2009年12月份来，我已经对这个教程进行大的修正，今天（2010-1-20）发布修正后的第一版。 当然还会存在一些错误，所以为了能够使得这一教程能够持续的修正，我们接受赞助商，赞助商可以在这个电子书中获得展示广告位和产品或者服务的一段是描述。如果你对我们的教程的话，你可以联系 Denis（http://wpjam.com/contact/）。 曾经很早之前就想过和朋友一起出一本 WordPress 的书，但是一直因为各种原因未能制作 。但是如果把目标缩小一下，通过先写某个专题的 WordPress 电子书，然后分享，也不是一个不错的想法，所以我接下来会继续制作一些其他 PDF 电子书，比如 WordPress 插件制作教程，从零开始使用 WordPress 等等，也许哪一天真的可以把这个整理成一本书。 下载：WordPres 主题教程电子书。 Pseric 也发布了这个教程的繁体中文版，如果你是台湾或者香港的读者，你可以到 Pseric 的 免費資源網路社群 下这本电子书的繁体中文版：免費WordPress佈景主題教學電子書。 标签：WordPress 主题 WordPress 教程