零基础入门:手把手教你如何搭建一个专业的 WordPress 子主题

2 分钟阅读
2026-03-11
2026-06-03
2,099
通过下方链接进行购物时,您无需支付额外费用,我就能获得佣金。.

在 WordPress 生態中,子主題是進行網站定製和升級維護的安全基石。它允許你繼承父主題的所有功能、樣式和模板檔案,同時在獨立的目錄中進行修改。這意味著,當父主題釋出安全補丁或功能更新時,你可以一鍵更新而無需擔心精心編寫的自定義程式碼被覆蓋。無論是調整顏色、修改佈局,還是新增複雜功能,透過子主題來實現都是最佳實踐。

為什麼必須使用子主題

直接修改父主題檔案是一種高風險操作。一旦父主題更新,你的所有修改都將丟失,需要重新手動應用,這個過程極易出錯且耗時耗力。更重要的是,在團隊協作或未來網站遷移時,沒有明確的修改記錄會帶來巨大麻煩。

子主題透過“覆蓋”機制解決了這一問題。當 WordPress 渲染一個頁面時,它會首先在子主題目錄中尋找對應的模板檔案。如果找到,就使用子主題的版本;如果沒找到,則自動回退到父主題的版本。這種機制讓你可以只修改需要的部分,其餘部分則繼續享受父主題的更新與維護。

推荐阅读 入门级 WordPress 主题开发指南:从零开始搭建你的第一个主题

此外,使用子主題是 WordPress 官方推薦的做法,它能保持程式碼的整潔和可維護性,是專業開發的標誌。

UltaHost WordPress 主機
30天退款保證,無限頻寬與資料庫,免費的 DDoS 防護,購買3年優惠50%

建立子主題的基本結構

建立一個子主題非常簡單,只需要兩個基礎檔案:一個樣式表和一個函式檔案。首先,你需要在 /wp-content/themes/ 目錄下建立一個新的資料夾,通常命名為“父主題名-child”,例如 twentytwentyfour-child

建立核心樣式表文件

子主題的核心是它的樣式表文件 style.css。這個檔案不僅包含 CSS 規則,更重要的是其檔案頭註釋,用於向 WordPress 宣告這是一個子主題以及它的父主題是誰。

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    https://example.com/twentytwentyfour-child/
 Description:  Twenty Twenty-Four Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentyfour
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentyfour-child
*/

其中,Template: 這一行至關重要,它的值必須與父主題的目錄名完全一致,區分大小寫。這就是 WordPress 識別父子關係的依據。

引入父主題樣式表

僅有上述檔案,子主題還無法載入父主題的樣式。你需要在子主題的函式檔案 functions.php 请将下文翻译成中文,并详细说明翻译过程: wp_enqueue_scripts 鉤子來排隊載入父主題的樣式表。

推荐阅读 打造专业网站必备指南:WordPress主题开发与定制全攻略

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_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')
    );
}
?>

get_template_directory_uri() 函式獲取父主題目錄的 URL,而 get_stylesheet_directory_uri() 獲取當前活動主題(子主題)目錄的 URL。透過依賴陣列 array( 'parent-style' ) 確保子主題的樣式在父主題樣式之後載入,從而使你的自定義 CSS 規則能夠正確覆蓋父主題的樣式。

擴充套件子主題的功能

建立基本結構後,你可以透過 functions.php 檔案無限擴充套件網站功能。這個檔案中的程式碼會先於父主題的 functions.php 檔案執行,為你提供了修改核心功能的絕佳入口。

自定義網站功能

例如,你可能想為網站新增一個新的自定義文章型別“專案”。你可以在子主題的 functions.php 檔案中註冊它。

hostng.com 共享主机
高效能,配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed,全天候 24 小时专业内部支持,先进的安全措施包括 SSL、暴力破解、恶意软件和 DDoS 防护,节省高达 731 TB/月的带宽成本。
add_action( 'init', 'register_project_post_type' );
function register_project_post_type() {
    $args = array(
        'public'      => true,
        'label'       => '项目',
        'has_archive' => true,
        'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'menu_icon'   => 'dashicons-portfolio',
    );
    register_post_type( 'project', $args );
}

同時,你也可以移除某些不必要的父主題功能。例如,如果父主題透過一個特定的函式添加了你不想要的頁尾小工具,你可以使用 remove_action() 來解除它。假設父主題在 init 鉤子上用 parent_theme_footer_widgets 函式添加了小工具,你可以這樣移除:

add_action( 'after_setup_theme', 'remove_parent_theme_features', 15 );
function remove_parent_theme_features() {
    remove_action( 'init', 'parent_theme_footer_widgets' );
}

注意,這裡使用 after_setup_theme 鉤子並設定一個稍大的優先順序(如15),是為了確保父主題的程式碼已經執行了 add_action,這樣我們的 remove_action 才能生效。

覆蓋父主題模板檔案

