本文介紹如何開發設計你自己的 WordPress 主題，所討論的是編寫代碼去構建你自己的主題的技術內容。

為什么要使用 WordPress 主題

WordPress 主題由一系列文件和 CSS 樣式表構成，構成了一個美麗的 WordPress 網站。每個主題都是不同的， 這樣WordPress用戶就可以隨時更改 WordPress 網站的外觀。

你也許想為自己開發 WordPress 主題，或者制作公開發行的的主題。但是除了這個為什么要自己制作主題呢?

• 創建自己獨特的 WordPress 主題外觀.
• 利用模板， 模板標簽， 和 WordPress循環 來產生不同的效果.
• 為了產生不同的效果，比如在category pages頁面和搜索結果頁面產生個性的效果.
• 為了迅速從兩個主題改變你的博客外觀，可以充分利用 Theme or style switcher 這個插件迅速改變外觀.
• 設計 WordPress 主題，這樣大家就可以通過網絡更好的使用你的作品.

WordPress 主題有很多優點

• WordPress 主題把CSS樣式表和 模板文件 從系統中獨立出來，所以這樣升級博客的時候就不會破壞你的主題樣式。
• 允許你自由的定制主題樣式。
• 允許你迅速改變主題。
• 你甚至都不需要學習HTML，CSS，PHP等，即可擁有一個美觀的主題。

為什么要自己制作主題呢？這才是問題的關鍵.

• 這是一個學習 CSS，HTML，和PHP的好機會.
• 這是一個積累你的 CSS，HTML，PHP實踐經驗的的機會.
• 制作主題的過程中充滿創造力.
• 這非常的有趣（大多數情況下）.
• 如果你 設計公共主題， 你會感覺非常好，因為你為 WordPress 社區做出了自己的貢獻 (好吧，可以吹牛了～)

主題開發標準

WordPress 主題應該按照如下標準開發:

• 使用結構化的、沒有錯誤的PHP和有效的HTML代碼。請看 WordPress Coding Standards。
• 使用簡潔的、有效的CSS。參見 CSS Coding Standards。
• 遵循設計指南 Site Design and Layout。

主題的剖析

WordPress主題目錄位于 wp-content/themes/。主題的子目錄擁有所有樣式文件、模板文件、可選的函數文件 (functions.php)、JavaScript 文件、圖片等。比如說一個叫做 "test" 的主題就會放在 wp-content/themes/test/目錄里。請避免使用數字名字，這會導致無法在主題列表中正常顯示出來。

WordPress每一個發行版都會有一個默認的主題。請認真查看默認的主題，這樣可能會對制作你自己的主題有幫助。

WordPress 主題除了圖片和JavaScript，經常由三種文件構成。

1. 樣式表文件 style.css， 控制著頁面的外觀
2. 函數文件 (functions.php)。
3. 模板文件，它控制著從數據庫中調出的數據所呈現的外觀。

讓我們單獨看一下。

主題樣式表

CSS文件不僅列出了一些主題的樣式設計， style.css 必須 以注釋的形式列出主題的詳細信息 兩個不同的主題是不允許擁有相同的表述的 ， 因為這樣會導致主題選擇出錯。如果你通過拷貝一個你已經制作的主題來制作你新的主題，請確保先更改這些頭部注釋.

下面是樣式表頭部注釋的例子，被稱作樣式表頭注釋。比如主題叫做 "Twenty Ten":

這些位于style.css里的文件是必須要寫的，這是用來區分安裝的主題。

注意使用不同的標簽來描述你的主題，如果你的主題提交到WordPress官方主題庫，這允許用戶使用標記過濾器找到你的主題。下面是完整的允許的標簽列表。

樣式表指南

• 當創作你的CSS的時候請參考CSS 編碼標準
• 盡可能使用有效地 CSS。作為例外，也可以使用一些前綴，遵循CSS3標準。
• 盡量減少使用CSS hacks。明顯瀏覽器支持(如IE)是個例外，如果可能的話，將CSS hack文件區分開來或者使用獨立的文件。
• 所有的 HTML 元素應該有樣式聲明，無論是文章頁面還是評論部分。
  • Tables， captions， images， lists， block quotes，等等。
