WordPress子主題是甚麼?WordPress子主題介紹及教學

相信若有使用過WordPress的人,都會知主題是甚麼,不外乎改變WordPress的外觀,甚至提供一些客製化功能。但你又知不知道WordPress子主題是甚麼呢?對你的網站又有何幫助?這文章將會介紹WordPress的子主題,以及示範如何自行創建一個子主題。

WordPress中的父子主題

父主題(Parent theme)即是一般的WordPress主題,包含所有必需的WordPress模版檔案,如404、文章、頁面等的模版,基本上在網上能下載的主題都是父主題。

子主題則繼成了父主題的外觀和功能,用戶能夠修改子主題來客製化外觀或功能而不影響父主題

由於大多用戶都不需要客製化,或不想花時間去研究寫代碼或CSS,因此大多用戶都不會用到子主題。

為何需要子主題?

子主題能夠有效減少父主題的改動為客製化帶來的影響。對於需要客製化的人來說,若果不使用子主題,就需要直接修改父主題,在父主題需要更新時,就會把修改的內容全部覆蓋,為每次更新主題帶來不便。反之,用了子主題就能避免這情況,在父主題更新時,子主題的內容得以保留

簡單理解子主題

創建及啟用子主題

注意,在創建子主題之前,請先檢查想更改的父主題是否已附有子主題,有些主題會預先包含子主題,無需額外創建子主題。

例子為Wordpress內置的twentyseventeen創建一個子主題。

  1. 登陸FTP或打開網頁空間(如cPanel、Directadmin)控制版面的文檔管理器,在wp-content/themes創建一個新資料夾,名為<主題>-child,例:twentyseventeen-child
  2. wp-content/themes/<主題>-child內新增一個名為style.css的檔案
  3. 複製父主題的style.css檔案的頭幾行注釋(位於wp-content/themes/<主題>/style.css)
  4. 在子主題的style.css貼上(位於wp-content/themes/<主題>-child/style.css)
  5. 修改或新增Theme nameTemplateTheme name不能與其他主題名稱相同,Template需設為父主題名稱,如下
    /*
    Theme Name: Twenty Seventeen Child
    Theme URI: https://wordpress.org/themes/twentyseventeen/
    Author: the WordPress team
    Author URI: https://wordpress.org/
    Description: Twenty Seventeen Child theme
    Version: 2.3
    Requires at least: 4.7
    Requires PHP: 5.2.4
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: twentyseventeen
    Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
    Template: twentyseventeen
    This theme, like WordPress, is licensed under the GPL.
    Use it to make something cool, have fun, and share what you've learned with others.
    */
  6. wp-content/themes/<主題>-child內新增一個名為functions.php的檔案
  7. 若父主題使用的是get_template開頭的function,如get_template_directory()get_template_directory_uri(),就要在子主題的functions.php內貼上以下內容
    <?php
    
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
        wp_enqueue_style( 'child-style', get_stylesheet_uri(),
            array( 'parenthandle' ), 
            wp_get_theme()->get('Version') // this only works if you have Version in the style header
        );
    }
    
    ?>

    若父主題像TwentySeventeen一樣,使用的是get_stylesheet開頭的function,如get_stylesheet_directory()get_stylesheet_directory_uri(),就要在子主題的functions.php內貼上以下內容

    <?php
    
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
        $parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
        $theme = wp_get_theme();
        wp_enqueue_style( $parenthandle, get_template_directory_uri() . 'https://blow.b-cdn.net/style.css', 
            array(),  // if the parent theme code has a dependency, copy it to here
            $theme->parent()->get('Version')
        );
        wp_enqueue_style( 'child-style', get_stylesheet_uri(),
            array( $parenthandle ),
            $theme->get('Version') // this only works if you have Version in the style header
        );
    }
    
    ?>


    若不清楚使用的是甚麼function,可兩個都試一遍(需先在後台啟用此子主題)

  8. 在後台啟用子主題,例Twenty Seventeen Child
  9. 若想知道子主題是否有效,可修子主題的style.css來看網站有沒有改變

  10. 之後若想覆蓋/新增樣式可編輯子主題的style.css,想新增function的話可修改functions.php,亦可按需要添加其他檔案。

總結

對於有客製化WordPress需要的用戶或工程師來說,子主題提供了相當大的幫助,能夠覆蓋父主題原有樣式或功能又不會在更新時丟失,若原有主題沒有附帶子主題,亦可自行創建一個,過程亦不複雜。

參考資料

WordPress Theme Developer Handbook: https://developer.wordpress.org/themes/advanced-topics/child-themes/

Author avatar
OpenserTk
https://opensertk.blowhk.com
現實中我是一個很被動的人,不過在網上就是一個樂意跟網友分享資訊的人。

發表評論

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

本站採用Cookies來提升你的使用體驗。