WordPress child theme 子主題
PHP Wordpress

WordPress child theme 子主題

圖片來源 https://wordpress.org

https://developer.wordpress.org/themes/advanced-topics/child-themes/
https://docs.woocommerce.com/document/set-up-and-use-a-child-theme/

一個 child theme (子主題) 至少要加三部分

1. child theme 的資料夾
如官方文件所述,如果你想要幫
wp-content/themes/twentyfifteen  加 child theme, 則資料夾是
wp-content/themes/twentyfifteen-child

加上 -child, 把它當做 coding convention.

2. style.css
以 twentyfifteen-child 來說,就是 wp-content/themes/twentyfifteen-child/style.css
一樣要加上 stylesheet header, 注意新增一個 Template 欄位,例如
Template: twentyfifteen  指定你的 parent 是 twentyfifteen

3. functions.php
子主題的 functions.php 會「先於」父主題的 functions.php 被執行 (兩者都會執行)

接著要引用 parent 的 style.css, 官方文件提到在 child theme 使用 @import 是「以前」方法了,目前建議的方法是在子主題的 functions.php 加上

<?php
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')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

注意
a. 去父主題的 functions.php 找到 wp_enqueue_style, 一般來說,主題需要告訴 WP 核心去引用 css, wp_enqueue_style 的第一個參數就是識別字串 (官方文件叫 $handle), 把這個識別字串記住,上方的 $parent_style 改成這個識別字串。

b. 檢查父主題 functions.php 是否已有幫子主題 wp_enqueue_style 的 code, 檢查 wp_enqueue_style 和 is_child_theme. 如果有的話,子主題連 functions.php 都不用加 (當然如果你要客製化 functions.php 的話還是要加)

c. 承 b, 如果父主題「沒有」幫子主題 wp_enqueue_style 的 code, 則需要上方附的程式碼,否則父主題的 style.css 不會被引用到 html head.

d. 如果你的 child theme 不只有 style.css, 要 review 所有 css 檔案的相依性,照順序 wp_enqueue_style.

到目前為止,你的後台主題面板應該已經看得到你的 child theme, 並可以啟用。如果你想換的不只是 css, 還需要換 template. 那直接在 child theme 新增一樣檔名的 template php 即可。

官方文件有提到,要改 functions.php 時,建議新增 child theme, 在 child theme functions.php 裡 orverwrite 你要改的 function, 因為當主題升級時,functions.php 會被覆寫掉。要注意的是,你的父主題的 function 要 “pluggable” (用 function_exists 包住)

官方文件附了一個寫 <link> 的範例,程式上沒有特殊之處,但概念上 WordPress 有點像是在 functions.php 裡做 templating.

最後有 child theme 時,get_template_directory() return 的是父主題的資料夾,要拿到子主題的路徑,請用 get_stylesheet_directory()

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。