从零开始制作WordPress-主题 中文 高清 PDF版

WordPress 主题教程主题教程

创建 WordPress 主题其实不难，只要你从现在开始认真学习

这个教程，从零一步一步开始，你就会成为一个 WordPress

主题制作高手，至少你会修改现有主题。

下面是一个从零开始制作 WordPress 主题的教程，这个教程

最初翻译自 So you want to create WordPress themes huh?

经过多次修正以适应中文习惯，并加入了个人的理解，这个教

程它会一步一步教你如何制作 WordPress 主题。

内容目录内容目录

专业术语： ........................................................................................ 8

层式结构： ........................................................................................ 8

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

Header 模板文件:............................................................................ 10

Index 模板文件： ............................................................................ 10

Sidebar 模板文件 ............................................................................ 11

Footer 模板文件：........................................................................... 12

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

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

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

第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

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

第1步：增加搜索框 ......................................................................... 50

第2步：增加日历............................................................................. 51

第3步：增加元数据 ......................................................................... 52

WordPress 主题教程主题教程 #6e：窗体化侧边栏：窗体化侧边栏 ......................................... 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

第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

第6步：样式化导航栏...................................................................... 69

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

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

第5步（可选的）：扩展日历宽度到整个侧边栏 ..............................73

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

第1步：样式化 footer ...................................................................... 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步：验证代码............................................................................. 83

评论模板的进一步解释 .................................................................... 84

erdaoo 的的 WP Theme 教程学习笔记教程学习笔记 ................................................. 85

WP 主题简介................................................................................... 85

index.php ........................................................................................ 86

class................................................................................................ 89

Not Found ....................................................................................... 89

页面导航.......................................................................................... 89

侧边栏 ............................................................................................. 91

其他文件.......................................................................................... 95

MT 优惠码 ....................................................................................... 99

推荐和赞助商推荐和赞助商

WordPress 主题教程是我发布在我爱水煮鱼上的第一个非常完整的 WordPress 相关

教程，自从发布 PDF 电子书之后，截至目前为止已经被下载超过 12354 次，并且这

个统计只是 box.net提供的数据，其他下载站的数据无法统计，估计至少还有1万次的

下载，从2009年12月份来，我已经对这个教程进行大的修正，今天（2010-1-20）发

布修正后的第一版，对这个为了能够使得这一教程能够持续的修正，我开始在接赞助

商。另外我还将发布 WordPress 插件制作教程，从零开始使用 WordPress 等系列

PDF 电子书。如果您对这一教程或者以后的教程感兴趣，想赞助我们的话，请联系

Denis（http://wpjam.com/contact/）。

Media Temple 主机是我爱水煮鱼现在使用的主机，也是我目

前使用过最好的主机，到目前为止保持 99% 的 up time。

我爱水煮鱼博客使用过很多主机，但是最后选择了 Media

Temple，这也验证了传言中的国内技术博客的主机升级之

路，从国内主机到国外虚拟主机，最后都殊途终归的选择了

Media Temple，当然这是夸张的传言，但是从另外一个角度

这也说明了 Media Temple 主机在技术 blogger 心中独一无二

的地位。

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

Temple 主机，点击这里查看 Media Temple 主机介绍。