如何在 WooCommerce 中添加面包屑(初学者指南)

您需要一种简单的方法将面包屑添加到您的 WooCommerce 商店吗?

面包屑导航可帮助您的客户更轻松地浏览您的网站.它们还可以帮助搜索引擎了解您网站内容的结构和层次结构,并将其显示在搜索结果中.

在本文中,我们将向您展示如何使用非常简单的方法在 WooCommerce 中添加面包屑.

Add WooCommerce Breadcrumbs

为什么要在 WooCommerce 中添加面包屑?

面包屑是出现在产品页面或博客文章顶部的导航链接.这些链接会向您的访问者展示他们在当前正在查看的页面上是如何结束的.

例如,如果您有一家卖衣服的 WooCommerce 商店,那么面包屑菜单可能如下所示:首页 »男士时装»衬衫和马球正装衬衫.

WooCommerce Breadcrumbs example

在 WooCommerce 中启用面包屑导航可以让您的客户更轻松地浏览您的在线商店并找到他们正在寻找的产品.他们可以轻松点击产品属性或类别来查看相关产品.

面包屑导航还可以帮助搜索引擎了解电子商务商店中链接的层次结构和结构.Google 等搜索引擎甚至会将它们显示在搜索结果中,这可以提高您的点击率.

话虽如此,让我们看看如何在 WooCommerce 商店中启用面包屑导航.

方法 1:使用 AIOSEO 在 WooCommerce 中添加面包屑(推荐)

在 WooCommerce 中启用面包屑导航的最简单方法是使用多合一 SEO (AIOSEO) 插件.

它是市场上最好的 WordPress SEO 插件,允许您通过单击按钮在 WooCommerce 中添加面包屑.该插件还可以帮助您在没有任何技术技能的情况下针对搜索引擎优化商店.

在本教程中,我们将使用 AIOSEO Pro 版本,因为它包含面包屑模板并提供更多自定义选项.

还有一个免费版本,其中包含面包屑,但不提供面包屑模板.

首先,您需要在您的网站上安装并激活 AIOSEO 插件.您可以参考我们的指南,了解有关如何安装 WordPress 插件的更多详细信息.

激活后,您需要导航至多合一搜索引擎优化 »常规设置并输入您的许可证密钥.您可以在 AIOSEO 帐户区找到密钥.

All in One SEO license

接下来,您需要使用其设置向导在您的 WooCommerce 商店上设置 AIOSEO.如果您需要帮助,那么您可以按照我们的指南了解如何为 WordPress 设置多合一搜索引擎优化.

在您的网站上正确配置插件后,您需要转到多合一搜索引擎优化 »常规设置页面,然后点击"面包屑"标签.

Enable breadcrumbs display in All in One SEO

之后,您可以打开"启用面包屑"选项,AIOSEO 会自动将面包屑架构标记添加到您的 WooCommerce 商店代码中.

接下来,您需要选择面包屑的显示方式.只需向下滚动,您就会看到将面包屑添加到您的在线商店的不同方法.

您可以使用简码或块将它们添加到任何页面或手动发布,或者将它们添加到小部件区域.高级用户还可以使用 PHP 代码将面包屑添加到他们的主题模板文件中.

我们将在下面向您展示如何将面包屑添加到您的 WooCommerce 产品中,但首先让我们看一下自定义选项.

Breadcrumb display options

现在,如果您向下滚动到"面包屑设置"部分,您将看到多个用于自定义面包屑的设置.

例如,您可以更改分隔符、启用主页链接、添加面包屑前缀、更改格式等.您甚至可以预览导航链接在 WooCommerce 商店中的显示方式.

Breadcrumb settings

AIOSEO Pro 还允许您访问面包屑模板.这些模板允许您在您的网站上针对不同的内容类型、分类法和档案显示具有专业外观的面包屑链接.

AIOSEO Breadcrumb Templates

不仅如此,WordPress 插件还提供了不同的选项来自定义模板.例如,您可以禁用"使用默认模板"选项并查看更多设置.

Customize product breadcrumb template

可以选择显示主页链接、帖子类型存档链接、分类法链接、向模板添加标签,以及选择是否要优先分类或标签分类法.

