编辑“WordPress主题开发”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress开发文档|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
本文主要介绍如何开发制作自己的WordPress主题，是对开发主题、编写主题代码的技术性讨论，而不是如何下载新主题或怎样激活主题，如果希望了解如何下载、使用主题，请参考[[使用WordPress主题]]。

开发WordPress主题可以做个人使用，也可以发布自制主题给所有WordPress用户使用。
==为什么要开发WordPress主题？==
WordPress主题由一系列文件和样式表单组成，这些文件和样式表单共同作用生成WordPress网站的外观。每个主题都不同，用户可以通过这些主题随心所欲地更换自己网站的外观。那么为什么我们要自己开发[http://www.wordpress.la/theme.html WordPress主题]呢？

*为自己的WordPress网站打造独一无二的外观 
*利用模板、模板标签和WordPress Loop创作不同的网页表现形式和网站外观 
*为网站特殊功能如类别页面和搜索结果页面提供其它模板 
*轻松切换两种网站外观设计，或利用主题、样式转换器来改变网站外观 
*设计WordPress主题，然后公开发布，让大家都看到自己的作品 

WordPress主题也有很多好处：
*主题将样式表单和模板文件从系统文件中独立出来，这样网站升级时就不会对网站的视觉外观造成大幅影响 
*每个主题的呈现样式和网页布局都是独一无二的 
*通过主题更换，WordPress网站可以快速改变其外观 
*用户再也不必为了让网站表现得清新自然而清除CSS、[[HTML]]、PHP代码 

我们自己开发WordPress主题原因还在于：
*这是一个深入学习CSS、HTML/XHTML、[[PHP]]的好机会 
*同时也是一个积累[[CSS]]、HTML/[[XHTML]]、PHP实践经验的机会 
*开发主题可以发挥人的创造性 
*开发主题是一个充满乐趣的过程（大部分时候） 
*将主题公开发布，与其他用户分享自己的劳动成果，回馈WordPress社区 
==剖析主题==
WordPress主题被保存在wp-content/themes/中。所有主题的样式表单文件、模板文件、可选函数文件（functions.php）以及图片文件都存放在themes文件夹中。例如，名称为“test”的文件应该存储在wp-content/themes/test/中。

安装WordPress时系统默认配置两个主题，主题Classic和主题Default。这两个主题类型不同，生成页面显示结果使用的也是不同的函数和标签。用户可以仔细研究这两个主题的文件，为自己创建主题文件打下基础。

WordPress主题由三种主要文件与若干图片组成。第一种文件是样式表单style.css，style.css决定网页的外观。第二种是可选函数文件functions.php。还有一种则是模板文件，模板文件决定网页显示信息的生成方式。下面我们逐个分析这些文件。

==主题样式表单==
样式表单style.css不仅要提供主题的[[]CS]S样式信息，同时也必须以注释形式提供主题的详细信息。所有主题在注释头中列出的信息都必须是唯一的，不能与其它主题相同。相同的注释头信息会导致主题选择对话框运行出错。仿照已有主题时，注意更改注释头信息。

下面是一个样式表单的前几行代码，也就是样式表单的“页眉”部分，假设其中的主题名为“Rose”：

 /*   
 Theme Name: Rose
 Theme URI: the-theme's-homepage
 Description: a-brief-description
 Author: your-name
 Author URI: your-URI
 Template: use-this-to-define-a-parent-theme--optional
 Version: a-number--optional
 .
 General comments/License Statement if any.
 .
 */
这是一个简单的主题，主题只有一个style.css文件，可能还有若干图片（如果存在图片）。为了创建这样的主题，用户首先要编辑模板文件，指定一系列模板供主题继承使用。例如，如果希望 主题“Rose” 从主题“test”中继承模板， 可以在Rose主题的style.css文件的代码开始部分加上 Template: test。

这表示，“test” 是“Rose”的父模板， “Rose” 只由一个style.css文件和若干相应的图片构成，这些文件和图片都被存储在wp-content/theme/Rose文件中。此外（从WordPress 2.7起，） 子主题中也可包含模板文件，用户可以在控制板中将模板文件选项设为normal，若子主题的模板文件与父主题的模板文件名相同，子主题模板文件会改写父主题模板文件。

WordPress利用style.css文件中的注释头代码来验证某个主题，然后将该主题作为可用主题与其它所有已安装主题共同显示在[http://www.wordpress.la/codex-%E8%AE%A4%E8%AF%86WordPress%E7%AE%A1%E7%90%86%E9%9D%A2%E6%9D%BF.html 管理面板]>外观>主题中。

注意：定义父主题时，请务必在注释头Template部分使用style的文件名。例如，如果要使用WordPress默认主题（Default）的父模板，编写代码时应该使用Template: default，而不是Template: WordPress Default，Default是主题的文件名。

==主题函数文件==
主题可以使用函数文件，该函数文件的文件名为functions.php，位于主题的子目录中。functions.php的功能类似于插件，如果使用的主题中有functions.php文件，WordPress初始化（管理界面和其它界面）时会自动加载该文件。functions.php文件的建议用法如下：
*定义主题模板文件中使用的函数 
*生成管理界面，让用户选择主题的颜色、风格以及其他样式 
WordPress默认主题“Default”中带有一个定义函数的functions.php文件和一个管理界面，用户可以作为学习示例。在WordPress手册的“[http://www.wordpress.la/codex-%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0.html 常用函数]”中可以查到更多functions.php文件的相关信息。

==主题模板文件==
模板是一种用来生成用户所请求页面的PHP源文件。

WordPress允许用户为网站不同部分定义不同的模板；但即使网站不完全拥有这些不同的模板也可以正常运行。系统根据[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E5%B1%82%E7%BA%A7.html 模板层级]与特定主题中的可用模板来选取并生成模板。主题开发人员可以规定使用模板所执行的总定制数量。例如在某种极端的情况下，可能只能用index.php这一个模板文件作为网站生成的所有页面的模板。普通情况下，用户使用不同的模板文件生成不同页面，这样可以达到最佳自定义效果。

==基本模板==
一个WordPress主题至少包括两个文件：
*style.css 
*index.php 
这些文件都位于主题文件中。index.php模板文件灵活易用，可以存储关于页眉、侧边栏、页脚、内容、类别、查找、错误以及访问者请求的页面的所有引用信息。index.php还可以划分成模块化的模板文件，每个模块分担部分系统任务。用户不指定模板文件时，WordPress会使用内置的默认文件。例如，如果用户没有comments.php 或comments-popup.php模板文件，WordPress会自动通过模板层级选择wp-comments.php 以及 wp-comments-popup.php模板文件进行操作。这些默认模板未必能够完全配合用户的主题，因此用户的最佳选择是指定一个自己的模板文件。可以用来划分（划分内容存储在主题文件中）的常用文件包括：
*header.php 
*sidebar.php 
*footer.php 
*comments.php 
*comments-popup.php 
通过这些模板文件模块，用户可以在Index.php主文件中添加各种模板标签，从而调用这种模块化的单元组件，让各个组件显示在最终生成的页面上。
*用模板标签[http://www.wordpress.la/codex-%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0-get_header%28%29.html get_header()] 调用页眉 
*用模板标签[http://www.wordpress.la/codex-%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0-get_sidebar%28%29.html get_sidebar()]调用侧边栏 
*用模板标签[http://www.wordpress.la/codex-%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0-get_footer%28%29.html get_footer()]调用页脚 
下面是这种调用的示例：
 <?php get_sidebar(); ?>    
 <?php get_footer(); ?>  
在模板中有更多关于不同[http://www.wordpress.la/codex-WordPress%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6.html 模板]的运行方式以及信息生成方式的相关信息。

==基于查询的模板==
WordPress可以为不同的查询类型加载不同模板。有两种方法可以实现这一效果：一种是使用内置模板层级，另一种是在模板文件的[http://www.wordpress.la/codex-WordPress%E4%B8%BB%E5%BE%AA%E7%8E%AF.html 主循环]中使用条件标签。

用户使用模板层级时需要给出专用模板文件。这些专用模板文件会自动改写Index.php文件。例如，如果用户的主题中有一个名为category.php的模板以及一个需要查询的类别，系统会加载category.php文件而不是index.php文件。category.php文件不存在时按常规使用index.php文件。

使用category-6.php等类似名称的文件能够在[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E5%B1%82%E7%BA%A7.html 模板层级]中获得更为详细的信息。如果要生成一个类别编号为6的页面，系统调用category-6.php文件，而不再使用category.php文件。（在WordPress   2.3与更低版本中，网站管理员可以在<STRONG>管理面板</STRONG>的<STRONG>链接</STRONG>菜单中查找各类别ID，自   2.5版本起，WordPress从控制板中删除了ID一栏，用户可以点击“Edit   Category（编辑类别）”，根据URL地址栏中cat_ID的值来判断类别ID。URL地址栏的显示内容可能类似于'...categories.php?action=edit&amp;cat_ID=3'   ，其中的“3”就是类别ID。）关于类别模板的更多信息参见[http://www.wordpress.la/codex-%E8%AE%BE%E7%BD%AE%E5%88%86%E7%B1%BB%E9%A1%B5%E9%9D%A2.html 设置分类页面]。

如果用户主题对使用模板文件的控制需求超过了对模板层级内容的控制需求，用户可以使用条件标签。条件标签检查WordPress[http://www.wordpress.la/codex-%E8%BF%90%E8%A1%8C%E4%B8%AD%E7%9A%84The%20Loop(%E4%B8%BB%E5%BE%AA%E7%8E%AF).html 主循环]并判断某个指定条件是否为真，然后用户可以根据该条件加载相应模板，或在网页上显示相应信息。

例如要在某篇日志中（日志隶属于某个指定类别）生成一个独特的样式表单，代码可能是这样的：
 <?php
 if (is_category(9)) {
   // looking for category 9 posts
   include(TEMPLATEPATH . '/single2.php');
 } else {
   // put this on every other category post
   include(TEMPLATEPATH . '/single1.php');
 }
 ?>
如果使用查询，代码则是这样的：
 <?php
 $post = $wp_query->post;
 if ( in_category('9') ) {
   include(TEMPLATEPATH . '/single2.php');
 } else {
   include(TEMPLATEPATH . '/single1.php');
 }
 ?>
两种代码会根据所显示的日志类别生成不同模板以供使用。查询条件不仅限于类别查询——[http://www.wordpress.la/codex-%E6%9D%A1%E4%BB%B6%E6%A0%87%E7%AD%BE.html 条件标签]s中介绍了所有查询选项。

==主题模板文件列表==
下面是WordPress主题模板文件的列表。用户的主题中也可能带有其它样式表单、图片或文件，不过下面这些文件在WordPress中都有着特殊意义。

*style.css:主样式表单。主题中必须包含style.css文件，而style.css文件中必须含有主题的注释头信息。
*index.php:主模板。如果用户使用的主题有自己的模板，必须具备index.php文件。
*comments.php:注释模板。如果用户使用的主题没有comments.php文件，可使用WordPress默认主题“Default”的comments.php文件。
*comments-popup.php:弹出式注释模板。如果用户使用的主题没有comments-popup.php文件，可使用WordPress默认主题“Default”的comments-popup.php文件。
*home.php:主页模板
*single.php:单篇日志模板。用于查询某篇日志。该模板文件和其它查询模板文件不存在时，可用index.php文件代替。
*page.php:页面模板。用于查询某个单独页面。
*category.php:类别模板。用于查询某个类别。
*author.php:作者模板。用于查询作者。
*date.php:日期/时间模板。用于查询日期或时间。详细划分到年、月、日、时、分、秒。
*archive.php:存档模板。用于查询类别、作者或日期。注意：category.php与date.php可能会为各自的查询类型改写archive.php文件。
*search.php:搜索结果模板。用于执行搜索。
*404.php:404“页面未找到”模板。WordPress无法查找到匹配查询的日志或页面时，使用404.php文件。

在WordPress中这些文件都有特殊意义，当相应的条件标签（即 is_*(); 函数）返回的值为true时，根据模板层级，这些文件可在不同情况下替代index.php文件。例如，假设网页上只要求显示一篇日志，如果[http://www.wordpress.la/codex-%E6%9D%A1%E4%BB%B6%E6%A0%87%E7%AD%BE.html is_single()] 函数返回“true”，并且当前主题中有single.php文件，WordPress会用该模板文件来生成所请求页面。

==从模板中引用文件==
WordPress默认主题Default（基于WordPress 1.2的主题Kubrick布局，开发者 Michael Heilemann）极好地向我们展示了查询映射到模板上的过程。

代码 <?php bloginfo('template_directory'); ?>将模板文件的URL路径插入模板输出结果。用户可以在输出结果中添加各种URI信息，以便为主题引用文件。

代码<?php bloginfo('stylesheet_directory'); ?>将包含当前主题样式表单的文件路径插入模板输出结果。用户可以在输出结果中添加各种URI信息，为主题引用文件。（该代码目前已禁用，由 <?php bloginfo('stylesheet_directory'); ?> 替代。）

常量TEMPLATEPATH是对当前主题模板文件的绝对路径（路径后没有结尾斜线/）的引用。

注意：用在样式表单中的URI都是样式表单的相对URI，而不是引用样式表单的页面的URI。这样避免了在[[CSS]]文件中调用PHP代码来指定文件。例如，如果用户在主题中调用images/文件，只需要在CSS中指定相对文件，如：
 h1 { background-image: URL(images/my_background.jpg); }
这是一个用URI在模板中引用文件的典型例子， 如此一来，模板就不需要完全依赖于绝对路径了。

==从模板中引用文件==
WordPress默认主题Default（基于WordPress 1.2的主题[http://binarybonsai.com/wordpress/kubrick/ Kubrick]布局，开发者 Michael Heilemann）极好地向我们展示了查询映射到模板上的过程。

代码 <?php bloginfo('template_directory'); ?>将模板文件的[[URL]]路径插入模板输出结果。用户可以在输出结果中添加各种URI信息，以便为主题引用文件。

代码<?php bloginfo('stylesheet_directory'); ?>将包含当前主题样式表单的文件路径插入模板输出结果。用户可以在输出结果中添加各种URI信息，为主题引用文件。（该代码目前已禁用，由 <?php bloginfo('stylesheet_directory'); ?> 替代。）

常量TEMPLATEPATH是对当前主题模板文件的绝对路径（路径后没有结尾斜线/）的引用。

注意：用在样式表单中的URI都是样式表单的相对URI，而不是引用样式表单的页面的URI。这样避免了在[[CSS]]文件中调用PHP代码来指定文件。例如，如果用户在主题中调用images/文件，只需要在CSS中指定相对文件，如：
 h1 { background-image: URL(images/my_background.jpg); }
这是一个用URI在模板中引用文件的典型例子， 如此一来，模板就不需要完全依赖于绝对路径了。

==自定义模板==
用户可以利用WordPress插件系统以及template_redirect来定制用户自己设计的模板。在插件API中可以找到更多制作插件的信息。

'''插件API 钩子'''

如果可能会用到某个WordPress插件，那么开发主题时请记住不要让你所制作的主题和插件产生冲突。插件通过“Action Hooks（运行的钩子）”为WordPress增加各种附加功能。大多数Action Hooks都在WordPress的核心[[PHP]]代码中，因此用户的主题即使没有关于这些hooks的标签，这些Action Hooks也可以正常运行。尽管如此，为了能让插件在页眉、页脚、侧边栏或页面的正文部分直接显示信息，主题中需要配备少量Action Hooks。下面我们列出这些必备的Action Hook 模板标签：

'''wp_head'''

运行于主题的<head> 元素中； header.php 模板。示例插件作用：添加[[JavaScript]]代码。

用法：
 <?php do_action('wp_head'); ?>
-或- 
 <?php wp_head(); ?>
 
'''wp_footer'''

运行于主题的“页脚”中；footer.php模板。示例插件作用：在页脚下方即所有代码的结尾部分插入[[PHP]]代码。

用法：
 <?php do_action('wp_footer'); ?>
-或-  
 <?php wp_footer(); ?> 
'''wp_meta'''
运行于主题菜单或侧边栏的 < li>Meta</li> 区域；sidebar.php模板。示例插件作用：调用轮转公告或标签云。

用法：
 <?php do_action('wp_meta'); ?>
-或-  
 <?php wp_meta(); ?> 

'''comment_form'''

运行于comments.php 以及comments-popup.php中，评论表关闭标签（</form>）前。示例插件作用：显示评论预览。

用法：
 <?php do_action('comment_form', $post->ID); ?>

在实际应用中，默认主题模板中包含了这些插件hooks。

==主题开发总结性原则==
确保主题文件符合以下要求（README文件可以帮助很多主题使用者解决遇到的问题）：
#准确描述所开发的主题和模板文件能够达到的效果
#坚持标准主题层级的命名约定
#如果主题有任何缺陷，请明确标识
#如果模板文件和样式表单文件有任何改动，请在注释中加以说明。为所有修改内容、模板、[[CSS]]样式以及交叉性模板文件添加注释。
#如果主题开发者有任何特殊要求（如希望使用该主题的用户怎样定制改写规则，或怎样使用某些特定模板、图片或文件），请仔细地说明相关步骤，以使用户能够成功使用主题。
#主题开发者需要在不同的浏览器上测试自己开发的主题，了解用户可能遇到的问题
#在主题文件中附带自己的联系信息（个人网址或[[电子邮件]]），方便用户遇到问题时咨询开发者。

==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|Z]]
[[category:WordPress网站开发|Z]]
[[category:WordPress开发文档|Z]]