如何创建 WooCommerce 店面子主题

已发表: 2021-03-04

最后更新 - 2021 年 3 月 5 日

子主题是对现有主题的修改，保留其基本风格和功能。原始主题称为父主题，新修改的主题称为子主题。当您想在不购买新主题的情况下个性化您的商店时，创建您自己的WooCommerce Storefront子主题是一个不错的选择。

获取 WooCommerce 店面！

儿童主题 - 概述

如介绍中所述，子主题将使用父主题作为其基础，并将赋予主题附加功能。当您想为一个主题做出变化时，这通常是一个不错的选择。在 Storefront 子主题目录中，您可以找到适合不同行业和产品类型的一系列优质子主题。这样您就可以轻松地为 Storefront 创建自己的子主题。

使用子主题的优点

直接修改主题存在在更新期间丢失修改的风险。子主题确保修改完好无损。总体而言，开发子主题比创建新主题更快。此外，对于那些对WordPress 主题开发感兴趣的人来说，创建一个子主题是一个很好的实验和学习方式。

以下是创建子主题的一些优点：

有助于为同一主题创建不同的变体以适应不同的领域。
可以单独保存设计自定义而不修改父主题。
即使在更新父主题或 WordPress 或 WooCommerce 的核心文件后，自定义项也可以保留。

创建 WooCommerce 店面子主题

在您尝试自定义主题之前，建议对您的网站进行适当的备份。您需要通过 FTP 访问您的主机才能上传新的子主题。

要开始该过程，请使用 WooCommerce 文档中给出的以下示例代码为子主题创建一个 style.css 文件。

接下来，将模板字段更改为指向 Storefront。

您可能在这里注意到的一个区别是，使用 Storefront，您不需要在为 25 个主题创建子主题时遵循的入队步骤。使用 Storefront 创建子主题时，您只需要一个空白的 function.php 文件和一个 style.css 文件即可启动该过程。

您可以简单地将文件传输到子主题文件夹，创建 zip 文件并上传。完成后，从Appearance > Themes激活新的子主题。

如果您有权访问托管服务，您也可以通过 FTP 上传子主题。您可以使用像 FileZilla 这样的 FTP 程序。

适用于 Mac 和 Windows 的顶级 FTP 客户端。

现在您可以通过向子主题样式表和模板文件添加代码来进行自定义。例如，您可以将任何模板文件从 Storefront 主题文件夹复制到子主题文件夹。子主题文件夹中的这个文件可以通过根据您的要求修改代码来自定义。

如何自定义子主题的设计和功能？

通过上述设置，您已经为 Storefront 创建了一个子主题。但是，您的主题还没有自定义属性。您可以在不修改父主题的情况下向子主题添加功能和设计自定义。

设计变更

例如，在您为子主题创建的上述样式表中，您可以使用以下代码自定义站点标题的颜色：
.site-branding h1 a { color: red; }

模板修改

您还可以修改主题文件夹中的模板文件 (*.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 文档将帮助您了解有关 WooCommerce 模板结构的更多信息。

自定义功能

当您创建子主题时，您会希望它也具有自定义功能。为此，您需要首先确保您的functions.php 文件为空并且不包含来自父functions.php 文件的任何信息。现在，如果父主题函数中的特定函数是可插入的（包装在条件 if 语句中），那么您将能够将其复制到子主题 functions.php。复制可插入函数后，您可以根据需要进行更改。下面是一个可插入函数的示例：
if (!function_exists("parent_function_name")) { parent_function_name() { ... } }

创建一个通用的子主题

与其他主题相比，使用 Storefront 创建子主题的过程不同且更简单。在本文中，我们还将了解通用方法的基本细节。

第一步是创建一个主题目录。接下来，为子主题创建一个样式表（style.css 文件）。 WooCommerce 建议创建一个 functions.php 文件，该文件对于正确地将样式排入队列很有用。

创建一个通用的子主题

与其他主题相比，店面中创建子主题的过程不同且更简单。在本文中，我们还将了解通用方法的基本细节。

创建子主题目录

创建子主题目录并将其放置在 wp-content/themes 中。建议在子主题目录的名称后面加上“-child”，但这不是强制性的。应注意不要在子主题目录名称中留下空格，以免出现任何问题。

创建子主题的样式表

创建样式表标题以启动该过程。下面是为基于二十五主题的子主题创建的样式表标题的 WordPress Codex 示例。

在创建子主题时，您可以将此示例文本用作参考点，并可以将其替换为与您的主题相关的详细信息。 Template 行给出了父主题的目录名称。您必须根据您正在使用的主题对其进行调整。

将父主题和子主题排入队列

在子主题目录中创建一个functions.php 文件以将父主题和子主题排入队列。通过添加 wp_enqueue_scripts 操作和在子主题的 function.php 中使用 wp_enqueue_style() 将父主题样式表排入队列。使用 PHP 标记 (<?php) 打开您的子主题的 function.php。接下来，将父主题样式表和子主题样式表排入队列。下面的屏幕截图是一个示例，仅当您的父主题使用一个 .css 文件来保存 CSS 时才有效。如果有多个.css 文件，如style.css、main.css、ie.css，则确保维护所有父主题依赖项。良好的编码知识水平显然是第一次做到这一点的重要因素。