跳至內容
WordPress 子主題:什麼是子主題及如何創建一個
WordPress教學📋 指南

WordPress 子主題:什麼是子主題及如何創建一個

Can BayarCan Bayar更新於: 12 分鐘閱讀464 瀏覽

什麼是 WordPress 子主題?

WordPress 子主題是一種主題,它繼承了另一個稱為父主題的主題的功能、特性和樣式。您可以在子主題中進行更改,而不是直接修改父主題的文件。這樣可以在父主題接收更新時保留您的自定義設置,防止您失去幾小時的精心工作。

可以這樣理解:父主題提供基礎,而子主題則在其上層疊加您的修改。WordPress 首先加載子主題,然後對於未被覆蓋的內容回退到父主題。這種繼承模型是 WordPress 最實用的架構決策之一。

為什麼您應該使用子主題?

使用子主題被認為是 WordPress 開發者的標準做法,這是有充分理由的。以下是主要優勢:

  • 更新安全:父主題的更新不會覆蓋您的自定義設置。您的代碼位於一個在更新期間保持不變的獨立目錄中。
  • 有序的工作流程:所有的修改都集中在一個地方,使您能夠輕鬆追蹤您所做的更改及其原因。
  • 輕鬆回滾:如果某個自定義設置造成問題,您可以簡單地停用子主題,立即恢復到父主題。
  • 學習機會:建立子主題可以讓您學習 WordPress 主題的運作方式,而不必承受從零開始構建的壓力。
  • 版本控制友好:您可以僅將子主題提交到 Git,保持您的代碼庫乾淨並專注於您的更改。

子主題與 WordPress 自定義器:何時使用哪一個

WordPress 提供了幾種自定義網站外觀的方法。了解何時使用子主題與內建自定義器有助於您為每種情況選擇正確的方法。

特徵子主題WordPress 自定義器
代碼更改 (PHP)完全支持不支持
模板覆蓋完全支持不支持
CSS 修改建議用於大更改適合小調整
能夠存活於主題更新是(如果使用主題選項)
所需技術技能基本 PHP/CSS 知識不需要編碼
即時預覽需要手動刷新內建即時預覽
性能影響微不足道微不足道

使用自定義器 當您需要簡單的顏色更改、字體調整或上傳標誌時。使用子主題 當您需要修改模板文件、添加自定義功能或對佈局進行結構性更改時。

如何手動創建子主題

創建子主題只需要兩個文件:style.cssfunctions.php。以下是逐步指南。

步驟 1:創建子主題目錄

通過 FTP 或您的主機文件管理器連接到您的 WordPress 安裝。導航到 wp-content/themes/ 並創建一個新文件夾。命名規則為 parent-theme-name-child。例如,如果您的父主題是 Astra,則將文件夾命名為 astra-child

步驟 2:創建 style.css

在您的新文件夾中,創建一個名為 style.css 的文件,並添加以下標頭:

/*
 主題名稱:   Astra Child
 主題 URI:    https://yoursite.com
 描述:  Astra 的子主題
 作者:       您的名字
 模板:     astra
 版本:      1.0.0
*/

Template 行是關鍵。它必須與父主題的目錄名稱完全匹配(而不是顯示名稱)。檢查 wp-content/themes/ 以確認確切的文件夾名稱。

步驟 3:創建 functions.php

創建一個 functions.php 文件,正確地排隊父主題和子主題的樣式表:

