WordPress主题开发教程,一代程序员的心血!

创建 WordPress 主题其实不难,只要你从现在开始认真学习这个教程,从零一步一步开始,你就会成为一个 WordPress 主题制作高手,至少你会修改现有主题。

下面是一个从零开始制作 WordPress 主题的教程,这个教程最初翻译自 So you want to create WordPress themes huh? 经过多次修正以适应中文习惯,并加入了个人的理解,这个教程它会一步一步教你如何制作 WordPress 主题。

内容目录

内容目录 1

推荐和赞助商 5

WordPress 主题教程:从零开始制作 WordPress 主题 6

创建 WordPress 主题所需的工具和准备 6

WordPress 主题教程 #1:介绍 6

基本规则: 7

专业术语: 8

层式结构: 8

WordPress 主题教程 #2:模板文件和模板 9

Header 模板文件 10

Index 模板文件: 10

Sidebar 模板文件 11

Footer 模板文件: 12

WordPress 主题教程 #3:开始 Index.php 13

第1步:打开 XAMPP 控制面板。 13

第2步:创建你的主题文件夹。 14

第3步:创建 index.php 和 style.css 文件。 14

第4步:创建 style.css。 16

第5步:安装你的主题。 16

WordPress 主题教程 #4a:Header 模板 18

第1步:打开 XAMPP 和主题文件夹。 18

第2步:打开 index.php 18

第3步:调用博客标题 18

第4步:调用博客链接 20

WordPress 主题教程 #4b:Header 模板 2 21

第1步:开启 XAMPP 和打开 index.php 21

第2步:给博客的标题添加 H1 的标签 21

第3步:添加博客描述 22

第4步:DIV 标签 22

第5步:添加 Header DIV 标签 22

WordPress 主题教程 #5:主循环 23

第1步:创建 container Div 24

第2步:输入主循环代码 24

第3步:调用日志标题 26

第4步:给日志标题加上链接 27

WordPress 主题教程 #5b:日志内容 28

第1步:使用 the_content() 函数显示日志内容 28

第2步:DIV 标签把博客日志的内容和标题区分开 31

WordPress 主题教程 #5c:日志元数据 34

WordPress 主题教程 #5d:Else,日志 ID,链接标题 37

第1步:Else 37

第2步:日志 ID 38

第3步:链接标题 39

WordPress 主题教程 #5e:日志导航链接 39

WordPress 主题教程 #6:侧边栏 41

第1步:创建 id 为 “sidebar” 的 DIV 41

第2步:给侧边栏的 DIV 添加无序列表 41

第3步:给这个无序列表添加原属 42

第4步:添加分类链接列表 43

WordPress 主题教程 #6b:页面链接列表 44

WordPress 主题教程 #6c:存档和链接列表 47

第1步 – 增加存档链接列表。 47

第2步:增加友情链接列表 48

WordPress 主题教程 #6d:搜索框和日历 49

第1步:增加搜索框 50

第2步:增加日历 51

第3步:增加元数据 52

WordPress 主题教程 #6e:窗体化侧边栏 54

第1步:创建 functions.php 文件 54

第2步:窗体化侧边栏 54

WordPress 主题教程 #7:尾部 55

第1步:增加个 DIV 标签 55

第2步:添加版权信息 56

WordPress 主题教程 #8:验证 XHTML 56

WordPress 主题教程 #9:Style.css 和 CSS 介绍 58

第1步:打开 style.css 文件 59

第2步:添加 CSS 代码 59

WordPress 主题教程 #10:十六进制颜色代码和样式化链接 62

十六进制代码 62

第1步:添加链接颜色 62

第2步:添加链接悬停颜色 63

WordPress 主题教程 #11:宽度和布局 64

第1步:设置页面总体宽度 64

第2步:自动页面居中 65

第3步:设置 header 宽度和布局 65

第4步:设置 Container 宽度和布局 65

第5步:设置 Sidebar 宽度和布局 65

第6步:设置 Footer 的宽度和布局 66

