如何创建 WordPress 子主题

2025-08-22
2分钟阅读
1,206

自定义您的 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') // 版本号,可选
                    );
}

代码解释:

  1. add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles'):将自定义函数挂载到 WordPress 的样式加载钩子上
  2. get_template_directory_uri():获取父主题目录的 URL
  3. get_stylesheet_directory_uri():获取子主题目录的 URL(子主题激活时)
  4. array('parent-style'):声明子主题样式依赖于父主题样式,确保加载顺序正确

这种方法相比 @import 更高效,因为它允许浏览器并行加载样式表,并且能更好地管理样式之间的依赖关系。

你只需将这段代码添加到子主题的 functions.php 文件中(如果文件不存在则创建一个),同时保持你已有的子主题 style.css 头部注释信息即可。

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

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

方法二:使用插件创建子主题

如果手动执行此作对您没有吸引力,您可以自由使用免费的 WordPress 插件来为您完成这项工作。那里有大量的免费插件,可以为您创建子主题,并使您免于手动执行所有这些作。我们将使用子主题配置器插件,但您可以自由使用任何可用的插件。

如何创建 WordPress 子主题 - LikaCloud云计算

#1: 首先,您需要下载 Child Theme Configurator 插件。

#2: 现在登录您的网站并访问您的仪表板。

#3: 导航到 插件(Plugins),然后 添加新(Add New) 选项。

#4:现在,您必须通过单击“上传插件”选项上传您刚刚下载的插件,然后激活它。

#5:确保激活要为其制作子主题的主题非常重要。

#6:这可以通过简单地导航到“工具”部分并单击子主题来完成。

#7: 现在单击分析按钮并按照插件提到的设置创建您的子主题。

#8: 现在您必须单击“创建新的子主题”选项。

编辑其他模板文件

您必须在子主题中编写该函数,以防您希望向其添加任何自定义函数。请随意使用子主题创建父主题的任何结构或布局更改。

假设您创建了 twentytwentyfour 的子主题,您希望更改其显示单页的方式。单页的位置是 twentytwentyfour-child/template-parts/content-single.php

#1:在子主题文件夹中,创建一个content-single.php。您需要对名称和结构格外小心。它们需要与父主题相同,以便覆盖它们。

#2: 接下来,您需要创建一个新文件夹并将此文件放入其中,但要特别确定路径并确保它看起来与父主题的路径完全相同。

#3: 就这样。在此步骤中,您所要做的就是在content-single.php中编写您的愿望代码,这将覆盖父文件。

谨慎: 确保文件名和文件夹路径必须相同。

我们希望您现在可以轻松创建子主题。如果您有任何疑问,请加QQ群1398231讨论。

查看推荐的WordPress主机云服务商

腾讯云
腾讯云 高性价比
腾讯云有着良心云的称号,每期的活动对于个人来说都会很优惠,还有每周四秒杀等
7×24小时服务 活动不断 超高性价比
4核4G 79元起
访问腾讯云 →
阿里云
阿里云 推荐
阿里云对于个人或者企业来说都有很多优惠的机器,比如每日秒杀,99计划等
新客1.5折起 企业级安全 99计划
2核2G 200M仅68元
访问阿里云 →