WordPress 主题模板制作及修改教程
每一套 WP 主题都由结构层、表现层和数据层构成,可以说是典型的、符合 Web 体系标准的“三层结构”。WP主题的这种模式块化的特点决定了其设计其实是非常简单,但又极其灵活的。可以说,学会了制作 WP 主题,就相当于基本理解了 Web开发的客户端模型,对进一步学习掌握 Web 技术具有重要意义。这也正是 WP 的魅力所在!
在一套 WP 主题中,最基本的两个文件是 index.php 和style.css。其中,前者定义结构和内容,后者定义样式。所谓结构,就是由指由 XHTML 标签构成的网页基本架构。在 WP主题中,结构层主要使用的是添加了适当的 id 或(和)class 属性的 div 和 ul元素,以便更好地通过表现层来控制页面的布局和外观。所谓表现层,其实就是网页的布局和样式--也就是外观。表现层由CSS(级联样式表)规则定义构 成。而数据层,顾名思义,也就是网站中实际显示的内容,是通过调用 WP内置的函数(有时需要传递适当的参数)从数据库中取得的。 说明:为简明起见,本教程不涉及如何定义样式表(CSS)文件的内容。
事实上,当我们打开某个主题的文件夹时,看到的并不止这两个文件,而是更多。但一般来说,在一个完整的 WP 主题文件夹中都应该包含下列文件(也称为模板文件):
模板文件 index.php single.php page.php archive.php search.php category.php 404.php comments.php comments-popup.php style.css 页面 索引页模版:首页 文章页面模板:单页 文章页面模板:静态页 用途 显示网站首页,由4个模板文件组成 显示博文的页面(相当于细节页) 显示静态页的页面(包含各级静态页面) 显示存档页的页面(相当于按时间归类的栏目页) 显示搜索结果的页面 显示分类页的页面(相当于栏目页) 显示 404 错误信息的页面 显示评论的页面 显示弹出式评论的页面 控制页面布局外观 存档页 搜索页 分类页 404错误页 评论页 弹出式评论页 级联样式表 除此之外,一套主题模板中还可以包含 author.php、home.php、date.php、searchform.php 以及 functions.php 等页面(其中部分页面稍后介绍)。
虽然上面列出了与 WP 内置功能对应的 9 个 php 文件,但制作一套主题远没有想像得那么复杂。因为事实上,你只需要制作一个 index.php 文件,就可以派生出另外 8 个文件来! 从 WP 应用主题的机制来说,这 9 个模板文件是存在优先级差别的,也可以认为是重要性不同。它们的优先级顺序是: index.php -> single.php -> page.php -> archive.php -> search.php -> 404.php。
这样,当不存在后边的页面时,WP 会自动调用前面的页面,直至调用 index.php。比如,当程序调用页面页 page.php
时,如果page.php 模板文件不存在,那么程序会尝试调用前面的文件--single.php。而如果 single.php也不存在,那么就会调用最终的 index.php 来显示页面页。可见 index.php属于“垫底儿”的缺省页面,它的重要性是最高的。但当存在具体页面时,还是要优先使用具体的页面,可见具体的页面优先级最高。
在明确了 index.php 是一套 WP 主题的核心之后,我们就可以将制作 WP 主题的过程简单地分成两步,即--定义主模板文件 index.php 和派生其他模板文件。
定义主模板文件 index.php从页面布局的角度上,有必要将主模板文件 index.php 拆分成 header.php、sidebar.php 和footer.php 三个子页面。WP 专门为在 index.php 中包含这三个子页面提供了对应的get_header()、get_sidebar() 和 get_footer() 函数。
下面,就来详细介绍一下制作 index.php 页面的过程:
首先,建立一个 myThemes文件夹,在文件夹中建立一个文本文件并将其重命名为 index.php,
然后再建立一个 style.css 文件(内容暂时留空)。
然后,用你喜欢的文本编辑器DW打开 index.php 并输入下列代码(最好复制,因为这一部分不重要):
; charset=” />
” />
” type=”text/css” media=”all” />
/print.css” type=”text/css” media=”print” />
RSS Feed” href=””/>
” />
显然,这是一些构成网页文件的 HTML 代码,当然其中包含 PHP 代码。如前所述,
HTML 代码定义结构,而 PHP 代码用于生成内容。
在 WP 后台的“主题”模块中,选择 myTheme 主题。然后,在浏览器中观察你的 WP 外观。此时,应该显示页面一片空白。但通过“查看源文件”,你会发现 index.php 中的 PHP 代码已经生成了一些头部内容。
接着,我们开始动手定义 index.php 中 body 部分的结构和内容。
(一)构建 header在 body 元素内,新建如下结构化标记元素,注意各元素都带有不同的 id 属性:
然后,在该
元素的两个标签之间输入下列代码:”title=””>
这里用到了 WP 内置的 bloginfo 函数来生成内容,其中:
bloginfo(’url’)返回网站主页链接; bloginfo(’name’)返回网站标题;
bloginfo(’description’)返回网站描述。 保存 index.php 文件,然后在浏览器中按 F5 刷新一下页面,看能看到什么?再通过“查看源文件”,核对一下由 WP 的 bloginfo() 函数生成的相关信息。
(二)构建 content在
中,我们要通过循环显示博文,包括每个博文的标题、作者、发表日期以及其他相关信息。并且,可以分页显示博文(取决于 WP 后台的设置)。 首先,在
看似复杂,其实不然。首先:
这三行,在 WP 中表示 if 控制结果。注意,if 语句通过测试 have_posts() 函数来测试是否存在博文。而
这两行,是 WP 中的 while 循环。其中,while 语句通过测试 have_posts() 决定是否调用 the_post()函数。如果