第7步:给侧边栏增加其余的 10 像素 66

第8步(额外的步骤):修正 IE 的双倍页边距 bug 66

WordPress 主题教程 #12:日志样式化和其他杂项 67

第1步:Reset CSS 67

第2步:样式化 H1 标题 67

第3步:样式化日志 68

第4步:设置日志段落填充 69

第5步:样式化日志杂项 69

第6步:样式化导航栏 69

WordPress 主题教程 #13:样式化侧边栏 70

第1步:样式化侧边栏的无序列表 70

第2步:给 LI 添加填充 71

第3步:样式化侧边栏下的子标题 71

第4步:清除子 UL 下的 LI 填充 72

第5步(可选的):扩展日历宽度到整个侧边栏 73

WordPress 主题教程 #14:底部和拆分 Index 75

第1步:样式化 footer 75

第2步:设置 footer P 的行距 75

第3步:header.php 75

第4步:在 index.php 中导入 header.php 76

第4步:sidebar.php 77

第5步:footer.php 77

教程回顾 77

WordPress 主题教程 #15:子模板文件 78

第1步:archive.php 78

第2步:search.php 78

第3步:page.php 和 single.php 79

第4步:定制 page.php 79

第5步:定制 single.php 81

课程回顾 81

WordPress 主题教程 #16:留言模板 82

第1步:创建 comments.php 82

第2步:样式化留言 82

第3步:在 single.php 添加留言模板 82

第4步:验证代码 83

评论模板的进一步解释 84

erdaoo 的 WP Theme 教程学习笔记 85

WP 主题简介 85

index.php 86

class 89

Not Found 89

页面导航 89

侧边栏 91

其他文件 95

主机推荐:(MT) Media Temple 97

(GS) Grid-Service 97

The Hosting Card 97

(DV) Dedivated-Virtual 98

(dpv) Nitro 和 (cx) Coplex-Hosting 98

MT 各类型主机性能及价格比较 98

MT 优惠码 99

推荐和赞助商

