WordPress主题开发教程(目录)

WordPress 主题教程

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

WordPress主题开发教程(目录)

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

内容目录

内容目录 1

推荐和赞助商 5

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

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

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

从零开始制作 WordPress 主题其实不难,只要你从现在开始认真阅读这个教程,一步一步认真学习,你就会成为一个 WordPress 主题制作高手。至少你会修改现有主题。 网络上已经有很多关于制作 WordPress ……

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

WordPress主题教程 #1:介绍 6

基本规则: 7

专业术语: 8

层式结构: 8

WordPress主题教程 #1:介绍

WordPress 主题教程 #1:介绍是从零开始创建 WordPress 主题系列教程 的第一篇。 从零开始制作 WordPress 主题的教程不会一次就教会你所有的东西,那样也是不可能的,这个教程也不是 WordPr……

WordPress主题教程 #1:介绍

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

Header 模板文件: 10

Index 模板文件: 10

Sidebar 模板文件 11

Footer 模板文件: 12

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

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

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

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

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

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

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

第4步:创建 style.css。 16

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

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

开始 Index.php 是从零开始创建 WordPress 主题系列教程的第三篇。在介绍了 WordPress 主题的一些规则和术语,以及对 WordPress 模板和模板文件了解之后,现在是开始动手创建 WordPr……

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

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

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

第2步:打开 index.php 18

第3步:调用博客标题 18

第4步:调用博客链接 20

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

Header 模板是从零开始创建 WordPress 主题系列教程的第四篇。前面我向你讲解了如何安装和启动 XAMPP,安装 WordPress 主题以及介绍了 PHP 语言的最基本语言,这篇我们将继续 PHP 并学习如……

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

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

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

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

第3步:添加博客描述 22

第4步:DIV 标签 22

第5步:添加 Header DIV 标签 22

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

Header 模板 2是从零开始创建 WordPress 主题教程系列教程的第四篇第二部分。最后说一次,开始之前务必先读下前面的日志。这篇会完成 Herder 模板,并且开始介 DIV Box 模型。 第1步:开启 XA……

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

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

第1步:创建 container Div 24

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

第3步:调用日志标题 26

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

WordPress主题教程 #5:主循环

调用博客日志的主循环(The Loop)是 WordPress 中最重要的 PHP 代码集,几乎所有的页面都会用到它。这也是从零开始创建 WordPress 主题系列教程的第五篇。 在开始继续学习之前,我们先复习下到目前……

WordPress主题教程 #5:主循环

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

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

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

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

日志内容是从零开始创建 WordPress 主题系列教程第五篇的第二部分,在这篇中,我们将展示如果显示博客日志的内容,并且使用一个 DIV 标签把博客日志的内容和日志的标题区分开。再次强调一次,上一篇关于 WordPre……

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

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

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

