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

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

Denis 2007年06月04日

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

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

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

index.gif

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

Header 模板文件:

header-template.gif

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

Index 模板文件：

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

index-template.gif

Sidebar 模板文件

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

sidebar-template.gif

Footer 模板文件：

footer-template.gif

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

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

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

single.gif

原文：link

标签：

分享到：

13 条评论 添加你的评论 →

  • 紫天 2007-06-05 13:24:57 #

    认识了大概…刚学制作网页时的布局

    支持 反对

  • motta 2007-06-07 22:20:00 #

    赞! 对我这个刚接触WP的人来说很重要!
    慢慢学习中,期待将来对自己在用的模板做出一定的个性化.
    谢谢

    支持 反对

  • lesliefeng 2007-07-05 23:12:09 #

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

    支持 反对

  • 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 为数值。

    支持 反对

  • 源子 2008-09-01 09:51:38 #

    受益匪浅… :shock:

    支持 反对

  • Billy Chaw 2008-09-13 09:07:29 #

    我想请教的是，可否把字体上传，然后在style.css里面指定用上传的字体，这样，就可以保证用自定义的字体了？？

    支持1 反对

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

    这个YO2真得不错，更不错的是你发的这个教程，
    我对编程特别感兴趣 就是一直每人指点，所以绝对在此认真的学习如何做博客！

    支持 反对

  • notycn 2009-12-20 14:35:35 #

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

    支持 反对

  • 独翼无爱 2011-10-14 09:02:42 #

    刚刚竟然看到我们厂的代理商在百度的广告了，给你点击一下，哈哈。写的非常好，以后每天来学习一点，我也好想要一个自己创建的好的模板啊 :grin:

    支持 反对

发表评论

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

使用新浪微博登陆 使用腾讯微博登陆 使用豆瓣登陆

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