自己寫個 Wordpress 佈景主題
經營網誌或電子商務的人可能時常聽到 Wordpress 的名字。對於想要快速搭建網站，或是對於不熟悉網站架設的人來說，Wordpress 提供一個相當快捷、功能多樣的方案，藉由操作介面修改設定，讓不懂 HTML、CSS 或是 PHP的人能夠迅速完成一個部落格、購物網站或作品集。Wordpress 擁有許多外掛支援各式各樣的功能，迅速更新的團隊，詳細完整的文件，支援多國語言，並且擁有廣大的使用者社群，上傳無數佈景主題與外掛功能。
WordPress 是由 b2/cafelog 發展而來，一個建立在 PHP 和 MySQL 上的個人發佈系統，遵循通用公共許可證（GPL）授權，它是一個日漸成熟及穩定的產品，專注於用戶體驗及網頁標準。—— Reference
但是，對開發者來說使用 Wordpress 多少有一些困擾，例如總有些時候即使瀏覽很久依然找不到適合自己使用的佈景主題（或外掛，但外掛不是這篇文章要討論的主題），若要以現成的佈景主題做修改又容易在找對應的功能上花費許多時間，或被別人的程式綁手綁腳——既然這樣不如自己開發一個主題吧。
首先，你得先要安裝好 Wordpress。安裝的教學在網路上可以找到非常多且完整的文章。
安裝完成以後，首先來到 wp-content/ 資料夾，這個資料夾包括了安裝的外掛與佈景主題、不同語系的支援檔案與更新 Wordpress 用的檔案。我們進入 themes/ 資料夾，裡面應該包含了數個預設安裝的佈景主題（視 Wordpress 版本而定，例如 4.6.1 版會有 twentyfourteen, twentyfifteen, twentysixteen 三個佈景主題，更新至 4.8 版則會有 twentyseventeen 主題）。在這裡我們可以新增一個資料夾（wp-content/themes/），資料夾名稱可以自訂作為佈景主題的名稱，在此我們取名 customtheme。
一個最簡單的佈景主題至少要包含三個元件，分別如下：
- style.css 作為佈景主題最主要的樣式設定。
- index.php 首頁的模板，若有其他頁面模板也可以放在佈景主題資料夾內。
- functions.php 作為額外功能設定用，Wordpress 會以這支程式裡的設定為優先，通常用來對外掛、佈景主題或 Wordpress 本身做進一步的設定。
在此我們先開啟空白文件，儲存成這三個檔案放在 customtheme 資料夾內。
為了簡單的教學用，我們在 index.php 內打上以下內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Wordpress Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Welcome to Wordpress.</h2>
</body>
</html>接著我們來看看 style.css。Wordpress 在佈景主題會看文件開頭的註解內容，作為該文件功能的一部份，而 style.css 開頭的註解內容會影響在控制台如何呈現。因此我們在開頭上要打上以下內容：
/*
Theme Name: Custom Theme
Theme URI: https://wordpress.org/themes/customtheme
Author: Practicode
Author URI: https://medium.com/practicode
Description: You are awesome.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: customtheme
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, post-formats, theme-options, threaded-commentsSome words you may want to say.
*/
這段註解包含：
- 佈景主題名稱
- 佈景主題網址，當你完成佈景主題以後可以上傳至 https://wordpress.org/themes/，在該網址也能找到許多的佈景主題。
- 作者名稱
- 作者網址
- 佈景主題描述，會呈現在佈景主題上
- 佈景主題版本
- 軟體授權許可（GNU GPL，或其他）
- 授權網址
- 字串對應域，佈景主題的內容需要轉換成其他語言時使用，通常由佈景主題自行定義
- 分類標籤，介紹該佈景主題擁有的特色，例如可以自訂模板、單欄式或多欄式等，標籤的介紹可以看這裡
- 其他註解內容
而以上內容在 Wordpress 控制台上會如此呈現：
可以看到左方有一塊灰色，是因為我們沒有放佈景主題的圖片。在 custometheme 資料夾內新增一張圖片，檔名取作 screenshot.jpg，應該就會看到圖片呈現在佈景主題上。
因為我們的 style.css 裡什麼內容都沒有，這時候 Wordpress 應該會長這樣：
於是接下來我們就能開始撰寫自己的首頁與樣式了，我們的教學也在此先告一段落。進階的做法還有許多細節，例如將不同文章拆成許多的 template，包含 header 與 footer，不同文章的頁面，或是在佈景主題外新增自訂模版等。值得注意的是，Wordpress 會辨認許多特定檔案，包含我們用到的 index.php、style.css 與 functions.php，還有許多，完整的列表詳如下列：
- style.css 最主要的樣式表
- rtl.css 若佈景主題有從右到左的文字，則會自動讀這份樣式設定
- index.php 首頁模板，若佈景主題包含模板，至少必須要有此份模版
- comments.php 留言模板
- front-page.php 首頁顯示靜態頁面時可作為首頁模版
- home.php 首頁模板，且由此頁優先作為首頁模板，詳情可以閱讀 Template Hierarchy
- single.php 日誌（文章）模板
- single-{post-type}.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 圖片附件模版
- 404.php 當網頁或搜尋內容找不到時呈現的模版
關於自訂佈景主題的介紹，可以看 Wordpress 文件。