• 強烈建議添加打印友好的字體
  • 你能通過使用media="print"屬性來包含一個適用于打印的樣式表文件，或者在你的主樣式表文件中增加一部分專為打印提供的設置。

子主題

最簡單的主題可能是子主題，其僅僅包含一個style.css文件，也可以加上一些圖片。之所以它能工作是因為它是以另一個主題為基礎進行工作的。

更多關于子主題的信息，請看Child Themes。

函數文件

一個主題可以使用一個函數文件，位于主題的子目錄，叫做 functions.php。這個文件就像一個插件， 如果它位于你正在使用的主題里的話， 他在你的主題初始化的時候就會自動加載(后臺和前臺都一樣加載)。對于這個文件的建議：

• 定義你的模板使用的函數.
• 啟用縮略圖功能，如職位，自定義標題和背景，和導航菜單.
• 設置一個選項菜單，讓網站擁有者可以自定義顏色，樣式，和你的主題的其他特性.

默認的WordPress的主題包含一個functions.php文件，它定義這些功能很多，所以你可能會把它當做參考.既然functions.php基本上可以作為一個插件，所以Function_Reference可以讓你更多的了解這個函數，以及你可以怎么利用這些函數.

需要注意的是，如果你要在不同的主題使用同一個功能時，那么請將函數應建立在一個插件上，而不是一個特定主題的functions.php。這樣一來，及時你更換主題，你還是可以通過這個插件實現你想要的功能。

模板文件

模板 是一些PHP文件，他可以輸出HTML代碼呈獻給瀏覽器，決定著主題的外觀。下面讓我們來看一下主題的模板。

WordPress允許為你的網站定義不同的模板。他雖然不是必需的，但是這些不同的模板為你的網站添上一筆。模板是根據模板層次（Template Hierarchy）的，由一個具體的主題決定。

作為一個主題開發者，你可以自由決定如何定制你的模板。比如說，極端情況下， 你甚至可以僅僅使用一個文件index.php作為模板文件，所有 頁面都會使用這個模板.更多的情況是，使用不同的模板文件產生不同的結果，以達到最大定制。

模板文件列表

這里是被WordPress確認的主題文件列表.當然，你的主題可以包含任何樣式表，圖像或者文件。記住 下面列出的文件對WordPress有特殊的意義——點擊模板層次（Template Hierarchy） 查看具體情況。

style.css

主樣式表，這個文件 必須 位于你的主題里面，而且必須在頭部注釋處寫清楚你的主題的信息.

rtl.css

rtl 樣式表。如果網站的閱讀方向是自右向左的，他會自動被包含進來。你可以使用 the RTLer 插件來生成這個文件.

index.php

主模板.如果你的主題使用自己的模板，index.php 是必須要有的.

comments.php

評論模板.

front-page.php

首頁模板，僅用于開啟 靜態首頁 時。

home.php

主頁模板，默認的首頁。如果你開啟了 靜態首頁 這是展現最新的文章的模板頁面。

single.php

單獨頁面模板。顯示單獨的一篇文章時被調用。對于這個以及其他的請求模板，如果模板不存在會使用 index.php。

single-<post-type>.php

自定義單獨頁面模板。例如， single-books.php 展示自定義文章類型為 books的文章. 如果文章類型未被設置則使用index.php。

page.php

頁面模板. 獨立頁面調用。

category.php

分類模板。 分類頁面調用。

tag.php

標簽模板。標簽頁面調用。

taxonomy.php

術語模板。請求自定義分類法的術語時使用。

author.php

作者模板。作者頁面調用。

date.php

日期/時間模板，按時間查詢時使用的模板。

archive.php

存檔模板。查詢分類，作者或日期時使用的模板。需要注意的是，該模板將會分別被category.php， author.php，date.php所覆蓋（如果存在的話）。

search.php

搜索結果模板，顯示搜索結果時使用的模板。

attachment.php

附件模板，查看單個附件時使用的模板。

image.php

