Languages: বাংলা • English • Español • 日本語 한국어 • Português do Brasil • Русский • ไทย • 中文(简体) • 中文(繁體) • (Add your language)
本文將介紹如何開發、設計 WordPress 主題。如果您先了解更多關於安裝與使用主題的部分，，請參閱使用佈景主題。本文的內容與使用佈景主題不同，因為這裡所討論的是透過編寫程式碼來建立專屬您的主題這樣的技術內容，而非如何去開啟主題或者是告訴您哪裡可以獲得新主題。
WordPress 布景主題是由一系列的檔案互相配合，構成一個富有美感以及實用性的 WordPress 網站。每個主題不盡相同，這也提供了站長能立即變更網站樣式的多樣化選擇。
您可能也想試著製作一個布景主題給自己用、給客戶的案子用，或是提交到WordPress佈景主題目錄。那麼為什麼您要自己動手做布景主題呢？
WordPress 主題也有很多優點。
為什麼要自己製作主題呢？這個問題比較重要。
WordPress 主題應該按照如下標準開發：
WordPress 主題放在 wp-content/themes/ 。主題的子資料夾中包含了主題的樣式表檔案、範本檔，以及選擇性功能檔案(functions.php) 、JavaScript 檔案以及圖片。例如：一個名叫「taiwan」的主題會放在 wp-content/themes/taiwan/ 資料夾中。請避免使用數字來為主題命名，因為這可能會導致該主題不在可用主題列表中顯示。
新安裝的 WordPress 包含了預設的主題。請仔細看一下預設主題中檔案，這樣您才會更加瞭解如何建立您自己的主題。
關於視覺指南的部分，請參考infographic on WordPress Theme Anatomy(英文)。
除了圖片和 JavaScript 之外，WordPress 主題通常會由三種類型的檔案構成。
接著，讓我們一個個瞭解這些檔案。
子主題可能是最簡單的主題，只包含了一個 style.css 檔案，加上任一圖片。這是可行的，因為它是另一個上級主題的「子」主題。
關於子主題的詳細指南，請參考子主題(英文)。
CSS 樣式表中除了提供主題的樣式設計，style.css 中也會以註釋的方式寫出該主題的詳細資訊。 樣式表必須以註釋的方式提供該主題的詳細資訊。 兩個主題的檔案標頭中不可以有相同的資訊，因為這會導致主題選擇出問題。 如果您是透過複製一個現有的主題來製作的，您必須先更改這些資訊。
下面是一個範例主題「Twenty Thirteen」的樣式表中開始的幾行，叫做樣式表標頭：
/* Theme Name: Twenty Thirteen Theme URI: http://wordpress.org/themes/twentythirteen Author: the WordPress team Author URI: http://wordpress.org/ Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready Text Domain: twentythirteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
註：作者名稱建議與 wordpress.org 的使用者名稱相同，但您也可以使用真實姓名。這是由主題作者自己選擇的。
請注意以可用標籤列表中的項目來描述該主題。這可以讓使用者通過標籤篩選器來找到您的主題。這個是完整的可用標籤列表。
style.css 的標頭必須要註釋掉，這樣才能使 WordPress 知道這是一個主題，並在管理面板中的 設計>主題 中將其與其它已安裝的主題一起顯示為可用的選項。
（譯者註：原文Print-friendly 就是指在列印的時候能夠只列印出必要資訊，而忽略掉其它不必要的元素，例如我們列印您現在看的這個文件，右邊的Views ，Toolbox 這類的以及網頁頂部導航列的部分都不印出，這就叫Print-friendly 。）
一個主題可以使用 functions 檔，位於主題的子目錄，檔名為 functions.php。該檔案就如同擴充套件一般，如果其位於您現在使用的主題中，主題初始化時就會自動將其加載（無論管理頁面或外部頁面）。這個檔案有這些作用：
預設的 WordPress 主題包含一個 functions.php 檔案，其定義了眾多這樣的功能，所以您可能會想參考它。既然基本上我們可以把 functions.php 看作一個擴充套件，因此函數參考可以讓您更瞭解該函數以及如何使用。
Note for deciding when to add functions to functions.php or to a specific plugin:
You may find that you need the same function to be available to more than one parent theme. If that is the case, the function should be created in a plugin instead of a functions.php for the specific theme. This can include template tags and other specific functions. Functions contained in plugins will be seen by all themes.
範本 是一些PHP檔，他可以輸出HTML代碼呈獻給流覽器，決定著主題的外觀.下麵讓我們來看一下主題的範本.
WordPress允許為你的網站定義不同的範本.他雖然不是必需的，但是這些不同的範本為你的網站添上一筆. 範本是根據Template Hierarchy的，由一個具體的主題決定.
作為一個主題開發者，你可以自由決定如何定制你的範本.比如說，極端情況下， 你甚至可以僅僅使用一個檔index.php作為範本檔，所有 頁面都會使用這個範本.更多的情況是，使用不同的範本檔產生不同的結果，以達到最大定制.
這裏是被 WordPress 確認的佈景主題檔列表。當然，你的佈景主題可以包含任何樣式表、圖像或者檔案。記住，下面列出的檔案對 WordPress 具有特殊的意義 -- 點擊Template Hierarchy 查看具體情況.
這些檔在 WordPress 中有特殊的意義，他們在合適的情況下代替index.php Template Hierarchy， and when the corresponding Conditional Tag returns true. For example， if only a single post is being displayed， the is_single() function returns 'true'， and， if there is a single.php file in the active Theme， that template is used to generate the page.
在最簡單的情況下，一個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);
}
When developing Themes， it's good to keep in mind that your Theme should be set up so that it can work well with any WordPress plugins users might decide to install. Plugins add functionality to WordPress via "Action Hooks" (see Plugin API for more information).
Most Action Hooks are within the core PHP code of WordPress， so your Theme does not have to have any special tags for them to work. But a few Action Hooks do need to be present in your Theme， in order for Plugins to display information directly in your header， footer， sidebar， or in the page body. Here is a list of the special Action Hook Template Tags you need to include:
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 以獲得夠多的資訊。
以下是有關WordPress主題和範本檔的推薦文章清單：
主題製作全教程 By Ludou
wordpress主題製作教程 By 站長百科
WordPress 主題教程：從零開始製作 WordPress 主題 By 我愛水煮魚