子主題最強大的功能之一是覆蓋父主題的模板檔案。如果你想修改文章單頁的顯示方式,只需將父主題中的 single.php 複製到你的子主題目錄中,然後進行編輯。WordPress 會自動使用你的版本。

推荐阅读 释放潜能:探索构建高级 WordPress 主题的核心技术与最佳实践

對於更細粒度的控制,你甚至可以覆蓋模板部件(Template Parts)或特定的模板塊。例如,要修改文章元資料的顯示,可以複製並編輯父主題中的 template-parts/content-post-meta.php 檔案到子主題的相同路徑下。

子主題開發的高階技巧

當子主題開發進入更專業的階段時,你會涉及到本地化、主題選項繼承和子主題自身更新等高階話題。

InterServer 共享主机
虚拟主机的月费为1TB+5TB,价格为2.50美元。首月优惠价为1TB+5TB,价格为0.1美元。优惠码为"tryinterserver"。平台提供461个云应用脚本,一键安装便捷。

實現文字本地化翻譯

為了讓你的子主題支援多語言,你需要正確設定文字域(Text Domain)並使用翻譯函式。在 style.css 的頭部和 functions.php 中載入文字域是第一步。

关于 functions.php 在中文中,我们可以用“使用”来表达“use”的意思。比如:“我使用了这个工具。”或者“他使用了那个方法。” load_child_theme_textdomain 函式:

add_action( 'after_setup_theme', 'child_theme_localization_setup' );
function child_theme_localization_setup() {
    load_child_theme_textdomain( 'twentytwentyfour-child', get_stylesheet_directory() . '/languages' );
}

之後,在需要翻譯的字串處使用像 esc_html__( 'Your Text', 'twentytwentyfour-child' ) 這樣的函式包裹。然後,你可以使用 Poedit 等工具生成 .po 以及 .mo 翻譯檔案,並存放在子主題的 /languages/ 目錄中。

安全地修改核心函式

有時,你需要修改父主題中一個複雜的函式,而這個函式並沒有透過鉤子(Hooks)提供足夠的靈活性。如果該函式是“可插拔的”(Pluggable),即使用 if ( ! function_exists( ... ) ) 包裹,那麼你可以在子主題的 functions.php 中直接重新宣告該函式,從而完全覆蓋它。

在嘗試此操作前,務必檢查父主題中的函式定義方式。如果它不是可插拔的,強行重新宣告會導致致命錯誤。此時,更安全的方法是聯絡主題開發者或尋找其他過濾鉤子來實現你的需求。

总结

構建 WordPress 子主題是從業者必須掌握的核心技能。它建立了一個安全、可持續的定製化工作流程,將你的自定義程式碼與主題的核心程式碼清晰分離。從建立包含正確頭資訊的 style.css 和載入樣式的 functions.php 開始,到覆蓋模板檔案、擴充套件功能,再到處理本地化和高階覆蓋,每一步都遵循著 WordPress 的最佳實踐。始終堅持使用子主題,是保障你的網站在未來數年裡既能緊跟更新,又能保持獨特外觀和功能的堅實基礎。

常见问题解答(FAQ)

子主題的資料夾名稱有什麼要求

子主題的資料夾名稱沒有嚴格限制,但為了清晰明瞭,通常建議使用“父主題名稱-child”的格式,例如 astra-child。關鍵之處在於 style.css 文件头中的 Template: 欄位,其值必須與父主題的資料夾名稱完全一致,包括大小寫,否則 WordPress 將無法正確建立父子關係。

是否所有父主題都支援建立子主題

絕大多數現代且遵循 WordPress 編碼標準的主題都完全支援子主題。理論上,任何主題都可以作為父主題。然而,一些設計不良或非常古老的主題可能因使用絕對路徑引用資源或缺少必要的模板檔案而導致子主題工作不正常。在選擇父主題時,檢查其文件或使用者評價是明智之舉。

如何將直接修改過的父主題遷移到子主題

首先,在你的本地或測試環境中,基於未修改的原版父主題建立一個新的子主題。然後,逐一對比你之前修改過的父主題檔案與原版檔案的差異。將這些差異程式碼(可能是 CSS、PHP 或 HTML)有組織地遷移到子主題的對應檔案中:CSS 放入子主題的 style.css,功能程式碼放入 functions.php,修改過的模板檔案則複製到子主題目錄後進行更改。這是一個細緻的梳理過程,但一勞永逸。

子主題會影響網站速度嗎

正確建立的子主題對網站速度的影響微乎其微。額外的 CSS 和 JS 檔案通常很小,且透過正確的排隊載入,它們可以被高效地合併和快取。子主題的主要開銷可能來自於 functions.php 中新增的複雜 PHP 邏輯。因此,保持子主題程式碼的精簡和高效,與在父主題中開發時所遵循的原則是一樣的。合理使用快取技術可以進一步抵消任何潛在的效能影響。