WordPress安裝子主題Child Theme，防止主題更新覆蓋自訂功能和樣式

作者： Well
發佈於： 2025-01-28
更新於：2025-05-09

本篇文章共2753 字，預計閱讀時間12 分鐘

WordPress安裝子主題的好處

如果直接修改父主題的程式碼，例如WP後台主題檔案編輯器中的style.css和functions.php檔案。可能在這兩個文件分別添加了一些自訂的樣式和功能，但是主題的更新可能會覆蓋這些修改，會導致丟失所有自訂的功能和樣式。

比如在自訂登入頁樣式文章中就有透過在functions.php檔案中加入程式碼實現樣式修改，如果你的主題更新了，那你加入的程式碼也就沒了。

但是透過子主題，可以在不修改父主題檔案的情況下進行定制，這樣即使父主題更新，也不會影響你的自訂修改。

其中的原則：子主題是一個獨立的主題，它繼承了父主題的所有功能和樣式，但允許你進行修改和定制，而不直接修改父主題的核心程式碼。例如，可以修改子主題的 樣式.css 來改變外觀，或者在 函數.php 中新增程式碼實現新的功能。

如何創造WordPress子主題？

Well安裝子主題常用的方式有3種，分別是Google搜尋官方子主題、使用子主題產生器外掛、手動建立子主題。

在Google搜尋官方子主題是最簡單的一種方法，但不是所有主題都有官方子主題。
使用子主題安裝外掛的好處是操作簡單、適用性更廣。
手動建立子主題的好處是適用於所有主題，但需要一些操作能力。

注意：不管是哪一種方法，在使用子主題的過程中，不能刪除父主題。

你可以選擇適合自己的方式來建立子主題，具體操作如下。

Google搜尋官方子主題

可在Google瀏覽器直接搜尋XXX子主題，找到官方連結並下載。下方舉例Astra和Hello Elementor :

搜尋astra child theme，在搜尋結果找到官方連結。

下載Astra子主題。

搜尋hello elementor child theme。

hello elementor子主題下載。

搜尋並下載子主題後，在WP後台– 外觀– 主題– 左上角“新增主題” – 左上角“上傳主題”，上傳下載的子主題壓縮包即可。

安裝完成後，在WP後台– 外觀– 主題，啟用子主題。

使用子主題產生器外掛程式建立子主題

我們需要用到子主題配置器插件，這一是個免費的子主題產生器插件，設定也比較簡單，具體操作如下：

首先安裝Child Theme Configurator插件

在WP後台外掛程式安裝介面搜尋Child Theme Configurator，安裝並啟用。

在WP後台– 工具– Child Themes 設定Child Theme Configurator插件，如上圖所示：

選擇操作：建立一個新的子主題
選擇父主題：選擇父親主題
點擊Analyze

這些操作後會自動偵測是否能產生子主題，然後接著操作：

其他設定不做修改，點選底部Create New Child Theme建立子主題。

建立子主題成功提示。

開啟WordPress主題介面，啟用子主題。

子主題生成後可以選擇卸載子主題生成外掛。

手動建立子主題

手動建立子主題是最基礎、最常見的方法，基本上通用各種主題。

我們需要建立兩個資料夾，分別是style.css和functions.php。

建立style.css文件

建立一個後綴為.css的style文件，將下方程式碼貼進文件內並儲存。

/*
Theme Name: xxx Child
Theme URI: http://example.com/xxx-child
Description: My custom child theme
Author: Your Name
Author URI: http://example.com
Template: xxx-theme
Version: 1.0
*/

Theme Name：子主題的名稱，這是必須的字段，WordPress 會顯示這個名稱在後台主題頁面。
Theme URI：子主題的URL，通常是你為子主題創建的介紹頁面連結（可選）。
Description：子主題的簡短描述，簡要說明這個子主題的目的和特性。
Author：子主題的作者名字。 Author URI：子主題作者的鏈接，通常是個人網站或社交媒體鏈接（可選）。
Template：父主題的資料夾名稱，這個欄位是必要的，必須準確無誤地填寫父主題的資料夾名。它告訴WordPress 這個子主題是基於哪個父主題。
Version：子主題的版本號，可依需求自行設定（可選）。

文件內的其他行可以自訂填寫，但Template 是style.css檔案中最重要的一行，要填寫父主題資料夾名，這裡聲明了該子主題的父主題是誰，如果填寫錯誤會導致無法繼承父主題樣式和功能，導致頁面錯亂。

如何確定父主題資料夾名？

可以透過FTP管理器或者伺服器自備的文件管理器查找，WordPress主題檔案在網站根目錄下的/wp-content/themes/ 內，圖中的hello-elementor 是主題檔案名稱。

建立functions.php文件

建立一個後綴為.php的functions文件，將下方程式碼貼進文件內並儲存。

<?php
// 引入父主题的样式
function my_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');