WordPress 主题教程 #1：介绍
2007年06月04日
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 则告诉主题中所有的元素该如何展示和样式。下面是一个完整的主题含有的文件列表（现在我们不用详细了解这个列表每个文件的意思，有个这样的印象就可以了）：
- 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 个是相对更重要一些，不过在接下来的教程中，余下的文件也都涉及到。
我们可以通过上面这张图的所处位置知道各个主题文件的重要性，越靠左越重要。
这里可能大家有个疑问，为什么会存在 WordPress 模板文件的层式结构，或者说是重要性级别呢？因为 WordPress 利用这个层式结构去寻找相应的模板文件显示页面，并且在相应的文件丢失之后如何处理。
如果 archive.php 模板文件（用来显示存档页面）丢失了，那么 WordPress 将会使用 index.php 来控制存档页面如何显示。
如果 single.php 模板文件丢失了呢，哪个模板文件它会去寻找用来显示单一日志呢？它会寻找 index.php。
WordPress 主题教程
- WordPress 主题教程：从零开始制作 WordPress 主题
- WordPress 主题教程 #1：介绍
- WordPress 主题教程 #2：模板文件和模板
- WordPress 主题教程 #3：开始 Index.php
- WordPress 主题教程 #4a：Header 模板
- WordPress 主题教程 #4b：Header 模板 2
- WordPress 主题教程 #5：主循环
- WordPress 主题教程 #5b：日志内容
- WordPress 主题教程 #5c：日志元数据
- WordPress 主题教程 #5d：Else，日志 ID，链接标题
- WordPress 主题教程 #5e：日志导航链接
- WordPress 主题教程 #6：侧边栏
- WordPress 主题教程 #6b：页面链接列表
- WordPress 主题教程 #6c：存档和链接列表
- WordPress 主题教程 #6d：搜索框和日历
- WordPress 主题教程 #6e：窗体化侧边栏
- WordPress 主题教程 #7：尾部
- WordPress 主题教程 #8：验证 XHTML
- WordPress 主题教程 #9：Style.css 和 CSS 介绍
- WordPress 主题教程 #10：十六进制颜色代码和样式化链接
- WordPress 主题教程 #11：宽度和布局
- WordPress 主题教程 #12：日志样式化和其他杂项
- WordPress 主题教程 #13：样式化侧边栏
- WordPress 主题教程 #14：底部和拆分 Index
- WordPress 主题教程 #15：子模板文件
- WordPress 主题教程 #16：留言模板
- erdaoo 的 WP Theme 教程学习笔记
- WordPress 主题教程电子书下载
翻译自：http://www.wpdesigner.com/2007/02/21/wp-theme-lesson-1-intro/，并根据中文习惯和个人理解做了修改！
37 条评论 添加你的评论 →
1. 紫天 | 2007:06:04 - 21:26:10 | #
偶得认真翻字典学习认得和记得一下那些英文才行:-(
2. sofish | 2007:06:04 - 21:28:48 | #
Denis,出插件教程实际点…
3. 春晓 | 2007:06:04 - 21:37:32 | #
相对插件，皮还是重要点
4. Denis | 2007:06:04 - 21:59:15 | #
sofish，你是指教人怎么写插件还是教人怎么用现有的插件呢？
5. Denis | 2007:06:04 - 22:01:46 | #
为什么我要翻译这些主题教程，因为当我们帮人用 WordPress 做网站的时候，如果你缺什么功能的时候，你完全可以去找到符合该功能的插件，但是你找到主题总是有些不顺心的地方，总要修改，所以知道多些怎么创建主题的方法总是好的，你们觉得呢？
6. sofish | 2007:06:05 - 19:28:41 | #
嘿嘿,仅个人观点.翻译好用插件…可以方便中文菜鸟…嘿嘿…
7. Denis | 2007:06:05 - 20:20:39 | #
其实这里面已经有很多关于插件的翻译，或者你可以让我给整理下某个插件怎么使用？嘻嘻！
8. Denis | 2007:06:05 - 23:55:50 | #
Yes, If I translate other’s post, it is required to leave the orignal author’s post link, so I leave it. I don’t know what is your meaning?
9. keke | 2007:06:14 - 18:46:05 | #
支持，受教了，回去好好学一下！
10. yumo | 2007:07:14 - 18:41:40 | #
请教问题，为什么我注册了博客，能看到自己的页面但进不了编辑后台？？？
11. Denis | 2007:07:14 - 21:01:23 | #
你注册了博客，那就是不是在自己主机的 WP，那应该问你的 BSP 啊！
12. sctronlinux | 2007:07:17 - 13:40:07 | #
有没有Wordpress的程序代码分析？
13. Denis | 2007:07:17 - 14:45:07 | #
你是指源代码分析吗？这个好像比较难，个人能力还没有达到那个层次！呵呵
14. zc | 2007:07:30 - 17:35:37 | #
源代码?学php去吧…
15. zc | 2007:07:30 - 18:22:29 | #
$I leave a comment in here=(回15楼:源代码?去学php吧)
刚看到#6 Sidebar (and Categories) — 侧边栏,有两栏的修改成三栏(加一栏做ads什么的)教程么?也是用div+css实现的么?wp研究第二天!厚着脸问一下……
16. ideaonly | 2007:08:02 - 17:10:24 | #
19楼的朋友请教的问题也是在下面临的问题之一：
如何改两栏成三栏？
希望得到Denis和其他知情朋友的分享啊！先谢谢了
17. Denis | 2007:08:02 - 17:26:53 | #
这个问题我没有考虑过，呵呵，什么时候去搜索下，给大家写篇文章咋搞！呵呵
18. ideaonly | 2007:08:02 - 18:33:29 | #
如果不行我就只有找个三栏的theme来改，但是问题就是三栏的我没有找到我很喜欢的。所以想把那个两栏的改成三栏的。你加油找找哈，人民期待着你啊。：）
19. ileeo | 2007:08:21 - 19:39:20 | #
看样子很详细.
20. quanquan | 2007:10:20 - 16:35:17 | #
有时间我就来学学。博客需要留住人主要还是靠内容啊！
21. My-Hou不務正業 | 2007:12:05 - 00:08:51 | #
最近几天都在这泡了
22. Fuson | 2007:12:06 - 01:05:31 | #
一直想学习这方面的东西，会长期关注！！
23. 黑色饼干 | 2007:12:07 - 00:43:13 | #
呵呵，慢慢看完所有的，继续下一篇
24. Eric | 2008:01:08 - 17:18:13 | #
我要收藏起来，对于不懂PHP的我们来讲真是太受益了。感谢您的分享，辛苦了，大大~~~
25. brinsh | 2008:05:05 - 08:54:41 | #
这个有没有可视化的编辑软件，像dreamweaver什么的行吗？
26. 电影 | 2008:06:14 - 14:34:56 | #
搬个凳子，慢慢学习，哈哈！
27. joseph | 2008:07:07 - 19:57:33 | #
不错，认真学习下
28. iiyuyo | 2008:12:09 - 12:14:52 | #
学习一下，多谢分享。
29. 路人甲 | 2009:01:28 - 03:12:25 | #
我偶尔看到了这便文章，想说几句:
站长，你真的很不厚道，转载别人的文章不说，还把版权信心都给删除了！
我觉得你这样真的违背良心啊！有愧站长两字！
我的话说完了，谢谢!
原版地址：http://www.lostleon.com/blog/2007/03/wp-theme-lesson-1-intro/
如果你删除我的留言，证明你肯本是个无耻之徒。。。
30. Denis | 2009:01:28 - 09:36:31 | #
谢谢啊，大过年的就来给我讲笑话！
31. 酿泉为酒 | 2009:12:19 - 18:57:05 | #
围观
32. 宇皓 | 2009:05:11 - 23:49:12 | #
嘿嘿！
刚开始用WP，上网找的主题，有喜欢的，但是总是有那么一点不尽人意。
自己修改后还能用！
问题，总用别人的主题也不是事。
所以自己也学着弄弄，现在在学校学的是JAVA，对这个CSS一点也不了解！
幸亏在谷歌找到这么一个BLOG！
呵呵！
33. xiaozhang | 2009:05:21 - 14:11:24 | #
赞一个,谢谢了,正在找.
G.CN的关键词:修改WORDPRESS主题.排第一.
34. 章鱼王 | 2009:06:17 - 05:47:11 | #
留言登录是怎么做到的？
35. Denis | 2009:12:17 - 00:57:01 | #
根据名字搜索下，博客中都有介绍！
36. 827992 | 2009:11:30 - 10:55:45 | #
不错！
37. 多睡一会儿 | 2010:03:04 - 17:28:52 | #
“如果有斜线 /，则说明这个标签是开始标签，没有则是结束标签。”
是不是写错了