WP Theme 教程 #2：模板文件和模板
June 4th, 2007 at 07:41pm 雪山飞猪 浏览: 10,734
模板文件（template files）和模板（template）是我的关于创建 WordPress 主题 系列教程 的第二篇。如果你还没有看过教程 #1，请先回去看教程一，否则你将无法理解在教程二中使用的名词。
现在我们已经学过了规则和术语，这篇将让你更熟悉模板文件，模板，已经每个页面的结构。
有件事情你必须牢记的是：你博客的每个页面是有多个模板文件组成的。
这里是首页的例子：
在上面的例子，我们可以看出首页是由4个模板文件组成： header.php，index.php，sidebar.php 和 footer.php。
Header 模板文件:
通常在这个文件中包含你博客的标题（title）和描述（description）。而且它们通常在整个博客中保持一致。
Index 模板文件：
这个模板文件包含你的日志的标题，内容（每篇日志的文本和图片）和日志的元数据 （指的是每篇日志的信息，包括谁是作者，什么时候发表，在那个分类下，有多少留言等等）。
Sidebar 模板文件
这个模板文件控制你的页面链接列表，类别链接列表，存档链接列表，blogroll 列表和其他东东。（侧边栏不一定要求布局到右边，我正在使用的主题是经典的两列的 博客布局。）
Footer 模板文件：
像 header.php 模板文件一样，footer 通常不会因为页面的改变而改变，你可以在这里放置任何东西，但是通常是版权信息。
现在让我解释为什么上面图片中的 index.php 所在的区域是红色的。Index.php 所在区域是红色是说明那块区域将会改变，取决于你在博客的那个页面。
如果你在单一日志页面，这时候页面将会包含这四个模板文件：header，single，sidebar 和 footer。
下一篇：WP Theme 教程 #3：开始 Index.php
请查看教程目录：WordPress 主题教程系列
翻译自：WP Theme Lesson #2: Template Files and Templates
创建 WordPress 主题系列教程均为本站翻译，如要转载，请注明：转载自我爱水煮鱼和本文地址。
作者：雪山飞猪
原文链接：WP Theme 教程 #2：模板文件和模板
我爱水煮鱼版权所有，转载时必须以链接形式注明作者和原始出处及本声明。
1. 紫天 | June 5th, 2007 at 1:24 pm
认识了大概…刚学制作网页时的布局
[回复该留言]
2. motta | June 7th, 2007 at 10:20 pm
赞! 对我这个刚接触WP的人来说很重要!
慢慢学习中,期待将来对自己在用的模板做出一定的个性化.
谢谢
[回复该留言]
3. lesliefeng | July 5th, 2007 at 11:12 pm
你好，你的教程翻译的很好，给了我很大的帮助
我在尝试制作的时候，遇到些问题：
WP是如何用DIV组织上面的header，中间左右两栏和最下面的footer的？
我可能CSS不过关拉，参看WP的做法，中间左边是FLOAT=LEFT, 然后右边SIDEBAR左边的MAGIN＝XXX,视左边宽度，这样我直接编辑网页，在IE 和FF里效果显示不一样，反正有错误，请指教
谢谢
[回复该留言]
4. 雪山飞猪 | July 6th, 2007 at 12:38 am
一般的DIV是这样组织的：
<div id=“header”>
</header>
<div id=“container”>
<div id=“content”>
</div>
<div id=“siderber”>
</div>
</div>
如果是定长话，设置各个div的长度，记住div长度是包括width+左右的padding+左右的margin。
然后设置 #content 为 float:left，#sidebar 为 float:right。
设置 #header, #container, #footer, 为 clear:both; 如果还有问题，把他们都设置为：float:left 就能解决。
这样基本在IE，FF中一样。
如果你要让网页居中，设置 body 为：width: xx; margin: xx auto; xx 为数值。
[回复该留言]
太牛了,俺也开始看这东东了
[回复该留言]
5. 颦儿 | March 13th, 2008 at 11:25 am
谢谢，这篇也明白了
[回复该留言]
6. 源子 | September 1st, 2008 at 9:51 am
受益匪浅…
[回复该留言]
7. Billy Chaw | September 13th, 2008 at 9:07 am
我想请教的是，可否把字体上传，然后在style.css里面指定用上传的字体，这样，就可以保证用自定义的字体了？？
[回复该留言]