从零开始制作 WordPress 主题(修订版)

从零开始制作WordPress主题

目录

下载教程源代码 (5)

WordPress主题教程#1：介绍 (5)

HTML基本规则： (6)

WordPress专业术语： (7)

WordPress主题的层次结构： (7)

WordPress主题教程#2：模板文件和模板 (7)

Header模板文件: (8)

Index模板文件： (8)

Sidebar模板文件 (9)

Footer模板文件： (10)

WordPress主题教程#3：开始Index.php (10)

第1步：打开XAMPP控制面板。 (10)

第2步：创建你的主题文件夹。 (11)

第3步：创建index.php和style.css文件。 (11)

index.php解释： (12)

第4步：创建style.css。 (12)

第5步：安装你的主题。 (13)

WordPress主题教程#4a：Header模板 (14)

第1步：打开XAMPP和主题文件夹。 (14)

第2步：打开index.php (14)

第3步：调用博客标题 (15)

第4步：调用博客链接 (16)

WordPress主题教程#4b：Header模板2 (17)

第1步：开启XAMPP和打开index.php (17)

第2步：给博客的标题添加H1的标签 (17)

第3步：添加博客描述 (17)

第4步：DIV标签 (18)

第5步：添加Header DIV标签 (18)

WordPress主题教程#5：主循环 (18)

第1步：创建container Div (19)

第2步：输入主循环代码 (19)

第3步：调用日志标题 (20)

第4步：给日志标题加上链接 (21)

WordPress主题教程#5b：日志内容 (22)

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

第2步：使用DIV标签把博客日志的内容和标题区分开 (25)

第3步：给日志的标题和内容添加class=”post”的DIV标签 (26)

WordPress主题教程#5c：日志元数据 (28)

WordPress主题教程#5d：Else，日志ID，链接标题 (31)

第1步：Else (31)

第2步：日志ID (32)

第3步：链接标题 (32)

WordPress主题教程#5e：日志导航链接 (33)

WordPress主题教程#6：侧边栏 (34)

第1步：创建id为“sidebar”的DIV (34)

第2步：给侧边栏的DIV添加无序列表 (34)

第3步：给这个无序列表添加原属 (35)

第4步：添加分类链接列表 (35)

WordPress主题教程#6b：页面链接列表 (36)

WordPress主题教程#6c：存档和链接列表 (39)

第1步–添加存档链接列表。 (39)

第2步：添加友情链接列表 (40)

WordPress主题教程#6d：搜索框和日历 (41)

第1步：增加搜索框 (41)

第2步：增加日历 (43)

第3步：增加元数据 (44)

WordPress主题教程#6e：窗体化侧边栏 (45)

第1步：创建functions.php文件 (45)

WordPress主题教程#7：底部 (46)

第1步：增加个DIV标签 (46)

第2步：添加版权信息 (46)

WordPress主题教程#8：验证XHTML (47)

WordPress主题教程#9：Style.css和CSS介绍 (47)

第1步：打开style.css文件 (49)

第2步：添加CSS代码 (49)

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

十六进制代码 (51)

第1步：添加链接颜色 (51)

第2步：添加链接悬停颜色 (52)

WordPress主题教程#11：宽度和布局 (52)

第1步：设置页面总体宽度 (52)

第2步：自动页面居中 (53)

第3步：设置header宽度和布局 (53)

第4步：设置Container宽度和布局 (53)

第5步：设置Sidebar宽度和布局 (53)

第6步：设置Footer的宽度和布局 (54)

第7步：给侧边栏增加其余的10像素 (54)

第8步（额外的步骤）：修正IE的双倍页边距bug (54)

WordPress主题教程#12：日志样式化和其他杂项 (54)

第1步：Reset CSS (55)

第2步：样式化H1标题 (55)

第3步：样式化日志 (55)

第4步：设置日志段落填充 (56)

第5步：样式化日志杂项 (56)

第6步：样式化导航栏 (56)

WordPress主题教程#13：样式化侧边栏 (56)

第1步：样式化侧边栏的无序列表 (57)

第3步：样式化侧边栏下的子标题 (58)

第4步：清除子UL下的LI填充 (59)

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

WordPress主题教程#14：底部和拆分Index (61)

第1步：样式化footer (61)

第2步：设置footer P的行距 (61)

第3步：header.php (61)

第4步：在index.php中导入header.php (62)

第4步：sidebar.php (62)

第5步：footer.php (62)

教程回顾 (63)

WordPress主题教程#15：子模板文件 (63)

第1步：archive.php (63)

第2步：search.php (64)

第3步：page.php和single.php (64)

第4步：定制page.php (64)

第5步：定制single.php (66)

课程回顾 (66)

WordPress主题教程#16：留言模板 (67)

第1步：创建comments.php (67)

第2步：样式化留言 (67)

第3步：在single.php添加留言模板 (67)

第4步：验证代码 (68)

评论模板的进一步解释 (69)

erdaoo的WP Theme教程学习笔记 (70)

WP主题简介 (70)

index.php (70)

class (73)

Not Found (73)