博客 » WordPress » WordPress 主题教程 #2：模板文件和模板

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

Denis 2007年06月04日

模板文件（template files）和模板（template）是从零开始创建 WordPress 主题系列教程的第二篇。开始之前，你要确保你已经看过WordPress 主题教程 #1：介绍，否则你将无法理解在教程 #2 中使用的名词。

在WordPress 主题教程 #1：介绍中，我们已经学过了 WordPress 的两条基本规则和术语，而这篇将会深入讲解模板文件，模板，以及每个页面的结构。

WordPress 博客的每个页面是由多个模板文件组成的，下面是首页的例子：

在上图中，我们可以看出主题的 index.php 是由 4 个模板文件组成： header.php，index.php，sidebar.php 和 footer.php。

Header 模板文件:

通常在这个文件中包含博客的标题（title）和描述（description）。而且它们通常在整个博客中都是一样的。

Index 模板文件：

这个模板文件包含你的日志的标题，日志的内容（就是每篇日志的文本和图片）和日志的元数据 （元数据是每篇日志的额外信息，如作者是谁，日志发布的时间，在哪个分类下，有多少留言等等）。

Sidebar 模板文件

这个模板文件主要用于控制博客的页面列表，类别列表，存档列表，友情链接列表和其他一些列表。

Footer 模板文件：

像 header.php 模板文件一样，footer.php 通常不会因为页面的改变而改变，你可以在这里放置任何东西，但是通常是版权信息。

现在让我解释为什么把上面图片中的 index.php 所在的区域标为红色的。引文这块区域是会根据不同类型的页面而发生变化。

如果你在单一日志页面，这时候页面将会包含这四个模板文件：header.php，single.php，sidebar.php 和 footer。

WordPress 主题教程

翻译自：http://www.wpdesigner.com/2007/02/21/wp-theme-lesson-2-template-files-and-templates/，并根据中文习惯和个人理解做了修改！

标签：WordPress WordPress 主题教程

分享到 Google Buzz

11 条评论添加你的评论 →

紫天 » 评论跟踪

1. 紫天 | 2007:06:05 - 13:24:57 | #

认识了大概…刚学制作网页时的布局
登陆回复该留言
motta » 评论跟踪

2. motta | 2007:06:07 - 22:20:00 | #

赞! 对我这个刚接触WP的人来说很重要!
慢慢学习中,期待将来对自己在用的模板做出一定的个性化.
谢谢
登陆回复该留言
lesliefeng » 评论跟踪

3. lesliefeng | 2007:07:05 - 23:12:09 | #

你好，你的教程翻译的很好，给了我很大的帮助
我在尝试制作的时候，遇到些问题：
WP是如何用DIV组织上面的header，中间左右两栏和最下面的footer的？
我可能CSS不过关拉，参看WP的做法，中间左边是FLOAT=LEFT, 然后右边SIDEBAR左边的MAGIN＝XXX,视左边宽度，这样我直接编辑网页，在IE 和FF里效果显示不一样，反正有错误，请指教
谢谢
登陆回复该留言
Denis » 评论跟踪

4. Denis | 2007:07:06 - 00:38:37 | #

一般的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. 胡戈戈 | 2008:01:30 - 22:44:07 | #
  
  太牛了,俺也开始看这东东了
  登陆回复该留言
源子 » 评论跟踪

6. 源子 | 2008:09:01 - 09:51:38 | #

受益匪浅…
登陆回复该留言
Billy Chaw » 评论跟踪

7. Billy Chaw | 2008:09:13 - 09:07:29 | #

我想请教的是，可否把字体上传，然后在style.css里面指定用上传的字体，这样，就可以保证用自定义的字体了？？
登陆回复该留言
- welee » 评论跟踪
  
  8. welee | 2009:12:20 - 14:56:05 | #
  
  用 CSS3 里的 @font-face 就行了。
  登陆回复该留言
  - Denis » 评论跟踪
    
    9. Denis | 2009:12:20 - 20:17:38 | #
    
    每次浏览还要用户下载字体！
    登陆回复该留言
Own-c.l » 评论跟踪

10. Own-c.l | 2008:12:12 - 04:53:17 | #

这个YO2真得不错，更不错的是你发的这个教程，
我对编程特别感兴趣就是一直每人指点，所以绝对在此认真的学习如何做博客！
登陆回复该留言
notycn » 评论跟踪

11. notycn | 2009:12:20 - 14:35:35 | #

不如详细的介绍下CSS，很多WP主题里的代码是大同小异，更重要的是CSS布局
登陆回复该留言

发表评论

你必须登陆之后才能留言。你可以使用以下方式快速登陆我爱水煮鱼：

你也可选择直接在本站注册。