如何创建 WooCommerce 店面子主题 [完整指南]

已发表: 2022-01-05

如何创建 WooCommerce 店面子主题 在本文中，我们将了解如何通过四个简单的步骤创建 WooCommerce Storefront 子主题。 Storefront WooCommerce 主题是 WooCommerce 成功的主要原因之一，因为它免费且易于使用，可以轻松创建独特的商店。

此外，Woocommerce 提供了几乎无限的定制可能性，这是促成 WooCommerce 成功的另一个重要因素。 这意味着当与正确的主题相结合时，它将为您提供很大的设计灵活性。

WooCommerce 店面儿童主题

对于专业的外观，店面主题是一个不错的选择。 现在您的 WooCommerce 商店已经启动并运行，您可能仍希望自定义商店的外观以符合您的确切愿景。

安装 WooCommerce 店面主题后，下一步您需要创建 WooCommerce 店面子主题，这将使您能够更改您的店面父主题主题，而无需直接编辑父主题的代码。

这样可以轻松自定义商店的外观，并消除主题和商店的潜在风险，尤其是在 WooCommerce Storefront 主题更新时丢失您添加的自定义的风险。

创建 WooCommerce 店面儿童主题

为什么要创建 WooCommerce 店面儿童主题？

如果您花了很多时间阅读 WordPress，那么您之前可能遇到过儿童主题。 简单来说，子主题是另一个主题的副本，通常称为“父主题”。

这意味着您可以更改子主题并对其进行测试，而无需直接编辑父主题。 更改子主题很重要，因为更改原始主题可能会导致不可逆转的错误，甚至损坏您的网站。

此外，您可能想创建一个子主题，因为您想使用另一个主题作为基础。 这将节省您的时间，您不必完全从头开始构建新主题。

此外，您可能希望对主题的品牌或整体美感进行一些小改动。 根据您愿意为正在进行的项目投入的时间，使用子主题会带来许多可能性。

但是，您可以从官方 WooCommerce 商店或 ThemeForest 等其他网站下载多个选项，但现有的子主题都不符合您的需求。 此外，您可能想要创建独特的外观。 Storefront 儿童主题旨在为您的利基市场提供完美的商店体验。

还值得一提的是，创建子主题的实际过程对于 WooCommerce 或更通用的 WordPress 网站是相同的。 尽管如此，在自定义子主题时，您仍需要牢记商店的目的。

如何创建 WooCommerce 店面子主题

在本教程中，我们将创建一个使用 Storefront 作为其父主题的主题。 您可以使用任何主题作为基础。 在继续之前创建站点的备份也很重要，因为如果在开发过程中出现问题，这将确保您的商店安全。

此外，使用 staging 环境来创建和调整您的子主题也很聪明。 要创建子主题，我们只需要开始三件事：子主题目录、style.css 文件和functions.php 文件。

以下是创建 WooCommerce 儿童主题所需遵循的步骤。

1. 创建主题文件夹

这个主题文件夹将存放您的样式表和函数文件。 从专家的角度来看，使用父主题的名称作为文件夹名称并附加“-child”是理想的。 在本教程中，我将我的目录命名为“Storefront-child”。 检查您的子主题的目录名称是否没有空格以避免可能的错误也很重要。

创建 WooCommerce 店面儿童主题

2.子主题样式表

创建文件夹后，您需要为子主题创建样式表。 样式表需要设置为继承父主题的样式。

为此，您需要插入以下样式表标题并将其替换为相关详细信息。 还值得一提的是，此处所做的自定义将覆盖父主题样式。

 /*

 主题名称：店面儿童

 主题 URI：http://sitename.com/storefront/

 描述：店面儿童主题

 作者：你的名字

 作者 URI：http://sitename.com

 模板：店面 /*这是区分大小写的*/

 版本：1.0.0

 许可证：GNU 通用公共许可证 v2 或更高版本

 许可证 URI：http://www.gnu.org/licenses/gpl-2.0.html

 标签：浅色、深色、全宽、响应式布局、可访问性就绪

 文本域：storefront-child

*/

/*主题定制从这里开始*/

但是，在本教程中，我不会教你如何使用 CSS，因为本文无法涵盖。 您需要学习 CSS 或聘请开发人员在您的网站上进行 CSS 调整。

3.儿童主题功能

在之前的方法中，他们建议您在样式表中使用“@import”来加载您的子主题。 需要注意的是，这不再被视为最佳实践。 但是，您只需要将父主题的样式表“排队”到子主题的 functions.php 文件中。

为此，您可以使用“wp_enqueue_scripts action”并使用“wp_enqueue_style()”。 还值得一提的是，您的子主题的样式表通常是自动加载的。

您需要将其排入队列以便加载，并且您需要确保子样式表获得优先权。 为了使事情变得更容易，我创建了以下代码，将“父样式”设置为依赖项，以便您的子主题样式表在它之后加载。

 <?php

功能主题入队样式（）{

$parent_style = '父样式';

wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

?>

4.激活

现在子主题文件夹已经完成，您需要为您的子主题文件夹创建一个 .zip 文件，以便您可以将其添加到您的 WordPress 主题中。

您可以使用 7-zip 或 Winrar 来执行此操作。 确保您的子主题文件夹中有 style.css 和 functions.php 也很重要。

此外，在激活子主题之前，请务必注意并记录其他插件设置。 之后，您可以通过Appearance > Add Themes将其上传到您的 WordPress 中。 上传主题 创建 WooCommerce 店面子主题

WordPress 将像安装任何主题一样安装它，一旦安装，您需要通过点击“激活”来激活它，方法是转到外观 > 主题，如下所示： 创建 WooCommerce 店面儿童主题

激活后，它看起来与原始主题相同。 子主题正在从您的父主题中提取样式。 然后，您需要发挥创意并自定义样式表中的外观。

此外，您可以通过将要更改的模板文件（例如 header.php）从父主题文件夹复制到子主题文件夹来更改主题的模板文件。

此外，您还需要进行一些更改以指定 WordPress 使用哪个函数来引用模板文件。 这意味着您将使用 get_stylesheet_directory(); 函数而不是 get_template_directory() 来引用您的模板。

结论

至此，我确信您可以创建 WooCommerce 店面子主题。 我强烈建议您复习 CSS 以充分利用您的样式，并查看我们关于创建子主题的其他指南以获得更多建议。

您也可以从第三方提供商处购买儿童主题，但您不必依赖他人的创造力。 这是因为创建 WooCommerce 店面子主题并不像您想象的那么困难。

此外，它使您几乎可以完全控制商店的外观和功能。 因此，您需要创建一个，因为它被认为是在您的 WooCommerce 网站上进行开发工作时的最佳实践。

此外，直接修改主题存在在更新期间丢失修改的风险。 子主题将确保修改完好无损。

类似文章

  1. 什么是 WooCommerce 店面主题？ [已回答]
  2. 定制店面 WooCommerce 主题的 80 多种技巧：终极店面主题定制指南
  3. 如何在 WooCommerce 结帐页面上添加信任或安全徽标
  4. 结帐后如何重定向 WooCommerce：重定向到自定义感谢页面
  5. 如何为插件创建 WooCommerce 管理员通知 – WooCommerce 开发
  6. 如何在 PHPMyAdmin 中创建 WordPress 数据库
  7. 如何使用 For & Foreach 循环在 WordPress 中创建多个小部件
  8. 如何在 WordPress 中为插件创建简码
  9. 如何通过命令行创建 MySQL 数据库 WordPress
  10. WordPress 完整初学者入门的前 20 个步骤
  11. 如何按类别显示 WooCommerce 产品
  12. WooCommerce 注销 PHP 代码段以创建注销按钮
  13. 如何在 WooCommerce 商店页面中更改添加到购物车按钮文本
  14. 如何在 WooCommerce 中设置特色产品
  15. 如何在 WooCommerce 中添加自定义运输方式