Codex tools: Log in
Languages: English • 日本語 • Русский • 中文(简体) • 中文(繁體) • (Add your language)
Contents |
本文介绍如何开发设计你自己的 WordPress 主题。如果你希望了解更多如何安装和应用主题的内容，请参阅应用主题文档。本文的内容不同于应用主题，因为所讨论的是编写代码去构建你自己的主题的技术内容，而非怎样去激活主题或者是哪里可以获得新主题。
WordPress主题由一系列文件和CSS样式表构成，构成了一个美丽的WordPress网站。每个主题都是不同的， 这样WordPress用户就可以随时更改WordPress网站的外观。 你也许想为自己开发 WordPress 主题，或者制作公开发行的的主题。但是除了这个为什么要自己制作主题呢?
WordPress主题有很多优点.
为什么要自己制作主题呢？这才是问题的关键.
WordPress 主题应该按照如下标准开发:
WordPress主题目录位于 wp-content/themes/。主题的目录拥有所有样式文件， 模板文件， 一些函数 (functions.php)， 图片等。比如说一个叫做 "zhuti"的主题就会放在 wp-content/themes/zhuti/目录里。请避免使用数字名字，这可能会导致无法正常显示出来。
WordPress每一个发行版都会有一个默认的主题。请认真查看默认的主题，这样可能会对制作你自己的主题有帮助。
WordPress 主题除了图片和JavaScript，经常由三种文件构成.一种是样式表style.css， 控制着页面的外观. 第二个是函数(functions.php)。另一种是 模板文件，它控制着从数据库中调出的数据所呈现的外观。让我们单独看一下。
CSS文件不仅列出了一些主题的样式设计， style.css 必须 以注释的形式列出主题的详细信息 两个不同的主题是不允许拥有相同的表述的 ， 因为这样会导致主题选择出错.如果你通过拷贝一个你已经制作的主题来制作你新的主题， 请确保现更改这些头部注释.
下面是CSS头部注释的例子，被称作style sheet header，比如主题叫做 "Twenty Ten":
/* Theme Name: Twenty Ten Theme URI: http://wordpress.org/ Description: The 2010 default theme for WordPress. Author: the WordPress team Version: 1.0 Tags: black， blue， white， two-columns， fixed-width， custom-header， custom-background， threaded-comments， sticky-post， translation-ready， microformats， rtl-language-support， editor-style， custom-menu (optional) General comments and license statement (optional). */
这些位于style.css里的文件是必须要写的，这是用来区分安装的主题.
最简单的主题可能是子主题，其仅仅包含一个style.css文件，也可以加上一些图片。之所以它能工作是因为它是以另一个主题为基础进行工作的。
更多关于子主题的信息，请看Child Themes或者由op111写的不错的教材。
一个主题可以使用functions 文件，位于主题的子目录，叫做 functions.php. 这个文件就像一个插件， 如果它位于你正在使用的主题里的话， 他在你的主题初始化的时候就会自动加载(后台和前台都一样加载).对于这个文件的建议:
默认的WordPress的主题包含一个functions.php文件，它定义这些功能很多，所以你可能会把它当做参考.既然functions.php基本上可以作为一个插件，所以Function_Reference可以让你更多的了解这个函数，以及你可以怎么利用这些函数.
模板 是一些PHP文件，他可以输出HTML代码呈献给浏览器，决定着主题的外观.下面让我们来看一下主题的模板.
WordPress允许为你的网站定义不同的模板.他虽然不是必需的，但是这些不同的模板为你的网站添上一笔. 模板是根据Template Hierarchy的，由一个具体的主题决定.
作为一个主题开发者，你可以自由决定如何定制你的模板.比如说，极端情况下， 你甚至可以仅仅使用一个文件index.php作为模板文件，所有 页面都会使用这个模板.更多的情况是，使用不同的模板文件产生不同的结果，以达到最大定制.
这里是被WordPress确认的主题文件列表.当然，你的主题可以包含任何样式表，图像或者文件.记住 下面列出的文件对WordPress有特殊的意义-- 点击Template Hierarchy 查看具体情况.
这些文件在WordPress中有特殊的意义Template Hierarchy，即当对应的条件标签Conditional Tag返回'true'的时候，他们将在这种情况下代替index.php ，例如，如果当前显示的是单一的一篇博文，那么is_single() 这个函数将返回'true'，并且，如果有一个single.php文件存在于当前主题中，该文件模板就将起作用.
在最简单的情况下，一个WordPress主题由两个文件构成：
这些文件都位于主题目录. 这index.php 模板 是非常灵活的.他可以用来包含所有的引用 header， sidebar， footer， content， categories， archives， search， error， 和其它在WordPress产生的文件.
或者，他也可以模块化，使用单独的文件分担工作.如果你没有提供其它的模板文件，WordPress 会使用默认文件.比如说，如果你没有提供comments.php 文件， WordPress会自动使用 wp-comments.php 模板文件 Template Hierarchy. (Note: As of version 3.0， the default files aren't guaranteed to be present or to be the same as they have been. It's much safer to supply your own template files.)
典型的模板文件包括：
使用这些模板文件，你可以把这些文件嵌入到index.php 中，最后生成的文件里.
include 用法:
<?php get_sidebar(); ?> <?php get_footer(); ?>
关于更多的如何利用各种模板，如何产生不同的信息， 请阅读 Templates 文档.
WordPress can load different Templates for different query types. There are two ways to do this: as part of the built-in Template Hierarchy， and through the use of Conditional Tags within The Loop of a template file.
To use the Template Hierarchy， you basically need to provide special-purpose Template files， which will automatically be used to override index.php. For instance， if your Theme provides a template called category.php and a category is being queried， category.php will be loaded instead of index.php. If category.php is not present， index.php is used as usual.
You can get even more specific in the Template Hierarchy by providing a file called， for instance， category-6.php -- this file will be used rather than category.php when generating the page for the category whose ID number is 6. (You can find category ID numbers in Manage > Categories if you are logged in as the site administrator in WordPress version 2.3 and below. In WordPress 2.5 the ID column was removed from the Admin panels. You can locate the category id by clicking 'Edit Category' and looking on the URL address bar for the cat_ID value. It will look '...categories.php?action=edit&cat_ID=3' where '3' is the category id). For a more detailed look at how this process works， see Category Templates.
If your Theme needs to have even more control over which Template files are used than what is provided in the Template Hierarchy， you can use Conditional Tags. The Conditional Tag basically checks to see if some particular condition is true， within the WordPress Loop， and then you can load a particular template， or put some particular text on the screen， based on that condition.
For example， to generate a distinctive stylesheet in a post only found within a specific category， the code might look like this:
<?php
if ( is_category( '9' ) ) {
get_template_part( 'single2' ); // looking for posts in category with ID of '9'
} else {
get_template_part( 'single1' ); // put this on every other category post
}
?>
Or， using a query， it might look like this:
<?php
$post = $wp_query->post;
if ( in_category( '9' ) ) {
get_template_part( 'single2' );
} else {
get_template_part( 'single1' );
}
?>
In either case， this example code will cause different templates to be used depending on the category of the particular post being displayed. Query conditions are not limited to categories， however， see the Conditional Tags article to look at all the options.
It is possible to use the WordPress plugin system to define additional templates that are shown based on your own custom criteria. This advanced feature can be accomplished using the template_redirect action hook. More information about creating plugins can be found in the Plugin API reference.
To load another template (other than header， sidebar， footer， which have predefined included commands like get_header()) into a template， you can use get_template_part(). This makes it easy for a Theme to reuse sections of code.
When referencing other files within the same Theme， avoid hard-coded URIs and file paths. Instead reference the URIs and file paths with bloginfo(): see Referencing Files From a Template.
Note that URIs that are used in the stylesheet are relative to the stylesheet， not the page that references the stylesheet. For example， if you include an images/ directory in your Theme， you need only specify this relative directory in the CSS， like so:
h1 {
background-image: url(images/my-background.jpg);
}
开发主题的时候，需要注意的是你的主题最好能和用户可能安装的任何插件共存。插件可以通过“动作钩子（Action Hooks, 查看 Plugin API）”为wordpress增加功能。
大部分Action Hooks存在于wp的php核心中，所以你的主题不需要任何多余的特殊标签来让它可以正常运转。但是少数的Action Hooks需要在你的主题中做特殊处理，以使插件能够将头，尾，侧边栏等信息输出到页面中。如下是你需要包含到主题 中的Action Hooks列表：
For a real world usage example， you'll find these plugin hooks included in the default Theme's templates.
You should escape dynamically generated content in your Theme， especially content that is output in HTML attributes. As noted in WordPress Coding Standards， text that goes into attributes should be run through esc_attr so that single or double quotes do not end the attribute value and invalidate the XHTML and cause a security issue. Common places to check are title， alt， and value attributes.
In a few cases there might already be a template tag for common cases where safe output is needed. One such case involves the "title" attribute when used with the_title() for post and page titles. To avoid a security vulnerability， use the_title_attribute() instead. Here's an example of correct escaping for the title attribute in a post title link when using translatable text:
<?php echo esc_attr( sprintf( __( 'Permanent Link to %s'， 'theme-name' )， the_title_attribute( 'echo=0' ) ) ); ?>
Replace deprecated escape calls with the correct calls: wp_specialchars， htmlspecialchar with esc_html， clean_url with esc_url， and attribute_escape with esc_attr. See Data_Validation for more.
为了保证本地化翻译的顺利进行，使用 gettext 函数包裹所有需要被翻译的文字部分。这是翻译工作变得十分简单。更多资料请访问 WordPress_Localization i18n for WordPress Developers.
使用以下标签标签增加 WordPress系统产生的 class 属性， body，post 和 comment 标签。 关于post class，只能位于The Loop.
当开发一个主题的时候，检查你的模板文件是不是遵守了这些标准。
这里是一份格式正确的 HTML5 头部:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> </head>
比如：
<?php wp_footer(); ?> </body> </html>
<h2><?php printf( __( 'Search Results for: %s' )， '<span>' . get_search_query() . '</span>'); ?></h2>
<script type="text/javascript"> /* <![CDATA[ */ // content of your Javascript goes here /* ]]> */ </script>
为你的主题做一个预览，并且名字命名为screenshot.png，放在主题目录下。预览一定是真实的预览效果，而且是 PNG 或者 JPG 格式的。
主题可以自由的包含是否有选项设置页面。参考 [1].
当增加选项页面的时候使用 edit_theme_options 而不是 switch_themes 选项面板， unless the user actually should be able to switch Themes to be able to use your options panel. WordPress itself uses the edit_theme_options capability for menus， background， header， widgets， et cetera. See more at Roles and Capabilities and Adding Administration Menus.
A note about network mode and Theme options:
If you are using the edit_themes capability anywhere in your Theme， and the Theme is running on a network-enabled WordPress install (previously WordPress MU)， be aware that the edit_themes capability used for accessing Theme options pages will prevent site admins in a network from seeing the options menu. Use edit_theme_options instead.
参考Deprecated Functions Hook for more information.
以下是有关WordPress主题和模板文件的推荐文章清单：
主题制作全教程 By Ludou
wordpress主题制作教程 By 站长百科
WordPress 主题教程：从零开始制作 WordPress 主题 By 我爱水煮鱼
