WordPress子主题为您提供了一种安全的方式来自定义WordPress主题的代码。如果你想直接编辑你的主题的CSS，HTML或PHP，你绝对应该使用WordPress子主题。否则，下次更新模版时可能会丢失所做的更改。

在这个详细的WordPress子主题教程中，您将学习有关WordPress子主题的所有信息，包括如何创建一个。这篇文章将涵盖：

• WordPress中的父主题是什么？
• 什么是WordPress中的子主题？
• 创建子主题的好处
• 如何在WordPress中创建子主题
• 创建子主题的其他三种方法

让我们开始吧。

索引.php和样式.css文件（分别为主模板和样式文件）是唯一必需的模板文件。但是，大多数主题还将包括PHP文件，本地化文件，图形，JavaScript和/或文本文件。

所有主题都被视为父主题，子主题除外。让我们仔细看看什么是子主题以及它为 WordPress 网站所有者提供的好处。

对子主题进行修改时，它们将与父主题的文件分开。此外，您对子主题所做的任何修改都将优先于父主题中的行为。

请务必注意，子主题不会自行运行。它必须与父主题一起安装。

安装子主题时，您将能够在 WordPress 仪表板中看到它已连接到父主题。

创建子主题的好处

创建子主题允许您修改父主题，而不会丢失自定义项。

如果没有子主题，每当您想要进行更改时，您都必须直接修改父主题的文件。这意味着，每当您更新父主题时，您的所有更改都将被覆盖。

结果，您将面临一个不可能的选择。您可以忽略对模版的所有更新，这可能会导致兼容性和安全性问题。或者，您可以更新并丢失自定义项，以及您花在创建自定义项上的时间。

创建和自定义子主题的另外两个好处与第一个好处有关。

• 将这些修改保存在与主题不同的文件夹中，可以轻松复制或从一个站点移动到下一个站点。
• 您可以在低风险环境中开始学习和涉足主题开发。如果您开始自定义子主题并且出现问题或不满意，则可以禁用子主题。这将恢复父主题和您的网站原样。

现在您已经了解了创建和自定义子主题的理想用例，让我们演练下面的过程。

如何在WordPress中创建子主题

在WordPress中创建子主题只需要几个步骤。下面我们将深入介绍每一个，以便您可以继续学习。此演示将使用默认的WordPress主题 Twenty Twenty-One作为示例，但基本步骤将适用于任何WordPress主题。

通常，您只需要两个文件即可创建基本的子主题：

1. 风格.css
2. 函数.php

在本节中，我们将向您展示如何在WordPress中手动创建子主题。但是，如果您想节省一些时间，还有一些工具/策略可以自动化该过程。我们将在下一节中分享这些内容。

即使您确实使用了这些其他方法之一，阅读手动方法仍然很有帮助，因为它将帮助您更好地了解子主题的工作原理。

步骤1：创建子主题文件夹。

首先，您需要创建一个文件夹，您可以在其中放置子主题的所有模板文件和资源。

现在，您可以在本地计算机上创建此文件夹。在本教程的后面部分，您将学习如何通过将文件添加到 Zip 文件夹并通过 WordPress 仪表板安装它们来在您的网站上安装子主题。

使用父主题的文件夹名称命名此文件夹，并在末尾添加“-child”。因此，如果要创建“二十二十一”子主题，请将文件夹命名为“二十二十一-子”。

第 2 步：为您的孩子主题创建样式表。

接下来，您需要在子主题文件夹中创建“style.css”文件，该文件将包含子主题的所有 CSS 规则和声明。

这个文件也是你用来告诉WordPress使用哪个父主题的文件，所以它非常重要。

要创建文件，您可以使用任何基本的文本编辑器（例如，记事本）或您喜欢的代码编辑器（例如，Sublime Text）。

最重要的是，您必须在文件的最顶部添加所需的标头注释，以使样式表实际工作。

此注释包含有关子主题的基本信息，包括它是具有特定父主题的子主题。

您实际上只需要包含两个元素：

1. 主题名称。这是子主题的名称。它可以是您网站的名称，也可以只是“[主题名称] Child”之类的内容。对于我们的示例，我们将它设为“HubSpot Twenty Twenty-One”。
2. 模板。这是包含父主题的目录的名称。这是将子主题与父主题联系起来的重要组成部分。对于二十二十一的主题，这是“二十二十一”。对于其他主题，它通常是主题名称，但您可能需要仔细检查。您可以通过查看 wp-content/themes 文件夹或下载主题并打开 Zip 文件来执行此操作。

同样，上述两个元素是您的孩子主题正常运行的 100% 必需的。

但是，您可以自由添加其他信息，包括说明、作者姓名、版本和标签。这些将影响子主题在“外观>主题”仪表板中的显示方式，如果您要发布或销售子主题，它们也会有所帮助。

我们建议还包含版本号，因为这样可以更轻松地将主题的样式表排队。

下面是 Twenty Twenty-One 子主题的完整标题注释示例：

/*

Theme Name: HubSpot Twenty Twenty-One

Theme URI: https://example.com/twenty-twenty-one-child/

Description: Twenty Twenty-One Child Theme

Author: Anna Fitzgerald

Author URI: https://example.com

Template: twentytwentyone

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: two-column, responsive-layout

Text Domain: twentytwentyonechild




*/

请注意斜杠和星号。这些表示此代码将在CSS中“注释掉”，因此WordPress不会尝试执行它。

您可以稍后在准备好开始自定义子主题时添加自定义 CSS。

现在，单击“保存”，以便此样式表将保存在子主题的目录中。

第 3 步：将父主题和子主题的样式表排队。

现在是时候将父主题和子主题的样式表排队了。这将确保两件事：

1. 子主题继承其父主题的样式。因此，当您激活子主题时，您不只是在查看一堆无样式的文本。
2. 子主题的样式表在父主题的样式表之前加载 - 而不覆盖它。这样，一旦您添加了自定义 CSS 并以其他方式修改了子主题，这些修改将增加或替换父主题的某些样式和功能。

不幸的是，此步骤可能有点棘手，因为您需要使用的代码将部分取决于您的父主题的编码方式。

对于大多数主题，您应该能够使用以下代码：

<?php

add_action( 'wp_enqueue_scripts', 'hubspot_blog_theme_enqueue_styles' );

function hubspot_blog_theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

?>

但是，如果此代码不起作用，则您的主题可能以不同的方式编码，或者它可能不遵循 WordPress 代码约定。在这种情况下，您可以查阅WordPress Codex或尝试我们将在本文后面分享的其他方法之一。

第 4 步：安装并激活您的子主题。

一旦你创建了两个需要的文件——“style.css”和“functions.php”——你就有了基本子主题所需的一切。

要将子主题打包到可以通过 WordPress 仪表板安装的文件中，您需要将子主题文件夹压缩为 Zip 文件。

在Windows和macOS上，您应该能够通过右键单击本地计算机上的文件夹并选择压缩为Zip文件的选项来执行此操作。

这是在macOS上的样子。

现在，您可以像安装任何其他WordPress主题一样安装此Zip文件。

要上传文件，请转到您的 WordPress 仪表板，然后单击外观>主题>上传主题。然后，使用文件选取器选择刚创建的 Zip 文件，然后单击“立即安装”。

上传后，您应该会看到来自WordPress的消息，告诉您它需要父主题并确认已安装父主题。

如果一切正常，请单击“激活”按钮。

好消息：您的孩子主题现已上线！在仪表板中打开主题时，您应该会看到正确的详细信息。

注意：要控制为模版显示的图片缩略图，您可以将名为 screenshot.jpg 或 screenshot.png 的图片上传到子主题的文件夹。这是完全可选的;它只是使您的仪表板看起来更好。

但是，现在唯一的问题是您的子主题看起来与您的父主题完全相同。要解决这个问题，是时候进行自定义了。

第 5 步：自定义您的孩子主题。

您可以通过三种主要方式使用子主题来自定义父主题：

1. 自定义 CSS。
2. 函数中的代码片段.php。
3. 自定义模板文件。

自定义 CSS

要自定义子主题，您可能会首先将 CSS 添加到子主题目录中的 style.css 文件中。这是更改主题的最简单方法之一。

无论您是要自定义父主题的配色方案、填充、排版还是其他基本设计元素，只需将代码添加到标题注释下方的子主题样式表中即可。此代码将覆盖父主题样式表中的代码。

函数.php

另一方面，要修改父主题的功能，您需要将函数添加到子主题目录中的 functions.php 文件中。

例如，如果要允许作者和其他用户以不同的方式格式化其帖子，则可以使用 add_theme_support（） 函数。

要允许他们将帖子格式化为注释、链接、图像库、引用、单个图像或视频，您需要将以下内容添加到子主题目录中的函数.php文件中：

add_theme_support( 'post-formats', array ( 'aside', 'gallery', 'quote', 'image', 'video' ) );

您可以在文件的开始和结束 PHP 标签之间放置任意数量的函数。

自定义模板文件

最后，您还可以使用子主题直接修改父主题的模板，例如单个博客文章或网站标题的模板。

但是，这需要对PHP和HTML有深入的了解，因为您将直接使用这些语言。您还需要了解WordPress模板层次结构。

如果您对这些技术不满意，则可能需要跳过此操作或使用可视化构建器，例如Elementor Pro或Divi。

要编辑模板文件，您首先需要将该模板文件从父主题的文件夹复制到子主题的文件夹。

例如，要编辑单个帖子模板，您可以将单个.php文件从父主题复制到子主题。

然后，您可以对子主题目录中的单个.php文件进行直接代码编辑。当父主题和子主题文件夹中都存在模板文件时，WordPress 将使用子主题中的模板文件。

但是，由于您已将模板文件添加到子主题，因此在更新父主题时不会覆盖该文件。

就是这样！您的孩子主题很好。在WordPress暂存环境中测试您的网站，然后实时推送您的更改。

创建WordPress子主题的其他选项

虽然上面的说明向您展示了如何手动创建 WordPress 子主题，但您可能不需要手动路线。

以下是开始为您的网站使用子主题的其他三个选项。

1. 查看您的模版开发者是否提供预制的子模版。

因为如果要对主题进行修改，则必须使用子主题，因此许多主题开发人员都提供了一个预制的子主题，您可以将其与父主题一起使用。

通常，您应该能够在模版开发人员的支持文档中找到指向此子主题的链接。或者，您可以联系您的模版开发者寻求帮助。

例如，流行的 Astra 主题提供了自己的 WordPress 子主题生成器工具，该工具将为您创建必要的文件。

大多数其他流行主题也是如此。

2. 使用 WordPress 子主题插件。

如果您的模板开发人员不提供预构建的子主题（并且您不想使用手动方法），您还可以使用 WordPress 子主题插件来生成您的子主题。

以下是一些最受欢迎的免费儿童主题插件。

• 子主题向导
• WP儿童主题生成器
• WPS儿童主题生成器
• 儿童主题创作者 奥比修斯

例如，使用免费的子主题向导插件，您可以转到“工具→子主题向导”，只需单击几下即可轻松设置子主题。

图片来源

3. 使用基于浏览器的 WordPress 子主题生成器。

除了插件，您还可以使用基于云的 WordPress 子主题生成器，您可以通过浏览器访问该生成器。

免费的儿童主题生成器网站是最受欢迎的选择之一。您需要做的就是输入一些基本信息，该网站将允许您下载子主题的两个关键文件。

如果您的父主题列在 WordPress.org，该网站还可以尝试为您预填充信息。

图片来源

WordPress子主题不起作用

您的孩子主题不起作用吗？以下是一些需要检查的事项。

1. 仔细检查您的函数.php文件。

确保已在 functions.php 文件中将子主题的样式表排队。如果您尚未将其排队，则不会加载子主题。

您的网站将保留在父主题上，因此看起来没问题。问题是您对子主题所做的更改不会显示在前端。请参阅上面的步骤 3 将排队代码添加到 PHP 文件中。

2. 确保将工作表命名为“样式.css”。

检查以确保您将CSS工作表命名为“style.css”，而不是“stylesheet.css”。由于“style.css”是WordPress标准命名约定，使用该文件名将使你的函数.php文件自动知道那是你的样式表。如果您将样式表命名为任何其他名称，则 functions.php 文件将无法检索它并将其呈现给最终用户。

3. 确保在样式中使用了正确的模板名称.css。

如果您没有在样式.css文件中输入正确的模板名称，WordPress 将不知道哪个主题是父主题。

同样，模板名称应该是包含父主题的文件夹的名称。

4. 清除缓存。

尝试清除您的WordPress缓存 - 您的WordPress服务器可能会向您显示您网站的旧版本。

如果您安装了缓存插件以提高网站的速度，您可能还希望在处理子主题时停用它。

除了清除WordPress缓存外，出于同样的原因，您还应该清除浏览器缓存。或者，在隐身窗口中打开您的网站以查看已发布的更改。

5. 将 ！important添加到您的 CSS 代码中。

如果父主题仍然覆盖子主题的 CSS 代码，请将 ！important 添加到您更改的元素中。这将强制覆盖父主题的 CSS 工作表上编写的任何内容。您可以在分号之前添加 ！important，如下所示：

p { background-color: gray !important; }

重要规则可用于 ID、CSS 类和标准 HTML 元素，如段落、表格、标题等。

若要了解有关此属性的详细信息，请查看如何在 CSS 中使用 ！important 属性。

6. 联系您的主题支持或查看主题论坛。

如果您已完成所有这些步骤，但 CSS 仍未加载，那么是时候联系您的主题支持团队或查看主题的论坛 WordPress.org 了。

虽然这应该是您的最后手段，但它的好处是可以为您提供特定于您的主题的答案。

您的 WordPress 主题的开发人员可能已使用自定义代码或为主题文件实施了不同的命名系统。

创建您的WordPress子主题。

安装 WordPress 主题是创建 WordPress 网站的第一步。要自定义它，您可以使用内置的古腾堡编辑器或主题构建器（如果它附带）。但是，要更进一步，不仅自定义其设计，还自定义其功能，您需要创建一个子主题。