如果您为多个产品设置了父类别,那么您还可以在面包屑模板编辑器中对其进行自定义.

完成后,不要忘记保存更改.

接下来,您需要将面包屑添加到您的 WooCommerce 产品页面.

AIOSEO 将展示四种不同的方法,但最简单的方法是使用短代码在您的在线商店中显示面包屑导航链接.

Use a shortcode to add breadcrumbs

您所要做的就是在要显示面包屑的位置添加以下短代码.

[aioseo_breadcrumbs]

只需转到产品 »所有产品并编辑产品页面.接下来,您可以在 WordPress 编辑器的"文本"视图中添加短代码并更新您的页面.

Add shortcode in product page

您现在可以访问您的产品页面以查看正在运行的面包屑导航链接.

Breadcrumbs example

除此之外,您还可以在 WooCommerce 商店的侧边栏中添加面包屑.这样,您就不必编辑每个单独的产品页面来显示导航链接,因为它们会出现在您整个网站的侧边栏中.

要在侧边栏中显示面包屑,您可以转到外观»来自 WordPress 管理区域的小部件.

单击左上角的加号图标,然后搜索"面包屑"以找到"AIOSEO – 面包屑"小部件.只需将其拖放到侧边栏中即可.您还可以为导航链接输入标题.

AIOSEO Breadcrumbs widget

完成后,您可以单击"保存"按钮,然后查看您的 WooCommerce 商店以查看侧栏中的面包屑.

WooCommerce Sidebar Breadcrumbs

如果您想使用其他方式将面包屑添加到您的 WooCommerce 商店,请查看我们的指南,了解如何在 WordPress 中显示面包屑导航链接.

如何为多个类别添加面包屑

您的 WooCommerce 商店中是否有包含多个类别的产品?

如果是,那么正确设置面包屑可能是一个挑战,因为 WordPress 不会记录客户登陆产品页面的路径.

但是,AIOSEO 会自动在面包屑导航中添加第一个类别,并且可以轻松为具有多个类别的产品显示正确的导航菜单.

该插件还提供了一个面包屑模板,您可以为 WordPress 分类法(如产品类别)自定义该模板.您所要做的就是前往多合一搜索引擎优化 »常规设置,然后选择面包屑标签.

接下来,向下滚动到"面包屑模板"部分,然后选择分类法选项卡.默认情况下,该插件将在 WooCommerce 商店的面包屑中显示父项链接.

Show parent category in breadcrumbs

如果禁用"使用默认模板"选项,则会看到"显示父项链接"已启用.这样,您可以轻松地在您的网站上显示任何产品的主要类别.

例如,假设您经营一家在线鞋店,其中一款产品同时属于运动鞋和运动鞋类别.

Product has multiple categories

AIOSEO 将自动选择第一个类别并将其显示在面包屑导航菜单中.

Multiple category breadcrumb preview

方法 2:使用 WooCommerce 面包屑插件添加面包屑

另一种在 WooCommerce 中启用面包屑的方法是使用 WooCommerce 面包屑插件.

这是一个免费的 WordPress 插件,可让您将面包屑添加到您的在线商店.该插件易于使用,但缺少您在 AIOSEO 中可以找到的自定义功能.

首先,您需要安装并激活 WooCommerce Breadcrumbs 插件.有关更多详细信息,您可以参考我们关于如何安装 WordPress 插件的教程.

一旦插件处于活动状态,您就可以转到设置»来自您的 WordPress 管理区域的 WC Breadcrumbs.之后,继续并单击"启用面包屑"复选框.

Enable WooCommerce Breadcrumbs

接下来,您可以更改将出现在您的 WooCommerce 商店中的导航链接的外观.

WooCommerce 插件可让您选择面包屑前后的面包屑分隔符和 HTML 标签.

现在,如果您向下滚动,则会找到更多自定义选项.例如,您可以更改将出现在导航链接中的主页的文本和 URL.

More WooCommerce Breadcrumbs settings

完成更改后,不要忘记点击底部的"保存更改"按钮.

我们希望本文能帮助您了解如何在 WooCommerce 中添加面包屑.您可能还想查看我们的指南,了解构建网站和最佳托管托管服务的成本.

9

发表回复