WordPress 主題開發：從入門到精通（必讀）

本專欄介紹如何開發設計你本身的 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 社區作出了本身的貢獻 (增長技術圈內資質)。

---

在本專欄中能學習到哪些知識？

1. WordPress 的深度使用技巧
2. WordPress 的主題開發
3. WordPress 的插件開發
4. 獨立製做一個完整的博客
5. 獨立製做一個完整的電子商務網站

---

WordPress 主題模板開發標準

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

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

主題的剖析

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

WordPress每個發行版都會有一個默認的主題。請認真查看默認的主題，這樣可能會對製做你本身的主題有幫助。

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

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

讓咱們單獨看一下。

主題樣式表（ style.css )

CSS文件不只定義了你的主題樣式，style.css *必須 以註釋的形式列出主題的詳細信息。*兩個不一樣的主題是不容許擁有相同的表述的 ， 由於這樣會致使主題選擇出錯.若是你經過拷貝一個你已經制做的主題來製做你新的主題，請確保先更改這些頭部註釋.

下面是樣式表頭部註釋的例子，被稱做樣式表頭註釋。好比主題"Bachelor":

/*
Theme Name: Bachelor
Theme URI: http://taper.io/themes/bachelor
Author: Ayuan
Author URI: http://taper.io/
Description: The Bachelor theme for TaperLabs 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 v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.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: bachelor

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 主題文件結構開始，講解並建立實例來分別討論函數文件、模板文件、基本模板、自定義頁面模板、搜索查詢模板、定義模板、模板的引用、插件 API 鉤子等的用法及機制。快速簡單的入門到了解這一方便簡潔的開源 CMS 系統中。