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

Ayuan發表於2018-02-27

本專欄介紹如何開發設計你自己的 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 主題應該按照如下標準開發:

主題的剖析

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 系統中。

相關文章