日志元数据是从零开始创建 WordPress 主题系列教程的五篇的第三部分,今天我们将开始讲解日志的元数据(Postmetadata):日期(date),分类(categories),作者(author),评论数(num……

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

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

第1步:Else 37

第2步:日志 ID 38

第3步:链接标题 39

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

Else,日志 ID,链接标题是从零开始创建 WordPress 主题系列教程的五篇的第四部分,这篇课程将讲解其他3个可以增加到日志中的元素:Else,post ID, 和 链接的 title 值。尽管它们是可选的,但是……

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

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

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

日志导航链接是从零开始创建 WordPress 主题系列教程的第五篇的第五部,在绝大多数的 WordPress 博客的底部,都会有 下一页 (Next Page) 或者 上一页 (Previous Page) 这样的导航……

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

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

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

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

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

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

WordPress主题教程 #6:侧边栏

侧边栏是从零开始创建 WordPress 主题系列教程的第六篇,这一篇我们主要讲解 WordPress 主题的侧边栏,让你很快掌握它的结构,并能编码和样式化它。 在开始侧边栏之前,这是现在 index.php 文件的样子……

WordPress主题教程 #6:侧边栏

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

26040

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

页面链接列表是从零开始创建 WordPress 主题系列教程的第六篇的第二部分,通过上一篇的学习,现在已经熟悉了侧边栏的结构,接下来我们将继续修改侧边栏,完成页面链接(Page-link)列表。当完成常规的侧边栏之后,我……

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

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

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

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

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

存档和链接列表是从零开始创建 WordPress 主题系列教程的第六篇的第三分,这篇将比较简单,讲解如何调用存档链接列表和友情链接(blogroll)列表。 第1步 – 增加存档链接列表。 在侧边栏区域的 Categor……

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

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

第1步:增加搜索框 50

第2步:增加日历 51

第3步:增加元数据 52

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

搜索框和日历是从零开始创建 WordPress 主题系列教程的第六篇的第四部分,尽管这篇的题目是 搜索框(Search Form) 和 日历(Calendar),但是我同样也会介绍 元数据(Meta) 。这一篇我们会结束……

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

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

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

第2步:窗体化侧边栏 54

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

窗体化侧边栏是从零开始创建 WordPress 主题系列教程的第六篇的第五部分,一个支 Widget 的侧边栏或者说是窗体化(widgetized)的侧边栏几乎是 WordPress 主题的标准。 首先,什么是窗体化(w……

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

WordPress 主题教程 #7:尾部 55

第1步:增加个 DIV 标签 55

第2步:添加版权信息 56

WordPress主题教程 #7:尾部

尾部(footer)是从零开始创建 WordPress 主题系列教程的第七篇,这篇教程将会很简单,去只要在侧边栏下增加个 DIV 标签,然后输入一些版权信息。其实你完全可以不用我说明就能自己去做,可以先自己尝试下,然后返……

WordPress主题教程 #7:尾部

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

WordPress主题教程 #8:验证 XHTML

验证 XHTML 是从零开始创建 WordPress 主题系列教程的第八篇。在开始学习 CSS 并修改 style.css 文件之前,我们需要学习如何验证代码,简单说,验证(Validate/ Validating/Va……

WordPress主题教程 #8:验证 XHTML

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

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

第2步:添加 CSS 代码 59

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

Style.css 和 CSS 介绍是从零开始创建 WordPress 主题系列教程的第九篇,学习 CSS 最好的方法就是去使用它,不像 XHTML 和 PHP 需要接触模板的核心文件,同样不要需要理解任何基本概念,只要……

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

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

十六进制代码 62

第1步:添加链接颜色 62

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

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

十六进制颜色代码和样式化链接是从零开始创建 WordPress 主题系列教程的第十篇。 这篇继续昨天介绍 CSS 的课程,我们今天将介绍如何着色和十六进制颜色代码。 颜色属性,跟着的是一个十六进制代码,是用于给文本上色。……

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

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主题教程 #11:宽度和布局

宽度和布局是从零开始创建 WordPress 主题系列教程的第十一篇,这篇将介绍如何设置每个 DIV 的宽度和布局排版,并且也会展示如何让主题显示正确,并同时在 Firefox 和 IE 下兼容,显示一致。 在我们开始之……

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

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

第1步:Reset CSS 67

第2步:样式化 H1 标题 67

第3步:样式化日志 68

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

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

第6步:样式化导航栏 69

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

日志样式化和其他杂项是从零开始创建 WordPress 主题系列教程的第十二篇,这篇主要讲解如何样式日志,这篇不需要 index.php, 打开Xampp Control,theme 文件夹,Firefox,Intern……

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

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

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

第2步:给 LI 添加填充 71

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

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

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

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

样式化侧边栏是从零开始创建 WordPress 主题系列教程的第十三篇,这篇主要讲解如何样式化侧边栏里面的所有元素,在对侧边栏样式化之后,这系列教程就将差不多结束了。 打开 XAMPP,主题文件夹,Firefox,IE ……

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

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主题教程 #14:底部和拆分 Index

底部和拆分 Index是从零开始创建 WordPress 主题系列教程的第十四篇,这篇我们完成对主题的样式化和开始把 index.php 文件分成多个小文件。在这篇中,首先要对 style.css 文件进行修改,然后把 ……

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

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主题教程 #15:子模板文件

子模板文件是从零开始创建 WordPress 主题系列教程的第十五篇,这篇将和像上一篇创建 header.php,sidebar.php 和 footer.php 这些模板文件一样创建更多的子模板文件。 现在 index……

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

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

第1步:创建 comments.php 82

第2步:样式化留言 82

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

第4步:验证代码 83

评论模板的进一步解释 84

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

这篇教程是在 WordPress 2.7 之前撰写的,而 WordPress 2.7 之后支持了 Thread Comments,这里有让你的主题实现 WordPress 2.7 的 Thread Comments 的方……

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

erdaoo 的 WP Theme 教程学习笔记 85

WP 主题简介 85

index.php 86

class 89

Not Found 89

页面导航 89

侧边栏 91

其他文件 95

WordPress主题教程 :侧边栏

第三部分,关于侧边栏。侧边栏有一个特点,就是又臭又长,当然了这不是什么缠脚布。先不要乱扯。因为地形有限,所以侧边栏里的内容,多以列表的形式 排开。下面欢迎一对父子出场,他们的感情是相当的好,从来都是父子不分家,有父必有子……

WordPress主题教程 :侧边栏

发表评论

电子邮件地址不会被公开。 必填项已用*标注