圖片附件模板。當在wordpress中查看單個圖片時將調用此模板，如果不存在此模板，則調用attachment.php 模板。

404.php

404 錯誤頁面 模板。當WordPress無法查找到匹配查詢的日志或頁面時，使用404.php文件。

按照Template Hierarchy，這些文件在 WordPress 中有特殊的意義，即當對應的 條件標簽 返回 true 的時候，他們將在這種情況下代替index.php ，例如，如果當前顯示的是單一的一篇博文，那么is_single() 這個函數將返回'true'，并且，如果有一個single.php文件存在于當前主題中，該文件模板就將起作用.

基本模板

在最簡單的情況下，一個WordPress主題由兩個文件構成：

• style.css
• index.php

這些文件都位于主題目錄. 這index.php 模板 是非常靈活的.他可以用來包含所有的引用 header， sidebar， footer， content， categories， archives， search， error， 和其它在WordPress產生的文件.

或者，他也可以模塊化，使用單獨的文件分擔工作.如果你沒有提供其它的模板文件，WordPress 會使用默認文件.比如說，如果你沒有提供comments.php 文件， WordPress會自動使用 wp-comments.php 模板文件 模板層次（Template Hierarchy）. （注：從 3.0 版本開始，默認的文件不能保證是現成的或者相同的。為了安全起見，請使用自己的模板文件。）

典型的模板文件包括：

• comments.php
• comments-popup.php
• footer.php
• header.php
• sidebar.php

使用這些模板文件，你可以把這些文件嵌入到index.php 中，最后生成的文件里.

• 包含header， 使用get_header().
• 包含sidebar， 使用 get_sidebar().
• 包含 footer， 使用 get_footer().
• 包含 search form， 使用 get_search_form().

include 用法:

一些模板函數的默認文件可能被廢棄或不存在，在你的主題，你應該提供這些文件。至于3.0版本以上，不推薦使用位于 wp-includes/theme-compat 的默認文件。例如，你應該提供 header.php 文件讓  get_header() 函數更好地安全工作，以及為 comments_template() 函數提供  comments.php 文件。

關于更多的如何利用各種模板，如何產生不同的信息， 請閱讀 Templates 文檔.

自定義頁面模板

在你的主題目錄中，你可以定義每個頁面的模板。要創建一個新的自定義頁面模板，你必須創建一個文件，比如我們創建一個  snarfer.php 文件，然后將下面的內容添加到這個文件中：

上面的代碼定義了這個 snarfer.php 文件作為“Snarfer”模板。當然，你可以使用其他名稱替換“Snarfer”。此模板的名稱將出現在“主題編輯器”（即：外觀 - 編輯）中，作為編輯這個文件的鏈接。

需要注意的是，你不能使用WordPress默認保留的名字來命名這個文件，因為那些名字是有特殊用途的。你可以查看 WordPress保留的文件名。

上面的代碼只是用來聲明這個模板的，至于這個模板要顯示什么，如何顯示，就要靠你自己添加代碼了。要了解WordPress模板的各種功能，你可以通過 模板標簽 查看介紹。你可能會發現，通過復制一些其他的模板（比如 page.php 或 index.php）的代碼到 snarfer.php，然后添加上面的5行代碼，就可以擁有和其他模板一樣的功能。你就可以在此基礎上對代碼進行二次修改，而不必從頭開始了。一旦你創建好這個模板，請將它添加到你的主題目錄中，這樣，你就可以在創建或編輯頁面的時候，通過“頁面屬性”這個模塊下的“模板”選擇這個模板啦。（注：如果你的主題不存在任何頁面模板，就沒辦法在“頁面屬性”中看到“模板”這個選項）

基于查詢的模板文件

WordPress可以根據不同查詢類型加載不同的模板。你可以通過兩種方法做到這一點：作為內置模板層次（Template Hierarchy）的一部分，并通過使用 條件標簽（Conditional Tag） 在模板文件的 循環 （loop）中加載。

