點樣建立 WordPress 子主題

想自訂您嘅 WordPress 主題但又想確保安全？唔使擔心。我哋已經為你準備好晒。睇吓下面篇文章，你就識得用 WordPress 子主題嚟自訂你嘅 WordPress 主題啦。WordPress 子主題嘅作用係將你嘅自訂設定保存喺另一個資料夾入面，咁樣就算更新父主題都唔會影響到你嘅設定。

子主題係咩意思？

基本上，子主題係任何主題嘅反映。呢度嘅概念係，無論你喺子主題度做咩改動，你嘅父主題都唔會受影響，但父主題入面嘅任何改動都會反映喺子主題度。

使唔使使用子主題？

毫無疑問，使用子主題係修改主題最安全嘅方法。最好嘅部分係，就算你嘅父主題被更新，你嘅改動都唔會被刪除。如果你喺修改子主題嗰陣遇到任何問題，你可以輕鬆刪除佢，返去父主題度。

設置 WordPress 子佈景主題

你可以手動或者借助插件嚟設置 WordPress 嘅子佈景主題。

你要記住嘅一點係，直到你嘅父佈景主題喺「外觀」下面嘅「佈景主題」頁面出現之前，佢都唔會生效㗎。

方法一：手動創建子佈景主題

#1：首先，你要開一個新嘅資料夾，然後隨你鍾意改個名，例如「twentytwentyfour-child」。

#2：跟住你要開一個新檔案，改名做「style.css」，記住呢個檔案一定要有。

#3：而家你要打開啱啱開咗嘅呢個檔案，然後入面打以下嘅資料。

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://example.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

關鍵參數解釋：

Theme Name：（必填）你嘅子主題名稱。
Template：（必填） 呢個最關鍵嘅一行。佢必須完全對應其父主題嘅目錄名。例如，父主題係 twentytwentyfour，呢度就填 twentytwentyfour；父主題係 Divi，呢度就填 Divi。大小寫必須一致。
Description: 子主題嘅簡短描述。
Author: 你個名。
Author URI: 你嘅網站地址。
Version: 子主題嘅版本號。

雖然子主題嘅 CSS 會自動載入，但佢唔會自動繼承父主題嘅所有樣式。為咗令你嘅子主題有一個完整、可靠嘅起點，一個好普遍同推薦嘅做法係：首先導入父主題嘅完整樣式表。

你可以在你嘅自訂 CSS 入面之前，使用 @import 規則嚟做到呢樣嘢。

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://www.likacloud.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

/* 导入父主题的样式以确保设计基础一致 */
@import url("../twentytwentyfour/style.css");

/* 自定义样式从这里开始 */

/* 1. 更改文章标题颜色 */
.wp-block-post-title {
    color: #1a4f6e;
    font-weight: 700;
}

/* 2. 更改网站背景色 */
body {
    background-color: #f8f9fa;
}

/* 3. 更改主内容区域的宽度 */
.wp-block-group.alignwide {
    max-width: 1280px;
}

/* 4. 自定义链接颜色 */
a {
    color: #d14545;
}
a:hover {
    color: #a23434;
    text-decoration: none;
}

注意

雖然 @import 係最簡單嘅方法，但係從效能角度嚟講，佢唔係最理想嘅（因為佢會阻住並行加載）。更高階嘅方法係用 wp_enqueue_style() 函數喺子主題嘅 functions.php 檔案入面將父主題嘅樣式表加入隊列。但係對於初學者，用 @import 係完全可行同易明嘅。

比如噉樣：

<?php
// 确保在正确的钩子上加载样式
add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles');

function enqueue_parent_and_child_styles() {
    // 加载父主题样式
    wp_enqueue_style('parent-style', get_template_directory_uri() . 'https://www.likacloud.com/style.css');
    
    // 加载子主题样式，并指定依赖于父主题样式
    // 这样可以确保子主题样式在父主题样式之后加载，保证样式覆盖生效
    wp_enqueue_style('child-style', 
                     get_stylesheet_directory_uri() . 'https://www.likacloud.com/style.css',
                     array('parent-style'), // 依赖关系
                     wp_get_theme()->get('Version') // 版本号，可选
                    );
}

代碼解釋：

add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles')：將自定義函數掛載到 WordPress 嘅樣式加載鈎上
get_template_directory_uri()：獲取父主題目錄嘅 URL
get_stylesheet_directory_uri()：獲取子主題目錄嘅 URL（子主題啟動嗰陣）
array('parent-style')：聲明子主題樣式依賴於父主題樣式，確保加載順序正確

呢個方法相比 @import 更高效，因為佢容許瀏覽器並行加載樣式表，同埋可以更好咁管理樣式之間嘅依賴關係。

你只需要將呢段代碼加喺子主題嘅 functions.php 喺文件入面（如果個文件唔存在就創建一個），同時保持你已有嘅子主題 style.css 頭部註解資訊就得。

所有其他細節都可以根據你嘅意願進行更改。

完成呢個步驟之後，你應該轉去「外觀>>主題」並檢查你嘅子主題係咪已經創建咗。如果係，恭喜你，你可以啟動佢嚟測試佢係咪繼承咗父主題嘅設計。