方法 2：将 WooCommerce 产品类别添加到基于块的主题菜单

[sohanuzzaman55]

本教程中的第二种方法展示了如何将 WooCommerce 产品类别添加到 Gutenberg 的基于块的主题。在这部分我们使用GutenKit 插件。它简化了块编辑区域中大型菜单的创建和自定义。

GutenKit 支持强大的大型菜单块，无需古腾堡用户进行繁琐的技术工作。他们只需拖放设计元素，就像任何灵活的页面构建器插件一样。

我们来看一个真实的场景：

添加产品类别和产品标签到块编辑菜单
重要的是要了解，在 GutenKit 或 Gutenberg 中，菜单项是通过链接到内部或外部网页来添加的。因此，要将 WooCommerce 产品类别或标签添加到网站的导航菜单，您需要这些特定产品类别和标签的 URL。

如何将 WooCommerce 产品类别添加到 WordPress 菜单
为此，请从您的古腾堡站点仪表板中，按照“ 阿根廷电话营销数据 产品”>“类别”。您将在 WooCommerce 网站上看到所有产品类别。在此页面中，单击“查看”任何类别，这将在浏览器的新选项卡中加载页面。

然后，从浏览器的浏览器搜索栏中复制URL，稍后将它们添加到 GutenKit 导航菜单块设置中，如下所示。

现在我们将向您展示如何在 WordPress 网站菜单中插入 WooCommerce 产品类别。

转到 WordPress 仪表板，插入新页面或访问现有页面。单击"+"图标添加块并搜索 GutenKit Nav 菜单块。

当您看到它时，单击它或将其拖动到编辑区域。GutenKit 导航菜单块加载了两个选项。您可以选择预制模板或从头开始构建古腾堡网站菜单。

导航 GutenKit 导航菜单
最简单的方法是使用预制的标题模板。按“从模式中选择”按钮，所有可用的 GutenKit 主模式将出现在弹出窗口中。

选择超级菜单的 GutenKit 模式
然后导入您喜欢的菜单模式。然后您可以在导航栏中插入 WooCommerce 产品类别链接。此外，您将根据站点导航调整其他菜单项。

另一方面，如果您想从头开始，请单击“开始空白”按钮。然后 GutenKit 导航菜单块将根据网站发布的页面加载一些菜单选项。您可以保留它们或删除它们。

配置 GutenKIt 导航菜单
要添加新的菜单项，请单击“蓝色圆圈+”图标。这允许您将现有的已发布页面或 URL 添加到您的网站。您只需插入产品类别 URL 并定义菜单标签。以下是我们如何将 WooCommerce 产品类别添加到 Gutenberg 导航菜单。

使用 GutenKit 导航菜单块在 WP 菜单中设置产品类别样式
GutenKit 导航菜单块是用于自定义网站菜单的强大解决方案。您甚至还可以使用大型菜单来显示您的产品类别。

GutenKit 导航菜单样式
从 GutenKit Nav 菜单块的设置中，单击"Gå till förälder"选项。您将看到用于设计 WordPress 导航菜单的各种自定义设置。在“内容”选项卡中，您可以设置自定义断点、定义子菜单显示动画以及在滚动时显示画布外菜单。

此外，您可以自定义菜单封面和菜单选项，为您的产品类别创建更具视觉吸引力的导航菜单。

对于移动菜单，GutenKit Nav 菜单块可让您选择不同的徽标。而且，最重要的是，您可以从“Font Awesome”和内置 GutenKit 图标支持的大型图标库中插入汉堡包图标，或为其上传 SVG 文件。然后按照您自己的方式设置汉堡图标的样式。