要使用 模板層次，你基本上需要提供特殊用途的模板文件，它會自動覆蓋原來的 index.php 。例如，如果你的主題中提供了一個名為 category.php  的模板文件，但一個分類被查詢時，就會優先加載 category.php 文件取代 index.php ；如果category.php 不存在，就會使用 index.php。

你還可以通過文件的命名獲得一個更具體的模板層次，比如一個名為 category-6.php 的文件，如果查詢的分類ID為 6 ，那么就會優先加載這個 category-6.php 文件取代 category.php 。（要獲得分類的ID，你只需訪問后臺 文章 - 分類目錄，然后點擊編輯任何一個分類下的“編輯”，就可以在URL中看到“categories.php?action=edit&cat_ID=3”這樣的字樣，3 就是ID號）。你可以閱讀 分類模板 了解更多詳情。

如果你的主題需要更好地控制哪些模板文件中提供的 模板層次，你可以使用 條件標簽。通過使用 條件標簽 ，判斷在WordPress循環中哪些條件為真，就加在對應的特定模板，或者顯示對應的內容。

例如，要為一個特定的類別加載一個獨特的樣式表，可以使用類似的代碼：

或者使用一個查詢，例如：

上面例子的2種代碼，都可以根據判斷不同的分類，將不同的模板應用在特定的分類上。查詢條件 不限分類，不過，建議你閱讀 條件標簽 這篇文章查看所有的可用選項。

定義自定義模板

你可以通過使用 WordPress 插件系統來根據自己的標準定義不同的自定義模板?？梢酝ㄟ^使用“template_redirect”這個行動鉤子來實現這個先進的功能。你可以在 插件API 參考 了解過多創建創建的信息。

包括模板文件

要在模板中加載另一個模板（除了 header、sidebar、footer，其中包括有預定義的命令，如 get_header()），你可以使用 get_template_part() 。通過這種方式，可以在主題中重復利用一個代碼片段。

從模板中引用文件

在同一個模板中引用其他文件，避免 硬編碼（hard-coded） 的 URIs 或文件路徑。而應該使用 bloginfo() 引用URIs 或文件路徑：請看 從模板中引用文件。

請注意，在樣式表中的 URIs 是相對于樣式表，而不是相對于引用樣式表的頁面。例如，如果要包含一個 images/目錄到你的主題中，你只需要指定相對目錄中的CSS，像這樣：

插件 API 鉤子

開發主題的時候，需要注意的是你的主題最好能和用戶可能安裝的任何插件共存。插件可以通過“動作鉤子（Action Hooks, 查看Plugin API）”為wordpress增加功能。

大部分Action Hooks存在于wp的php核心中，所以你的主題不需要任何多余的特殊標簽來讓它可以正常運轉。但是少數的Action Hooks需要在你的主題中做特殊處理，以使插件能夠將頭，尾，側邊欄等信息輸出到頁面中。如下是你需要包含到主題 中的Action Hooks列表：

wp_head()

放在<head>標簽之內，在 header.php文件中. 大部分插件常在這里導入javascript文件。

wp_footer()

在footer.php，在</body>標簽之前 . 使用舉例：一些插件會在這里插入要在文檔最后執行的PHP代碼。更常見的用法是插入網頁靜態代碼，比如Google Analytics。

wp_meta()

通常用在主題菜單或側邊欄 sidebar.php 模板文件的 <li>Meta</li> 中。使用舉例：包括一個旋轉的廣告或標簽云。

comment_form()

放在 comments.php ，在文件的結束標簽(</div>)之前。 使用舉例：顯示評論預覽。

主題定制API

在 WordPress 3.4開始，添加了一個新的主題自定義功能，幾乎適用于所有WordPress主題。通過在主題中提供一個支持聲明 add_theme_support() 或者使用 設置API ，就可以自動填充一些選項到主題的定制管理頁面中，同時允許管理員在線實時預覽主題的效果。

主題和插件開發者，如果有興趣添加一些新的選項到主題定制頁面中，可以查看 主題定制API 文檔 和Ottopress.com 網站的教程。

不可信的數據

