更新日期:2021-07-13

官方建議盡量避免修改佈景主題,因為該佈景做了更新的話,你的修改內容都會被覆蓋掉,因此還是建議採用新增一個隸屬該佈景主題的子佈景主題,是最佳解決方案,底下教你如何建立子佈景主題。

建立子佈景主題的資料夾

第一步驟是在 wp-content/themes 建立一個資料夾,資料夾名稱的命名方式,依照原有的佈景主題資料夾名稱,後面加上 -child,例如:我們要幫 twentytwenty 佈景主題,他的子佈景主題資料夾就可以命名為 twentytwenty-child,接下來我們要在這個資料夾下建立所需要的檔案。

建立樣式表檔案 style.css

進入到剛剛建立的資料夾下,新增一個 style.css 檔案,檔案開頭內容請加上以下說明

/*
  Theme Name:   Twentytwenty Child
  Description:  Twentytwenty Child Theme
  Author:       Simon
  Template:     twentytwenty
  Version:      1.0.0
  Text Domain:  twentytwentychild
*/

/* 以下開始填寫你的 css */

Theme Name 佈景名稱必填,請命名為你方便記憶的文字。Template 也是必填,請填寫父佈景主題名稱,這個範例用:twentytwenty。而 Text Domain 一般也是會根據父佈景,加上 child 字樣命名。

建立 functions.php

接著也在資料夾下建立 functions.php 檔案(這個用途不再解釋,相信網路上也有很多說明)。但因為父佈景主題的 style.css 並不會被自動載入,所以我們第一個要寫一段程式碼載入使用它,程式碼如下:

add_action(  'wp_enqueue_scripts' , 'my_parent_styles' );
function my_parent_styles() {
    wp_enqueue_style( 'twentytwenty-style' , get_template_directory_uri() . '/style.css' , array() , wp_get_theme()->parent()->get('Version') );
};

(這邊要注意 wp_enqueue_style 的第一個變數 $handle,像 twentytwenty 它用了 ‘twentytwenty-style’)

再來,一般我們會想改寫父佈景主題的樣式,千萬不要去動父佈景主題的 style.css 檔,所以我們可利用剛剛建立的子佈景主題 style.css 檔,把相關的要修改的樣式語法,都寫在裡面。我們一樣,要呼叫子佈景主題 style.css 檔,請再加上一段程式碼:

add_action( 'wp_enqueue_scripts' , 'my_child_styles' , 99 );
function my_child_styles() {
    wp_enqueue_style( 'twentytwenty-child-style' , get_stylesheet_uri() , array() , wp_get_theme()->get('Version') );
}

順便說明一下,上面我們 add_action 加上一個數字 99,是因為我們希望子佈景主題的 style.css 檔會在最後出現,而不要在父佈景主題的樣式前面,或是中間出現。這個順序很重要,因為在一樣的 css 語法下,後面的語法會取代前面的語法。所以我讓子佈景主題的 style.css 檔出現順序排在最後。

取代父佈景主題其他程式檔案

在子佈景主題中,除了剛剛介紹的 style.css 和 functions.php 這兩個檔案不會覆蓋父佈景主題的檔案外。其他只要檔案名稱相同的,都會去覆蓋了父佈景主題的檔案。舉例來說,若是我們想要修改 header 程式,我們必須先從父佈景主題,複製 header.php 到子佈景主題內,然後再去子佈景主題編修這個新檔案才對。

上傳子佈景主題

都完成設計之後,請將子佈景主題的資料夾壓縮成 zip 檔案,然後到後台「佈景主題」->「安裝佈景主題」,點擊上傳按鈕,然後記得啟用它即可。