谷腾堡编辑器

如何将古腾堡编辑器添加到 WooCommerce

想将古腾堡编辑器添加到WooCommerce,但不确定如何操作?你来对地方了!

默认的 WooCommerce 编辑器使用经典的 WordPress 编辑器在您的电子商务网站上添加或编辑产品。

这可能不允许您在 WordPress 中创建直观的产品页面,因为默认编辑器的功能和自定义设置非常有限。

因此,您可能对使用 古腾堡 Gutenberg 编辑器感兴趣,因为它提供了一个强大而简单的用户界面来编辑您的产品页面。

凭借广泛的定制功能,它使您可以更好地控制网站的外观和感觉,并可以使用其拖放构建器轻松设计您的电子商务商店。

但是,WooCommerce 对古腾堡没有任何内置支持。也就是说,有一些简单的方法可以将古腾堡添加到 WooCommerce 并开始构建引人入胜的网站。

在本文中,我们将探讨如何在 WordPress 中为 WooCommerce 启用 Gutenberg 编辑器的不同方法。

为什么要在 WooCommerce 产品页面中使用 Gutenberg 编辑器?

将 Gutenberg 编辑器添加到 WooCommerce 是简化您的网站设计和编辑体验的好方法。

Gutenberg 编辑器具有直观的拖放编辑器和独特的块,可让您向产品页面添加文本、图像和自定义设置。

使用 WooCommerce Gutenberg 编辑器,您可以使用不同的设计元素来创建吸引人的产品描述、修改设计布局以及使您的单个产品页面设计与您的品牌保持一致。

刚到古腾堡?通过此 WordPress 块编辑器初学者指南了解有关什么是古腾堡的所有信息。

如何将古腾堡编辑器添加到WooCommerce?

如果您习惯于使用 Gutenberg 编辑器,那么使用经典的 WordPress 编辑器设计您的 WooCommerce 产品页面可能会令人困惑。

但是,您可以通过使用插件或Functions.php文件向您的网站添加一些代码片段来为 WooCommerce 启用 Gutenberg。

让我们详细探讨这两种方法-

方法1:使用 Code Snippets插件

将 Gutenberg 编辑器添加到 WooCommerce 的最简单方法是使用一个名为 Code Snippets 的插件。方法如下:

第 1 步:安装 Code Snippets 插件

在您的 WordPress 仪表板上转到 Plugins > Add New 并查找 Code Snippets。安装并激活插件。

如何将古腾堡编辑器添加到 WooCommerce

第 2 步:添加代码片段

在仪表板上,导航到 Snippets > All Snippets > Add New。

在此处,添加新的代码段名称,并将以下代码复制并粘贴到代码段的“代码”部分中。

确保在底部启用 Run Snippet Everywhere 并保存更改。这会将古腾堡添加到您的网站的 WooCommerce 中。

如何将古腾堡编辑器添加到 WooCommerce

第 3 步:检查您的产品页面

最后,您必须检查并验证您添加的代码是否正常工作。为此,请转到“产品”并选择现有产品或添加新产品。

如何将古腾堡编辑器添加到 WooCommerce

您应该能够在 WooCommerce 页面上使用 Gutenberg 编辑器,一切顺利!

方法 2:使用Functions.php文件

您还可以向主题文件添加代码以创建您的 WooCommerce Gutenberg 产品页面。

虽然不建议使用此方法,因为当您更新主题时,代码可能会丢失,或者如果代码有微小的放错位置,您的网站可能会中断。

因此,只有在您习惯于直接添加代码时才尝试此方法。

为此,请转到 WordPress 仪表板上的 Appearance > 主题编辑器

找到您当前主题的functions.php文件,并将上面给出的代码粘贴到functions.php文件的末尾。

如何将古腾堡编辑器添加到 WooCommerce

此外,建议在继续使用此方法之前使用子主题并备份您的网站,因为即使是一个错误也会破坏您的网站。

如何将经典产品描述转换为块

如果您已经使用旧的 WordPress 编辑器将一些产品添加到您的 WooCommerce 商店。

您需要将现有内容转换为块,才能使用 Gutenberg 块编辑器来编辑内容。

在编辑器中,您会发现现有产品内容被列为“经典”编辑器内容。单击“经典”以打开一个对话框,然后单击“转换为块”。

如何将古腾堡编辑器添加到 WooCommerce

保存产品描述,现在您将能够编辑 Gutenberg 中的现有内容。

关于将 Gutenberg编辑器添加到 WooCommerce 的常见问题解答

将代码添加到我的主题函数文件是否安全?

不,不建议将代码直接添加到您的主题文件中以集成 WooCommerce 和 Gutenberg。这是因为如果您切换或更新主题,代码可能会丢失,这将带您回到经典的 WordPress 编辑器。

是否有必要具备编码知识才能在 WooCommerce 中实现 Gutenberg 编辑器?

不,您无需具备编码知识即可为 WooCommerce 启用 Gutenberg。您可以简单地使用 Code Snippets 插件将代码添加到您的主题文件中,然后开始使用 Gutenberg for WooCommerce。

古腾堡和经典编辑器有什么区别?

经典的 WordPress 编辑器是一个简单的文本编辑器,如 Microsoft Word,提供基本的格式选项,而 Gutenberg 编辑器是一个拖放式编辑器,提供用户友好的界面来编辑和设计您的网站。

如何将 Gutenberg 编辑器与 WooCommerce 产品页面集成?

要将 Gutenberg 编辑器与 WooCommerce 产品页面集成,您需要使用像 Code Snippets 这样的插件。此插件将允许您向您的网站添加代码以启用 Gutenberg。

我可以在 WooCommerce 中使用自定义 Gutenberg 块进行产品描述吗?

是的,您可以在 WooCommerce 中使用自定义 Gutenberg 块进行产品描述。Gutenberg 在产品页面和描述的设计和定制方面为您提供了充分的灵活性,使您能够创建令人惊叹的电子商务网站。

如果需要,我可以在将 Gutenberg 添加到 WooCommerce 后恢复到经典编辑器吗?

是的,您可以在需要时切换回 WooCommerce 中的经典编辑器。

结束语

切换到您的 WooCommerce 网站的 Gutenberg 编辑器可以为您的网站打开无限的设计可能性和无缝的编辑体验。

通过遵循本文中给出的两种方法,您可以轻松地将 Gutenberg 添加到 WooCommerce 并使用各种独特的块和出色的设计元素增强您的在线商店。

About 编辑部

kuajinggu的编辑人员是一支由 WordPress 专家组成的团队,由 Dylan 领导,在 WordPress、虚拟主机、电子商务、搜索引擎优化和市场营销方面拥有超过 10年的经验。kuajinggu创建于 2014 年,目前是业内最大的免费 WordPress 资源网站,经常被称为 WordPress 的维基百科。