1. 首頁
  2. »
  3. 網站架設
  4. »
  5. WordPress
  6. »
  7. [教學] 如何在 WordPress 佈景主題中,建立子佈景主題(Child Theme)
WordPress 網站架設

[教學] 如何在 WordPress 佈景主題中,建立子佈景主題(Child Theme)

2020/03/05

梅問題-[教學] WordPress 佈景主題中,建立子佈景主題(Child Theme)
  由於梅干都是自己開發WordPress佈景主題,所以都是以主佈景為主,雖然WordPress早已有子佈景主題的架構,但因為用不到,就一直沒去研究它,而什麼時候會需要使用子佈景主題,簡單的來說,當今天購買了佈景主題,而這佈景的作者,會一直不斷的更新時,這時就會需要子佈景主題。

  其實各位可以將主要的佈景主題,想像成WordPress本身,若直接修改WordPress的核心程式,當WordPress一更新時,之前所修改的就會被覆蓋掉,因此才會使用外掛進行擴充,如此一來就不用擔心擴充的部分被蓋掉,而子佈景主題也是這概念,它會繼承主佈景題的功能,然後透過子佈景主題進行擴充,所以當主佈景主題更新時,先前所作的調整就不會被蓋掉,甚至透過子佈景主題,也可自行擴充版型上的需足,因此要如何為主佈景主題,建立子佈景主題,現在就一塊來看看吧!


Step1
首先進到WordPress的後台,看一下目前所啟用的主題是那一個。
梅問題-[教學] WordPress 佈景主題中,建立子佈景主題(Child Theme)
Step2
接著再到「wp-content/themes」,建立一個資料夾,並命名為「主佈景名稱+Child-Theme」。
梅問題-[教學] WordPress 佈景主題中,建立子佈景主題(Child Theme)
Step3
接著在這目錄下,建立一個style.css,並貼上下方的宣告,這邊得特別注意到Theme NameVersion需作修正。
/*
Theme Name: Minelight Child /主佈景名稱+Child/
Description: Child theme for Minelight theme
Author: minwt
Author URI: https://www.minwt.com
Template: Minelight
Version: 1.0.0 /子佈景版本/
*/

Step4
接著再建立一個function.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')
);
}
?>

Step5
接著再建立一個screenshot.png,可直接複製主佈景主題中的,再加上一些文字讓自己好辨示。
梅問題-[教學] WordPress 佈景主題中,建立子佈景主題(Child Theme)
Step6
當完成後,在這個子佈景主題中,共有三個檔案。
梅問題-[教學] WordPress 佈景主題中,建立子佈景主題(Child Theme)
Step7
接著再回到WordPress後台,並重整一下佈景主題,接著就會看到剛所製作的子佈景主題,再啟用這個子佈景主題。
梅問題-[教學] WordPress 佈景主題中,建立子佈景主題(Child Theme)
Step8
雖然目前啟用的是子佈景,但主佈景的所有功能與版型,都會全部繼承到子佈景主題中,當然透過這子佈景,就可將主佈景再作擴充啦!因此有需要的朋友,不妨也可試試看囉!
梅問題-[教學] WordPress 佈景主題中,建立子佈景主題(Child Theme)