你應該避免在你的主題中動態生成內容，尤其是在HTML屬性中輸出的內容。正如 WordPress標準編碼文檔 所提及的，在屬性中加載的本文應該使用 esc_attr() 包括，以避免單引號或雙引號結束屬性值和產生無效的XHTML，從而導致安全問題。

常見的安全輸出情況下，需要有一些特殊的模板標簽。在這種情況下，輸出一個標題屬性，應該使用the_title_attribute() 而不是 the_title() ，這樣才能避免安全問題。下面來看一個例子，正確轉義一篇文章標題鏈接的標題屬性：

使用正確的響應函數替換已經棄用的應該避免的函數：使用 esc_html() 替換 wp_specialchars() 和htmlspecialchars()，使用 esc_url() 替換 clean_url()，使用 esc_attr() 替換 attribute_escape()。查看Data_Validation 了解更多。

翻譯支持/ I18N

為了確保本地語言的平穩過渡，請在主題文件中，使用基于 WordPress  gettext-based i18n 的功能來包裝所有需要翻譯的文本。這樣更有利于將語言包的翻譯掛載到當前網站中。請閱讀 WordPress 本地化 和 I18n for WordPress Developers 了解更多信息。

主題類（Theme Classes）

使用下面的模板標簽來添加WordPress的 body、post、和 comment 的元素屬性。其中 post 類，只適用于在循環（Loop）中的元素。

• body_class()
• post_class()
• comment_class()

模板文件清單

開發你的主題時，請按照下面的標準檢查你的主題模板文件：

頭部文檔（header.php）

• 使用正確的 DOCTYPE.
•  <html> 開始標簽應該包含 language_attributes().
•  <meta> 字符集元素應該放到其他元素的上面，包括 <title> 元素。
• 使用 bloginfo() 設置 <meta> 字符集和description元素。
• 使用 wp_title() 設置 <title> 元素。 查看原因。
• 使用 get_stylesheet_uri() 來獲取當前主題的樣式表文件。
• 使用 Automatic Feed Links 添加 feed 鏈接。
• 添加聲明 wp_head() 到 </head> 結束標簽的前面。插件會使用這個動作鉤子（action hook ）來加載它們的JS、CSS 和其他功能代碼。

下面是一個格式正確的HTML5兼容的頭部區域的例子：

導航菜單（header.php）

主題的主菜單應該支持使用 wp_nav_menu() 的自定義菜單功能：

• 菜單應該支持長鏈接的標題和大量的列表項。不應該打破這些項目的設計或布局。
• 應該正確支持子菜單的顯示?？梢缘脑挘ㄗh通過下來菜單來顯示子菜單，并且支持多級子菜單。

Widgets小工具（sidebar.php）

• 主題應該支持小工具（Widgets），允許一些布局區域（比如側邊欄）掛載小工具（比如標簽云、友情鏈接、分類類表 等）。
• 小工具的應該是可以從 外觀 - 小工具 中進行設置，并且當添加小工具時，原來硬性寫定到小工具區域的默認內容應該被替換。

頁腳（footer.php）

• 在 </body>結束標簽的前面添加 wp_footer() ：

主頁（index.php）

• 通過摘要或全文輸出的方式顯示文章列表。可以根據自己的需要選擇適合的方式。
• 包括 wp_link_pages() ，以便支持在文章中的導航鏈接。

歸檔（archive.php）

• 顯示歸檔名稱（標簽，分類，日期，或作者歸檔）。
• 通過摘要或全文輸出的方式顯示文章列表。可以根據自己的需要選擇適合的方式。
• 包括 wp_link_pages() ，以便支持在頁面中的導航鏈接。

頁面（page.php）

• 顯示頁面標題和內容
• 顯示評論列表和評論表單（除非評論已關閉）
• 包括 wp_link_pages() ，以便支持在文章中的導航鏈接。
• 元數據（如標簽，類別，日期和作者）不應該被顯示。
• 為已登錄的具有編輯權限的用戶顯示一個“編輯”鏈接

文章（single.php）

• 包括 wp_link_pages() ，以便支持在這篇文章中的導航鏈接。
• 顯示文章標題和內容
  • 標題應該是純文本，而不應該添加一個指向自己的鏈接
