Day 20 WordPress 客製化從 1 開始：子佈景主題與 PHP

第 12 屆 iThome 鐵人賽

DAY 20

自我挑戰組

WordPress 客製化從 0 開始系列第 20 篇

12th鐵人賽 wordpress php 子佈景主題

Eric 桓桓

2020-09-21 22:43:35

3972 瀏覽

分享至

大家好，我是 Eric。

昨天我們用 JavaScript 的編碼標準為當代網站開發的三大基礎收尾，今天，我們要進入「WordPress 客製化」的正題。

子佈景主題 (Child Theme)

當你在網路上搜尋 WordPress 客製化，或是 WordPress Customization 時，大部分的教學都會包含這段話：

將上述的程式碼片段放入佈景主題的 functions.php 中。
Put the snippets above in your functions.php file of your theme.

這句話只對了一半。

WordPress 的更新方式，從核心到佈景主題、外掛，都遵循同一個流程：下載壓縮檔，刪除舊版資料夾，解壓縮新版檔案。換句話說，如果今天直接將程式碼片段放在佈景主題的 functions.php 中，當你下次更新佈景主題時，一切都會歸零。

為此，WordPress 提供一套佈景主題的機制：子佈景主題。如果要將網路上的程式碼片段放入 functions.php 中，建議將這些程式碼片段加入子佈景主題的 functions.php，這樣就可以在上層佈景主題更新時，維持自己客製化的主題。

根據 WordPress 的開發文件，子佈景主題作為「佈景主題」，一樣必須要有 style.css 這個檔案。除了一般 style.css 中的檔案標頭外，我們需要額外增加一個 template 標頭，用來標示上層佈景主題。我們一樣以 Twenty Twenty 為例：

/*
 Theme Name:   Twenty Twenty Child
 Theme URI:    https://example.com/twenty-twenty-child/
 Description:  Twenty Twenty Child Theme
 Author:       Eric Chuang
 Author URI:   https://example.com
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwenty-child
*/

關於載入子佈景主題樣式的方法，必須先檢視上層佈景主題是用哪種方法載入樣式表，並將下列的程式碼片段加入子佈景主題的 functions.php 中：

/** 上層佈景主題使用 get_template 載入樣式表 */
add_action( 'wp_enqueue_scripts', 'parent_get_template_styles' );
function parent_get_template_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ) ); // 上層佈景主題的代稱
}
/** 上層佈景主題使用 get_stylesheet 載入樣式表 */
add_action( 'wp_enqueue_scripts', 'parent_get_stylesheet_styles' );
function parent_get_stylesheet_styles() {
    $parenthandle = 'parent-style'; // 上層佈景主題代稱
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ) );
}

將樣式表載入完畢後，接下來只要按照上層佈景主題的架構，存放個別範本檔，如 header.php、footer.php 等，便能取代上層佈景主題的樣式。

其他解決方案

關於子佈景主題的建立方式，可以參考社群夥伴 Max 的這篇文章。透過文章中介紹的外掛 Child Theme Configurator，便能很輕鬆的省略省略前述的步驟。

PHP 基礎

PHP 在網站開發中是一種常見的程式語言，用以跟伺服器進行溝通。既然是程式語言，我們可以回頭參考我們在 JavaScript 篇章提過的變數與函式。這邊會用同樣的內容架構說明類似的概念。

變數

在 PHP 中，定義變數的方法是 $。

global $global; // 定義全域變數，供跨檔案存取
$name = 'Eric';
$number = 1;
$arr = array(
        'name'   => 'Eric',
        'number' => 1,
    );

函式

PHP 的函式寫法與 JavaScript 相同 (事實上，幾乎所有的程式語言都相同)：

function 函式名稱 ( 參數 ) {
    /** 運算式 */
    return 回傳值;
}

常用的 PHP 函式

函式名稱 | 功能
-------+-------
var_dump( 變數 ); | 用來偵錯用，會回傳未經格式化過的變數值。
preg_match( '規則運算式模式', '字串' ) | 透過規則運算式來比對特定字串。
sprintf( '字串', 變數 ... ) | 格式化字串。會透過預留位置 (placeholder) 的方式將變數放入字串中。
echo | 用來輸出字串，通常會與 printf 或 sprintf 搭配，以輸出字串。
function_exists( '函式名稱' ) | 用來檢查函式是否存在，常用於子佈景主題，以及檢驗特定函式是否存在 (如 Advanced Custom Fields 的 get_field())。

更多的 PHP 函式，可以參考 PHP 的官方網站。

WordPress 函式

在 WordPress 當中，有許多現成的函式，提供強大的功能。譬如我們在進入 PHP 篇章前，便已經廣泛提到的 wp_enqueue_style 與 wp_enqueue_script。
在接下來的內容中，我們會更進一步使用各種 WordPress 函式來探討網站的客製化。

透過 Code Snippets 在網站中插入客製化 PHP 程式碼片段

除了直接在子佈景主題的 PHP 檔案中，直接加入 PHP 的語法外，另一種嵌入客製化程式碼片段的方式，是透過 Code Snippets 這款外掛。
相較於子佈景主題的方式，Code Snippets 可以將客製化的程式碼片段集中管理，獨立於佈景主題之外，同時可以匯出當前的程式碼片段，供其他專案使用。