如何建立 WordPress 的子主題

當我們安裝好 WordPress 的佈景主題後,可能覺得對於字型大小不滿意,或是對於圖片的大小不滿意,想要針對目前的佈景主題去做一些小修改的時候,就要透過子主題的方式。

如果你只是把圖片、文字換掉,那個不是修改佈景主題,不需要去建立子主題,建立子主題的目的是要對原本的佈景主題客製化一些內容,或是要大幅度的修改程式碼,才會使用子主題。

難道不能直接修改佈景主題嗎?

當然不行!不過其實是可以,但是強烈建議不要這樣做,請不要直接去修改佈景主題的程式碼。因為

  • 佈景主題更新的時候,你的修改會被蓋掉
  • 不易管理。如果你直接修改佈景主題,因為你要在一堆 CSS 中去改你要的樣式,數個月之後,你絕對會忘記你改了哪些地方,會越來越亂。

建立子主題可以避免你的修改被蓋掉,對於管理上也會比較容易。

但如果你只是要修改 CSS 的話,你可以用佈景主題 -> 自訂 CSS 的功能就可以達成,不需要特別去建立子主題。好了,廢話不多說。

如何建立子主題?

有兩種方式:手動跟自動(被打)

手動建立子主題

你只需要在 WordPress 的目錄架構下依照標準建立即可。WordPress 的主目錄結構長這樣:

wp-admin/
wp-content/
wp-includes/
*.php

手動, 步驟一

請在本機建立一個資料夾,名稱可以自訂,通常名稱會命名為 (佈景的名稱)-child,裡面會存放我們等一下要上傳的檔案,我們以 2017 年的預設佈景主題 “twentyseventeen” 來示範,來見建立一個子佈景主題。我們先建立一個資料夾名稱叫做 “twentyseventeen-child”。

手動, 步驟二, 建立 style.css

在本機的 “twentyseventeen-child” 資聊夾內建立一個 txt 檔,請命名為 style.css,然後你把底下的文字包括 /* … */ 都複製到 style.css 內

/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Template: twentyseventeen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: This is description.
Tags: tags
Version: 0.1.0
Updated: 2018-03-15 15:42:15
*/

複製完之後,有兩個東西你要改,第一個是 “Theme Name”,改成你要顯示的子佈景主題名稱,第二個是 “Template” 改成你父主題的名稱(這邊的父主題就是 twentyseventeen)。

關於在 style.css 中使用 @import 的方式來載入父主題的 CSS,官方已經建議不要這樣使用,所以只需要有上述的內容即可, style.css 會透過 functions.php 來載入。

手動, 步驟三, 建立 functions.php

一樣在本機的 “twentyseventeen-child” 資料夾內建立一個 txt 文字檔,請一定要命名為 functions.php,把以下內容複製到文字檔內:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
?>

手動, 步驟四, 上傳到主機內, 並啟用子主題

作到這邊,你的 “twentyseventeen-child” 資料夾內應該會有兩個檔案:

"twentyseventeen-child"
  +-- style.css
  +-- functions.php

接下來只要把這個目錄上傳到您的主機內就可以了,用 FTP(可以用 Filezilla)登入主機之後,切換到 wp-content/themes/ 內,把整個 “twentyseventeen-child” 上傳上去,然後在 WordPress 後台啟用子主題就可以了。

自動建立子主題

你可能看完上面的一堆程式碼,可能會感到頭暈肚子痛,想放棄。沒關係,現在有外掛可以幫你自動建立子主題,你只需要安裝 “Child Theme Configurator” 這個外掛。

安裝完成後點選 工具 -> 子佈景主題 就可以看到這個外掛工具。

點選 上層/子佈景主題 分頁,選擇 建立子佈景主題 然後在下方的分析左邊下拉選單終點選你要建立的父主題,按下分析

Child Theme Configurator 01
Child Theme Configurator 的參數

分析後若這個佈景主題可以建立子主題,就可以繼續選擇其他選項。若你對 CSS 熟悉的話再去調整其他的設定,不然請保留預設值,然後按下 “Create New Child Theme” 就完成了。

Child Theme Configurator 04
子佈景主題建立完成

 

子佈景主題完成
在佈景主題中啟用新的子主題即可


發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *