如何设置和使用子主题

注意： 本文档旨在用于创建和使用经典子主题。有关创建子块主题的全面指南以及了解经典主题和块主题之间的区别，请参阅 WooCommerce 块主题开发 和 WordPress 块子主题开发。

有时，您可能需要自定义您的主题或 WooCommerce，而这些自定义超出了选项所能提供的范围。这些指南将教您如何通过使用子主题来定制您的网站的基本方法。

什么是子主题？

在开始之前，重要的是您要了解什么是子主题。简而言之，子主题是在父主题之上的一个层，允许您进行修改，而无需从头开始开发一个新的主题。使用子主题的主要原因有两个：

• 主题开发者可以使用子主题来提供主题的变体，类似于我们对 Storefront 子主题 所做的那样。
• 开发者可以使用子主题来托管对父主题或网站上任何插件的自定义，因为子主题的优先级高于插件和父主题。

请阅读 WordPress Codex 上的此指南。

备份

在自定义网站之前，您应该始终确保备份您的网站，以防出现任何问题。更多信息请访问：备份 WordPress 内容。

准备开始

要开始，我们需要准备一个子主题。

创建子主题

首先，我们需要为我们的子主题创建一个新的样式表。创建一个名为 style.css 的新文件，并将以下代码放入其中：

/*
Theme Name: Child Theme
Version: 1.0
Description: Child theme for Woo.
Author: Woo
Author URI: https://woocommerce.com
Template: themedir
*/

接下来，我们需要更改 Template 字段，使其指向我们安装的 WooTheme。在此示例中，我们将使用 Storefront 主题，该主题安装在 wp-content/themes/storefront/ 目录下。结果将如下所示：

/*
Theme Name: Storefront Child
Version: 1.0
Description: Child theme for Storefront.
Author: Woo
Author URI: https://woocommerce.com
Template: storefront
*/

/* --------------- 主题自定义从此处开始 ----------------- */

注意： 对于 Storefront，您无需使用 PHP 从主题的 functions.php 文件中调用任何父主题的样式文件，也不需要将这些样式文件通过 @import 导入到子主题的 style.css 文件中，因为主要的 Storefront 主题已经为您完成了这些操作。

对于 Storefront，一个子主题只需要一个空白的 functions.php 文件和一个 style.css 文件即可开始运行。

上传和激活

您可以选择通过 FTP 客户端或使用 WordPress 中的“添加新主题”选项来上传子主题。

• 通过 FTP。 如果您使用 FTP，这意味着您可以直接访问您的网站的文件夹。 这意味着您需要 FTP 访问权限，以便将新的子主题上传到您的服务器。 如果您没有此权限，请联系您的主机提供商，他们可以为您提供 FTP 登录信息，然后下载一个 FTP 客户端程序来上传您的文件。
• 通过 WP 仪表盘。 如果您将子主题文件夹压缩成一个 .zip 文件，您可以直接从 WordPress > 外观 > 主题 > 添加新 部分将其上传到您的网站。

完成此操作后，您的子主题将被上传到 wp-content/themes/ 目录下的一个新文件夹，例如 wp-content/themes/storefront-child/。 上传完成后，您可以进入 WP 仪表盘 > 外观 > 主题 并激活子主题。

自定义设计和功能

您的子主题现在已准备好进行修改。 目前，它不包含任何自定义设置，因此让我们看看一些示例，了解如何在不修改父主题的情况下自定义子主题。

设计自定义

让我们一起做一个示例，更改网站标题的颜色。 将以下代码添加到您的 /storefront-child/style.css 文件中：

.site-branding h1 a {
    color: red;
}

保存文件并在浏览器中刷新后，您将看到网站标题的颜色已更改！

模板更改

注意： 这不适用于 Storefront 子主题。 对 Storefront 子主题文件的任何修改将在更新时丢失。 建议您不要直接修改 Storefront 子主题的文件，而是将代码片段添加到自定义插件中。 我们创建了一个插件来完成此操作。 免费下载 Theme Customizations。

但是，还有更多！ 您也可以对主题文件夹中的模板文件 (*.php) 执行相同的操作。 例如，如果您想修改页眉中的某些代码，则需要将 header.php 从父主题文件夹 wp-content/themes/storefront/header.php 复制到子主题文件夹 wp-content/themes/storefront-child/header.php。 将其复制到子主题后，编辑 header.php 并自定义您想要修改的任何代码。 子主题中的 header.php 将被使用，而不是父主题中的 header.php。

同样适用于 WooCommerce 模板。 如果您在子主题中创建一个名为 "WooCommerce" 的新文件夹，您可以修改该文件夹中的 WooCommerce 模板，使其与您网站的整体设计更加一致。 关于 WooCommerce 模板结构的更多信息 请参见此处。

功能变更

注意: 您的子主题中的 functions.php 应该为空，并且不应包含任何来自父主题的 functions.php 中的内容。

您的子主题中的 functions.php 会在父主题的 functions.php 之前加载。 如果父主题中的函数是可替换的，那么您可以将该函数从父主题复制到子主题的 functions.php 中，并使其替换掉父主题中的函数。 唯一的条件是父主题的函数必须是可替换的，这意味着它被包含在一个条件 if 语句中，例如：

if ( ! function_exists( "parent_function_name" ) ) {
    parent_function_name() {
        ...
    }
}

如果父主题的函数是可替换的，您可以将其复制到子主题的 functions.php 中，并根据需要修改该函数。

模板目录与样式目录

WordPress 在子主题中对某些内容的处理方式有所不同。 如果您在子主题中有一个模板文件，则需要修改 WordPress 如何包含文件。 get_template_directory() 将引用父主题。 要使其使用子主题中的文件，您需要使用 get_stylesheet_directory()。

有关此内容的更多信息，请参考 WP Codex

子主题支持

虽然我们提供基本的子主题支持，这些问题通常可以轻松解答，但它仍然属于主题定制的范畴，因此请参考我们的 支持政策，以了解我们提供的支持范围。 我们强烈建议任何对子主题感到困惑的用户，请访问 WordPress 论坛 寻求帮助。

示例子主题

下载位于本文顶部的示例子主题，以开始使用。 将子主题放置在您的 wp-content/themes/ 文件夹中，与您的父主题一起。