底部和拆分 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。
原文: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的默认主题的各种文件中都有这些东西
怎么打的东西没显示阿。。
我打得是所有网页开头的那些东西
不好意思,看明白了,现在清楚怎么弄了。。。。
鱼老大,图片显示不了了哦……
还在努力学习中,不错的教程。
哇哈哈,飞猪老大,一不小心叫错了,成了鱼老大,不要介意……嘻嘻
图片看不到了
谢谢你的教程!
阁下请看,时至今日,依然有很多人从这里受益匪浅!
我转了,图片不显示,呵呵
已加上本文连接,不介意吧!
很介意,我不喜欢别人全文转载我的文章!
图片显示不了,博主修复一下。
修复了!
很经典的教程 已经照着做了一遍了