如何建立 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 頭部註釋資訊即可。

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

完成此作後，您應該轉到“外觀>>主題”並檢查您的子主題是否已建立。如果是，恭喜你，你可以啟用它來測試它是否繼承了父主題的設計。