• 顯示文章日期
  • 尊重日期和時間格式設置，除非是很重要的設計。（用戶可以在 儀表盤>設置>常規，設置時間和日期的格式）
  • 輸出的格式應該基于用戶的設置，使用函數 the_time( get_option( 'date_format' ) )
• 顯示作者的名字（如果適用）
• 顯示文章分類和標簽
• 為已登錄的具有編輯權限的用戶顯示一個“編輯”鏈接
• 顯示評論列表和評論表單
• 使用 previous_post_link() 和 next_post_link()  顯示上一篇和下一篇文章

評論（comments.php）

• 作者的評論應該高亮顯示，以便區分。
• 顯示用戶的 gravatars 頭像（如果適用）
• 支持嵌套評論
• 顯示 引用通告（trackbacks/pingbacks）
• 該文件不應該包含函數的定義，除非使用  function_exist() 來檢查，以避免再次聲明中指定的錯誤。理想情況下，所有的函數應該在 functions.php 文件中。

搜索結果（search.php）

• 通過摘要或全文輸出的方式顯示文章列表。可以根據自己的需要選擇適合的方式。
• 搜索結果頁面顯示的搜索字詞產生的結果。這是一個簡單而有效的方式來提醒別人，他們只是在搜索——特別是在結果為零的情況下。使用  the_search_query() 或 get_search_query() （顯示或返回值，分別）。例如：

   

  1. <h2><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>'); ?></h2>

• 這是一個好的做法，在搜索結果頁面中再次包含搜索表單，可以使用 get_search_form()

JavaScript

• JavaScript代碼應該盡可能放在外部文件中。
• 使用 wp_enqueue_script() 加載你的腳本。
• Javascript的直接加載到HTML文件（模板文件）應該是CDATA編碼，以防止舊版本的瀏覽器出現錯誤。
  

   

  1. <script type="text/javascript">

  2. /* <![CDATA[ */

  3. // content of your Javascript goes here

  4. /* ]]> */

  5. </script>

截圖

為你的主題添加一個截圖。截圖應該命名為 screenshot.png ，并且放在你的主題的根目錄下。截圖應該能直接展示你的主題設計和保存為 PNG 格式。推薦的圖像大小為600x450，截圖將顯示為300x225，但雙尺寸的圖像，用來給HIDPI顯示器上更好的顯示效果。

主題選項

主題可以有選擇地支持 主題選項屏幕 。舉個簡單的代碼例子，查看 A Sample WordPress Theme Options Page。

如果要給用戶使用 主題選項屏幕 的權限，應該使用“edit_theme_options”來設置用戶的權限，而不是使用 “switch_themes”，除非這個用戶角色可以直接切換主題。需要了解更多，你可以閱讀 Roles and Capabilities 和 Adding Administration Menus。

如果你正在主題中使用 “edit_themes”能力來為管理員添加訪問 主題選項屏幕 （或其他自定義屏幕）的權限，要知道，自 3.0 版以來，這個能力默認并沒有分配給WordPress多站點的管理員。查看 說明。 在這種情況下，如果你希望管理員訪問“主題選項”菜單，請使用 “edit_theme_options”能力。查看WordPress多站點的管理員的附加能力。

主題測試過程

1. 修復PHP和WordPress錯誤。添加下面的調試設置到你的wp-config.php，以便看到廢棄的函數調用和其他WordPress相關的錯誤：define('WP_DEBUG', true); 。查看 Deprecated Functions Hook 了解更多。
2. 對照上面提到的 模板文件清單 檢查模板文件。
3. 使用 Theme Unit Test 做一個運行測試。
4. 驗證HTML和CSS。請參閱驗證一個網站。
5. 檢查 JavaScript 錯誤。
6. 測試在所有目標瀏覽器。例如，IE7，IE8，IE9，Safari，Chrome，Opera，和 Firefox。
7. 清理任何多余的意見，調試設置，或待辦項目。
8. 請查閱 Theme Review 如果你希望將主題公開發布到WordPress官方主題庫。

資源和參考

請訪問 原文 閱讀這個部分的內容。