底部和拆分 Index是从零开始创建 WordPress 主题系列教程的第十四篇，这篇我们完成对主题的样式化和开始把 index.php 文件分成多个小文件。在这篇中，首先要对 style.css 文件进行修改，然后把 index.php 分成一些新的文件。
打开 XAMPP，主题文件夹，Firefox，IE，index.php 和 style.css。
第1步：样式化 footer
给 footer DIV 增加 10px 顶部填充。你还记得如何增加填充？这次我不提供代码。
第2步：设置 footer P 的行距
给 footer 里的所有的 P 标签 18px 行距。那是 #footer p{}.。（今天关于 CSS 的就这么多。）
第3步：header.php
- 创建一个新文件，把它命名为 header.php。
- 在 index.php 文件中，把 header DIV 及以上所有东西都拷贝到 header.php 文件中。
这是我的 header.php 文件。不要从我的这里拷贝，从你自己的 index.php 文件拷贝。
第4步：在 index.php 中导入 header.php
为了使所有从 index.php 中拷出的内容依然在 index.php 文件中，输入以下代码：
<?php get_header(); ?>
这是个 WordPress 主题系统特别用来导入 header.php 文件的函数，而不用使用 PHP 的函数：<?php include (TEMPLATEPATH . ‘/header.php’); ?>.
保存并刷新浏览器，你应该看到没有变化。如果你的改变破坏了主题，那么肯定有错误。
第4步：sidebar.php
- 和第4步一样，更多相同的事情。这次，创建 sidebar.php 文件。
- 把 index.php 文件中的 Sidebar DIV 从开始到结尾都复制到 sidebar.php 文件中。
- 那么，在 index.php 文件，将其取代为：<?php get_sidebar(); ?>.
- 保存并刷新浏览器，再一次，你应该看到没有变化。
- 这是我的 sidebar.php 文件。
第5步：footer.php
- 为
footer.php重复上面的步骤。 - 这是我的 footer.php 文件。
教程回顾
- 创建了三个新文件：header.php，sidebar.php 和 footer.php。
- 使用了三个新的函数：get_header()，get_sidebar() 和 get_footer()。
- 下面是这节课结束之后的文件：index，style，header，sidebar，footer。
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 主题教程电子书下载
原文：link
终于快看完了，休息一下
现在对wp模版有点印象了
继续学习。。。。
支持 反对
呵呵，加油，我还在修正中，你发现有什么问题给我留言
支持 反对
翻译这么多内容辛苦了。
但是这句：
(You’re done with style.css for today.)
（你已经在 style.css 中完成它。）
感觉这句应该翻译为今天关于css的就这么多。意思是今天接下来的内容不再有涉及css的了。
支持 反对
@ noir，谢谢，确实你的翻译好很多，按照你的翻译修改了，哈哈
支持 反对
怪不得在饭否上看到New Blog Post: WP Theme 教程 #14，原来修改了日志fanfou-tool也会在饭否上发出来的
支持 反对
很好的教程，我收藏了，准备这两天搞定：）
多谢“鱼兄”。
在此节，我认为把“拷贝”翻译为“剪切”可能更合适：）
支持 反对
header部份放在index.php里没问题，放到header.php，再用调用到index.php到时出现页面错乱：container的内容跑到右边，sider跑到左边了…
支持 反对
你是不是加了这个
table #wp-calendar{
width: 100%;
}
请注意到table和#必须要一个空格,否则在IE会错位.
支持 反对
和楼上的问题一样,页面错位了.
支持 反对
修改下CSS。
支持 反对
谢谢飞猪.
把侧栏改小了,就不会错位了.但不知为何原因.
对了.这篇文章重复了一个”第4步”…
支持 反对
好像是的，算了不改了！
支持 反对
飞猪我想问一下,把内容分开后,还用在其它文件中加入其它东西么?比如”
“之类的东西?
我看到的workpress的默认主题的各种文件中都有这些东西
支持 反对
怎么打的东西没显示阿。。
我打得是所有网页开头的那些东西
支持 反对
不好意思，看明白了，现在清楚怎么弄了。。。。
支持 反对
鱼老大，图片显示不了了哦……
还在努力学习中，不错的教程。
支持 反对
哇哈哈，飞猪老大，一不小心叫错了，成了鱼老大，不要介意……嘻嘻
支持 反对
图片看不到了
支持1 反对
谢谢你的教程！
阁下请看，时至今日，依然有很多人从这里受益匪浅！
支持 反对
我转了，图片不显示，呵呵
已加上本文连接，不介意吧！
支持 反对
很介意，我不喜欢别人全文转载我的文章！
支持 反对
支持 反对
图片显示不了，博主修复一下。
支持 反对
修复了！
支持 反对
很经典的教程 已经照着做了一遍了
支持 反对