快速學習WordPress Child Theme製作方式

在 WordPress 中, 佈景主題 (Theme) 是很重要的功能之一, 不過往往因為需要自訂一些特殊功能或介面, 需要調整 Theme 的檔案.

一旦更新了 Theme, 又會將原本自行調整的功能覆寫掉, 如何能解決這個問題? 可以使用子佈景主題功能.

先來看看官方資料:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

我們可以自建一個子佈景主題來達成這樣的應用需求, 簡易步驟說明如下:

1. 在 wp-content/themes/ 建立一個目錄, 以 twentyfifteen 佈景主題為例, 我們就建一個 twentyfifteen-child 這個目錄.
2. 在這個子佈景主題目錄下建立兩個檔案:
   1. style.css 內容用註解的方式, 但需要有以下兩項屬性, Theme Name 與 Template, 例如:

      /*
      Theme Name: Twentyfifteen Child
      Template: tweentyfifteen
      */

   2. functions.php 內容需要加入引用原始 style.css 功能, 如下:

      <?php
      add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
      function enqueue_parent_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
      }
      ?>

3. 其他若是有需要調整的程式碼, 以複製同檔名方式放在這個子佈景主題裡, 例如 header.php, 把原始 header.php 複製一份到子佈景主題, 再依自己客製求修改調整即可.

接下來只需要到管理介面啟用這個子佈景主題即可, 而未來的主佈景主題更新也不會影響這個子佈景主題, 但若是 header.php 有一定幅度的更新時, 自行修改的部分, 也是需要留意與主佈景主題的相容性狀況.

另外也請參考 hubspot 的這篇:

https://blog.hubspot.com/website/wordpress-create-child-theme