WP Theme 教程 #14：底部和拆分 Index
July 9th, 2007 at 10:57pm 雪山飞猪 浏览: 4,498
这篇，我们完成样式化和开始把 index.php 文件分成多个小文件。在这篇中，你可能先需要 style.css 文件，然后你将把 index.php 分成一些新的文件。
打开 Xampp，主题文件夹，Firefox，IE，index.php 和 style.css。
第1步
给 footer DIV 增加 10px 顶部填充。你还记得如何增加填充?我这次不给你代码了.
第2步
给 footer 里的所有的 P 标签 18px 行距。那是 #footer p{}.。（今天关于 CSS 的就这么多。）
第3步
- 创建一个新文件，把它命名为 header.php。确认是 PHP 文件而不是文本文档。
- 在 index.php 文件中，把 header DIV 上面所有东西都拷贝到 header.php 文件中。
这是我的 header.php 文件。不要从我的这里拷贝，从你自己的 index.php 文件拷贝。
第4步
为了使所有的东西从 index.php 中拷出的东西依然在 index.php 文件中，输入以下代码：
<?php get_header(); ?>
这是个 WordPress 主题系统特别用来包含 header.php 文件的函数，而不用使用：<?php include (TEMPLATEPATH . ‘/header.php’); ?>.
保存并刷新浏览器，你应该看到没有变化。如果你的改变破坏了主题，那么肯定有错误。
第4步
- 和第4步一样，更多相同的事情。这次，创建 sidebar.php 文件。
- 把 index.php 文件中的 Sidebar DIV 开始到结尾都拷贝到 sidebar.php 文件中。
- 那么，在 index.php 文件，取代为：<?php get_sidebar(); ?>.
- 保存并刷新浏览器，再一次，你应该看到没有变化。
- 这是我的 sidebar.php 文件。
第5步
- 为 footer.php 重复上面的步骤。
- 这是我的 footer.php 文件。
教程回顾
- 你创建了三个新文件：header.php，sidebar.php 和 footer.php。
- 你学到了三个新的函数：get_header()，get_sidebar() 和 get_footer()。
- 下面是这节课结束之后的文件：index，style，header，sidebar，footer。不要拷贝并使用它们取代你自己打。如果有错误或者你的主题没有显示正确，在和我的代码对照检查下。
请查看教程目录：WordPress 主题教程系列
翻译自：WP Theme Lesson #14: Footer and Dividing Index
创建 WordPress 主题系列教程均为本站翻译，如要转载，请注明：转载自我爱水煮鱼和本文地址。
作者：雪山飞猪
原文链接：WP Theme 教程 #14：底部和拆分 Index
我爱水煮鱼版权所有，转载时必须以链接形式注明作者和原始出处及本声明。
1. kendy | July 19th, 2007 at 11:23 am
终于快看完了，休息一下
现在对wp模版有点印象了
继续学习。。。。
[回复该留言]
2. 雪山飞猪 | July 19th, 2007 at 11:32 am
呵呵，加油，我还在修正中，你发现有什么问题给我留言
[回复该留言]
3. noir | September 1st, 2007 at 9:07 pm
翻译这么多内容辛苦了。
但是这句：
(You’re done with style.css for today.)
（你已经在 style.css 中完成它。）
感觉这句应该翻译为今天关于css的就这么多。意思是今天接下来的内容不再有涉及css的了。
[回复该留言]
4. 雪山飞猪 | September 1st, 2007 at 9:28 pm
@ noir，谢谢，确实你的翻译好很多，按照你的翻译修改了，哈哈
[回复该留言]
5. paopao | September 2nd, 2007 at 1:05 am
怪不得在饭否上看到New Blog Post: WP Theme 教程 #14，原来修改了日志fanfou-tool也会在饭否上发出来的
[回复该留言]
6. 世纪大厦 | September 10th, 2007 at 2:18 am
很好的教程，我收藏了，准备这两天搞定：）
多谢“鱼兄”。
在此节，我认为把“拷贝”翻译为“剪切”可能更合适：）
[回复该留言]
7. 黑色饼干 | December 7th, 2007 at 10:21 pm
header部份放在index.php里没问题，放到header.php，再用调用到index.php到时出现页面错乱：container的内容跑到右边，sider跑到左边了…
[回复该留言]
你是不是加了这个
table #wp-calendar{
width: 100%;
}
请注意到table和#必须要一个空格,否则在IE会错位.
[回复该留言]
8. Js | January 4th, 2008 at 9:32 pm
和楼上的问题一样,页面错位了.
[回复该留言]
修改下CSS。
[回复该留言]
9. Js | January 5th, 2008 at 2:19 pm
谢谢飞猪.
把侧栏改小了,就不会错位了.但不知为何原因.
对了.这篇文章重复了一个”第4步”…
[回复该留言]
好像是的，算了不改了！
[回复该留言]
10. cadmuxe | January 19th, 2008 at 7:53 pm
飞猪我想问一下,把内容分开后,还用在其它文件中加入其它东西么?比如”
“之类的东西?
我看到的workpress的默认主题的各种文件中都有这些东西
[回复该留言]
11. cadmuxe | January 19th, 2008 at 7:54 pm
怎么打的东西没显示阿。。
我打得是所有网页开头的那些东西
[回复该留言]
12. cadmuxe | January 19th, 2008 at 7:59 pm
不好意思，看明白了，现在清楚怎么弄了。。。。
[回复该留言]
13. bill | January 28th, 2008 at 11:31 am
鱼老大，图片显示不了了哦……
还在努力学习中，不错的教程。
[回复该留言]
14. bill | January 28th, 2008 at 11:32 am
哇哈哈，飞猪老大，一不小心叫错了，成了鱼老大，不要介意……嘻嘻
[回复该留言]
15. 胡戈戈 | January 31st, 2008 at 11:37 am
图片看不到了
[回复该留言]
16. Lean | June 13th, 2008 at 6:54 am
谢谢你的教程！
阁下请看，时至今日，依然有很多人从这里受益匪浅！
[回复该留言]