如何创建 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 只需在标题中添加注释信息即可。

所有其他细节都可以根据您的意愿进行更改。

完成此操作后，你应该转到“外观>>主题”并检查你的子主题是否已创建。如果是这样，恭喜你，你可以激活它，测试它是否继承了父主题的设计。