[WordPress 日記] Day 2 子佈景主題

為什麼要理解子佈景主題 (child themes)？

子佈景主題最主要的功能，在「將客製化部分獨立於現有佈景主題之外」，藉此避免因為更新而導致客製化內容被覆蓋。

為什麼會被覆蓋？先來看看 WordPress 的佈景主題與外掛更新機制：

1. 移除現有的外掛、佈景主題路徑
2. 下載最新版本外掛、佈景主題的壓縮檔並解壓縮

今天如果我們根據網路上的教學，修改了佈景主題的 functions.php 後，遇到佈景主題更新的時候，便會把我們辛苦修改的內容覆蓋掉了。

這就是為什麼要把我們的修改，獨立於當前佈景主題之外。而要達成這個目的，除了子佈景主題外，我們也可以透過自行建立外掛、使用 Code Snippets 等方式，這些方法，未來有機會會再說明。

什麼是子佈景主題？

根據 WordPress 官方的開發文件，「子佈景主題讓你得以小幅度的修改你的網站外觀，卻仍能維持網站的外觀與功能。」

用另一個方式去理解，子佈景主題，實質上就是一種外掛了。

如何建立子佈景主題？

如果是第一次建立子佈景主題，可以透過 Child Theme Configurator 這一套外掛製作，詳細的操作方式，可以參考 Alex 於 WordPress 小聚時分享的投影片。

另一種建立子佈景主題的方式，適合希望更深入了解子佈景主題運作機制的人。

建立子佈景主題前的注意事項

1. 子佈景主題的基本原理，是「讀取完上層佈景主題 (parent theme) 的樣式後，再讀取子佈景主題的樣式；讀取完子佈景主題的函式 (functions) 後，再執行上層佈景主題的函式。」
2. 如果會大幅修改樣式，以致子佈景主題與上層佈景主題差異非常大的時候，我會建議重新找個架構較相似的上層佈景主題，不然導致存在過多未使用的樣式。如果你會在意 Google 的 Page Speed Insights，那這一點必須更加注意，因為這是 PSI 的評分標準之一。

建立一個資料夾，並加入 style.css 檔案

所有的 WordPress 佈景主題，都必須存在 style.css 與 index.php 這兩個檔案，但由於我們並不需要變更頁面架構，因此子佈景主題的資料夾中，並不需要 index.php。

這一份 style.css 檔案，會在引入上層佈景主題的 style.css 後才執行，因此會覆蓋掉上層佈景主題的樣式。

較老舊的教學內容，會教你透過 @import 的方式，去引入上層佈景主題，但因為載入時間較長，官方已經不建議使用。

在 style.css 中加入佈景主題的標頭內容

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentynineteen
 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:  twentynineteenchild
*/

在這段標頭中，各個項目的功能如下：

項目	說明
Theme Name	必填，佈景主題名稱，顯示於佈景主題一覽。
Theme URI	佈景主題說明頁面，如果你希望上架在 WordPress.org 上，這項就必須填寫。
Description	說明。
Author	開發者名稱。
Author URI	開發者網站，通常和 Theme URI 是一樣的。
Template	上層佈景主題的代稱 (slug)，子佈景主題必填，用以指定繼承的佈景主題。
Version	版本號。
License	授權方式，如果要上架 WordPress.org 就必須要使用 GPL 授權。
License URI	授權條款頁面。
Tags	標籤，上架於 WordPress.org 時供搜尋篩選用。
Text Domain	用於 gettext 時，讀取翻譯字串的分類。

建立 functions.php

誠如前面所說，由於要引入上層佈景主題的功能與 CSS 樣式表，因此會需要先透過下列的動作 (action) 引入上層佈景主題的 CSS。

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parent_style = 'twentynineteen'; // 這裡定義為上層佈景主題的代稱 slug，也就是子佈景主題中的 Template
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twentynineteenchilde',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ), //定義此樣式的依存樣式
        wp_get_theme()->get('Version')
    );
}

（以上範例引用並改寫自 WordPress 官方開發文件）

小結

如同前面所說的，子佈景主題事實上可以理解成是一種「外掛」。換句話說，只要將 functions.php 內的函式們獨立出來，你就完成了自己的外掛了。

除了建立子佈景主題以外，我們也還可以透過 Code Snippets 的方式來進行 WordPress 的客製化。明天就來簡單討論一下 Code Snippets 這套外掛。

本文與 Day 1 勾點初探的內容，可以說是希望進行 WordPress 客製化相當重要的基礎，所以花了比較長的篇幅說明（雖然跟官方文件比起來簡短很多）。也因為是基礎，因此如果我在這一系列的文章中，有任何錯誤的地方，都可以自由指教，才不會讓錯誤的內容繼續誤人子弟。