WordPress 主题教程是我发布在我爱水煮鱼上的第一个非常完整的 WordPress 相关教程,自从发布 PDF 电子书之后,截至目前为止已经被下载超过 12354 次,并且这个统计只是 box.net提供的数据,其他下载站的数据无法统计,估计至少还有1万次的下载,从2009年12月份来,我已经对这个教程进行大的修正,今天(2010-1-20)发布修正后的第一版,对这个为了能够使得这一教程能够持续的修正,我开始在接赞助商。另外我还将发布 WordPress 插件制作教程,从零开始使用 WordPress 等系列PDF 电子书。如果您对这一教程或者以后的教程感兴趣,想赞助我们的话,请联系Denis(http://wpjam.com/contact/)。

WordPress JAM 是国内第一个提供 WordPress 定制化服务的团队,目前已经有了相当多WordPress 案例

WordPress JAM 长期承接 WordPress 主题制作、博客定制化、WordPress 插件定制、WordPress 博客 SEO 等等。

WordPress JAM 团队阵容强大,WordPress 主题设计,插件制作等各方面人才兼备。

Media Temple 主机我爱水煮鱼现在使用的主机,也是我目前使用过最好的主机,到目前为止保持 99% 的 up time。

我爱水煮鱼博客使用过很多主机,但是最后选择了 Media Temple,这也验证了传言中的国内技术博客的主机升级之 路,从国内主机到国外虚拟主机,最后都殊途终归的选择了Media Temple,当然这是夸张的传言,但是从另外一个角度这也说明了 Media Temple 主机在技术 blogger 心中独一无二的地位。

如果你正需要为你的博客找款主机请点击这里直接购买 Media Temple 主机,点击这里查看 Media Temple 主机介绍

免費資源網路社群是以免費資源為主題的部落格,提供最新免費資訊,包含免費空間、免費軟體、Web 2.0, 網頁設計與站長工具。

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 主题。

WordPress 主题教程 #1:介绍

WordPress 主题教程 #1:介绍是从零开始创建 WordPress 主题系列教程 的第一篇。

从零开始制作 WordPress 主题的教程不会一次就教会你所有的东西,那样也是不可能的,这个教程也不是 WordPress 主题制作的参考,我所做的是一步一步从零开始教你如何制作 WordPress 主题,所以一定要耐心。

所以这一篇介绍首先是 WordPress 主题制作的一个最基本的介绍。这里会涉及到HTML 和 WordPress 的基本规则,一些专业术语,以及 WordPress 主题的层式结。这些概念是很重要的,在接下来教程的很多地方都会涉及到,所以开始之前一定要搞清楚。

基本规则:

  • 规则 #1:以正确顺序关闭所有 HTML 标签。
图片[1] - WordPress主题开发教程,一代程序员的心血! - 某研究院

在上图中在错误关闭标签的演示中,关闭的 ul 标签是不按次序的。

每个 HTML 标签都是在 < > 中,如果有斜线 /,则说明这个标签是开始标签,没有则是结束标签。如:<> 是开始标签,而</> 是结束标签。

在上面的例子中,使用 ul(无序列表)li (列表元素)标签。注意 li 的开始和结束标签在 ul 的开始和结束标签的里面,这就是标签正确嵌套方式。

  • 规则 #2:每个主题至少要有这两个文件 – style.css index.php。index.php 告诉主题中所有的元素如何布局,style.css 则告诉主题中所有的元素该如何展示和样式。下面是一个完整的主题含有的文件列表(现在我们不用详细了解这个列表每个文件的意思,有个这样的印象就可以了):
    • style.css
    • index.php
    • home.php
    • single.php
    • page.php
    • archive.php
    • category.php
    • search.php
    • 404.php
    • comments.php
    • comments-popup.php
    • author.php
    • 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 个是相对更重要一些,不过在接下来的教程中,余下的文件也都涉及到。

图片[2] - WordPress主题开发教程,一代程序员的心血! - 某研究院

我们可以通过上面这张图的所处位置知道各个主题文件的重要性,越靠左越重要。

这里可能大家有个疑问,为什么会存在 WordPress 模板文件的层式结构,或者说是重要性级别呢?因为 WordPress 利用这个层式结构去寻找相应的模板文件显示页面,并且在相应的文件丢失之后如何处理。

如果 archive.php 模板文件(用来显示存档页面)丢失了,那么 WordPress 将会使用

index.php 来控制存档页面如何显示。

如果 single.php 模板文件丢失了呢,哪个模板文件它会去寻找用来显示单一日志呢? 它会寻找 index.php。

WordPress 主题教程 #2:模板文件和模板

模板文件template files)和模板template)是从零开始创建 WordPress 主题系列教程的第二篇。开始之前,你要确保你已经看过WordPress 主题教程 #1:介绍, 否则你将无法理解在教程 #2 中使用的名词。

在WordPress 主题教程 #1:介绍中,我们已经学过了 WordPress 的两条基本规则和术语,而这篇将会深入讲解模板文件,模板,以及每个页面的结构。

WordPress 博客的每个页面由多个模板文件组成的,下面是首页的例子:

图片[3] - WordPress主题开发教程,一代程序员的心血! - 某研究院

在上图中,我们可以看出主题的 index.php 是由 4 个模板文件组成: header.php, index.php,sidebar.php 和 footer.php。

Header 模板文件:

图片[4] - WordPress主题开发教程,一代程序员的心血! - 某研究院

通常在这个文件中包含博客的标题(title)和描述(description)。而且它们通常在整个博客中都是一样的。

WordPress主题开发教程,一代程序员的心血! - 某研究院
WordPress主题开发教程,一代程序员的心血!
此内容为付费阅读,请付费后查看
9.99
限时特惠
38.88
您当前未登录!建议登陆后购买,可保存购买订单
付费阅读
© 版权声明
THE END
喜欢就支持一下吧
点赞2035
分享
评论 共4条

请登录后发表评论