<?php
function child_theme_enqueue_styles() {
    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', 'child_theme_enqueue_styles');

這種方法確保父樣式表首先加載,然後是您的子主題樣式,保持正確的層疊順序。

步驟 4:啟用子主題

在您的 WordPress 儀表板中轉到 外觀 > 主題。您應該會看到您的子主題列出。點擊 啟用。您的網站應該看起來與之前完全相同,因為子主題繼承了父主題的所有內容。

使用插件創建子主題

如果您更喜歡無代碼的方法,幾個插件可以為您生成子主題。最常用的選擇是Child Theme Configurator插件。以下是其工作原理:

  1. 插件 > 添加新安裝並啟用Child Theme Configurator插件。
  2. 導航至工具 > 子主題
  3. 從下拉菜單中選擇您的父主題。
  4. 點擊分析以檢查潛在問題。
  5. 點擊創建新子主題
  6. 該插件生成所有所需的文件,並可選擇複製小部件和菜單設置。

這種方法更快,但對於初始設置的控制較少。對於生產網站,了解手動過程是有價值的,因為它可以幫助您排除後續可能出現的問題。

子主題中的常見自定義

一旦您的子主題啟用,您可以開始進行修改。以下是最常見的自定義場景。

覆蓋模板文件

要修改模板文件,請從父主題目錄中將其複製到子主題目錄中,保持相同的文件夾結構。例如,要自定義單篇文章模板:

  1. 在父主題的文件夾中找到single.php
  2. 將其複製到子主題的文件夾中。
  3. 編輯子主題中的副本。

WordPress將自動使用子主題的版本,而不是父主題的版本。

添加自定義CSS

將您的CSS規則添加到子主題的style.css文件中,位於標頭註釋下方。由於子樣式表在父樣式表之後加載,因此您的規則具有優先權:

/* 自定義標頭背景 */
.site-header {
    background-color: #2c3e50;
    padding: 20px 0;
}

/* 調整文章標題大小 */
.entry-title {
    font-size: 2rem;
    line-height: 1.3;
}

添加自定義功能

子主題的functions.php在父主題的基礎上運行(而不是替代)。您可以添加自定義短代碼、小部件區域、文章類型,或使用WordPress鉤子修改現有行為:

// 添加自定義小部件區域
function child_register_sidebar() {
    register_sidebar(array(
        'name'          => '自定義側邊欄',
        'id'            => 'custom-sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
    ));
}
add_action('widgets_init', 'child_register_sidebar');

自定義標頭和頁腳

header.phpfooter.php從父主題複製到子主題中,然後進行修改。這是您添加自定義導航元素、跟蹤腳本或對這些關鍵區域進行結構更改的方式。

何時不使用子主題

子主題並不總是正確的解決方案。以下是一些替代方案更合適的情況:

  • 輕微的CSS調整:對於幾行CSS,使用自定義器的附加CSS部分。為三條CSS規則創建子主題會增加不必要的複雜性。
  • 功能擴展:如果您添加的功能與主題無關(自定義文章類型、短代碼、集成),請使用自定義插件。這樣可以保持您的功能與主題無關。
  • 頁面構建器網站:如果您完全使用Elementor Pro或類似的頁面構建器進行構建,大多數自定義都在構建器內部進行。子主題在這裡的價值不大。
  • 起始主題:如果您正在構建完全自定義的設計,請從像Underscores (_s)這樣的起始主題開始,或使用框架。子主題暗示您希望保留父主題的設計。

為您的子主題選擇父主題

並非所有父主題都同樣適合子主題開發。尋找編碼良好、定期更新並考慮可擴展性的主題。兩個受歡迎的選擇包括:

  • Astra Pro以其輕量級代碼庫、廣泛的鉤子系統和為子主題開發者提供的清晰文檔而聞名。Astra提供數十個專門用於子主題自定義的動作和過濾鉤子。
  • GeneratePress Premium提供乾淨、結構良好的代碼庫和模塊化組件。其鉤子系統允許在不同點插入內容,而無需覆蓋模板文件。

這兩個主題在更新過程中保持向後兼容性,這在構建需要長期穩定的子主題時至關重要。

排除常見子主題問題

即使是經驗豐富的開發者也會遇到子主題的問題。以下是最常見問題的解決方案:

問題可能原因解決方案
問題原因解決方案
啟用後白屏functions.php中的PHP語法錯誤通過FTP訪問文件,檢查拼寫錯誤、缺少的分號或未關閉的括號
樣式未應用錯誤的佇列順序或缺少父樣式驗證wp_enqueue_style依賴數組
模板覆蓋無效錯誤的文件路徑或命名確保子主題中的文件路徑與父主題結構完全一致
主題未出現在儀表板style.css中的Template值不正確檢查Template是否與父目錄名稱匹配(區分大小寫)
函數運行兩次父主題和子主題都定義了相同的函數使用function_exists()檢查或不同的函數名稱

子主題文件夾結構參考

組織良好的子主題遵循以下結構:

your-theme-child/
├── style.css              (必需 - 主題標頭 + 自定義CSS)
├── functions.php          (必需 - 佇列樣式 + 自定義函數)
├── screenshot.png         (可選 - 主題縮略圖)
├── header.php             (可選 - 標頭覆蓋)
├── footer.php             (可選 - 頁腳覆蓋)
├── single.php             (可選 - 單篇文章覆蓋)
├── page.php               (可選 - 頁面覆蓋)
├── template-parts/        (可選 - 部分覆蓋)
│   └── content-single.php
├── assets/                (可選 - 自定義資源)
│   ├── css/
│   ├── js/
│   └── images/
└── woocommerce/           (可選 - WooCommerce覆蓋)
    └── single-product.php

有關選擇父主題的更多信息,請參閱我們的指南 如何在2026年選擇WordPress主題。如果您在創建子主題之前需要幫助安裝主題,請查看我們的 WordPress主題安裝教程

有關更多詳細信息,請參閱官方文件: 子主題文件, 主題手冊.

常見問題

更新WordPress本身時,我會失去子主題的自定義嗎?

不會。WordPress核心更新不會影響主題。您的子主題及其父主題仍然保留在wp-content/themes/下的各自目錄中。只有父主題的更新可能會導致兼容性問題,但您的子主題文件保持不變。

我可以有子主題的子主題(孫主題)嗎?

WordPress不原生支持孫主題。子主題只能從父主題繼承,而不能從另一個子主題繼承。如果您需要多層自定義,請使用子主題和自定義插件的組合。

子主題會減慢我的網站速度嗎?

子主題的性能影響微乎其微。WordPress會加載一個額外的style.cssfunctions.php文件,這會使頁面加載時間增加幾毫秒。在現實條件下,這種開銷是不可測量的。

我可以將子主題與任何WordPress主題一起使用嗎?

技術上可以,但某些主題與子主題的兼容性比其他主題更可靠。遵循WordPress編碼標準並使用適當掛鉤系統的主題更容易擴展。過度依賴硬編碼路徑或專有框架的主題可能會導致意外行為。

我如何將子主題從測試網站遷移到生產環境?

將整個子主題文件夾從wp-content/themes/your-child-theme/複製到生產伺服器上的相同位置。然後從WordPress儀表板中啟用它。如果您的子主題引用特定的URL,請在遷移後更新這些URL。

我應該使用像Underscores這樣的起始主題的子主題嗎?

像Underscores這樣的起始主題旨在直接修改。它們是自定義主題的起始點,而不是子主題的父主題。直接修改它們並使用版本控制跟踪更改。

如果我停用父主題會發生什麼?

如果父主題被停用或刪除,子主題將無法運行。WordPress無法在沒有父主題的情況下加載子主題。即使您只使用子主題,也請始終保持父主題安裝。

建立在堅實的基礎上

Astra Pro提供廣泛的掛鉤支持和乾淨的代碼架構,使其成為您子主題項目的可靠父主題。

探索Astra Pro →

常見問題

如果我只使用自定義器,是否需要子主題?
如果您的自定義僅限於 WordPress 自定義器中可用的選項(顏色、字體、菜單、小工具),則不一定需要子主題。自定義器將設置存儲在數據庫中,這些設置在主題更新後仍然有效。
子主題會減慢我的網站速度嗎?
正確創建的子主題幾乎不會增加額外負擔。它只會加載一個額外的小 CSS 文件和 functions.php 文件。在實際操作中,性能影響是無法測量的。
我可以為任何 WordPress 主題創建子主題嗎?
是的,您可以為任何 WordPress 主題創建子主題。然而,一些主題如 Divi 和 Avada 擁有自己的自定義系統,可能會使子主題的必要性降低。請查看主題文檔以獲取具體建議。
如果我更改父主題,我的子主題會怎樣?
您的子主題與特定的父主題相關聯。如果您切換到不同的父主題,子主題將不再有效。您需要根據新的父主題創建新的子主題並遷移您的自定義。
如何在不丟失子主題更改的情況下更新父主題?
這正是子主題所解決的問題。當您更新父主題時,只有父主題文件會被替換。您的子主題文件保持不變,自定義也會自動保留。

分享此文章

關於作者

Can Bayar
Can Bayar

WordPress 專家

擁有超過10年外掛和佈景主題開發經驗的資深WordPress開發者。專精於WooCommerce、Elementor和效能優化。

WordPressWooCommerceElementorPHPJavaScript效能優化

保持更新

在您的收件匣中獲取最新的WordPress技巧和教學。