您是否正在寻找一种向 WooCommerce 商店添加面包屑的简单方法?
面包屑可帮助您的客户更轻松地浏览您的网站。它们还可以帮助搜索引擎了解网站内容的结构和层次结构,并将其显示在搜索结果中。
在本文中,我们将向您展示如何使用非常简单的方法在 WooCommerce 中添加面包屑。
![添加 WooCommerce 面包屑 添加 WooCommerce 面包屑](https://www.wpbeginner.com/wp-content/uploads/2021/09/add-woocommerce-breadcrumbs.png)
为什么应该在 WooCommerce 中添加面包屑?
面包屑是显示在产品页面或博客文章顶部的导航链接。这些链接向您的访问者显示他们如何最终到达他们当前正在查看的页面。
例如,如果您有一家销售衣服的WooCommerce 商店,则面包屑菜单可能如下所示:主页 » 男士时尚 » 衬衫和 Polo 衫 » 正装衬衫。
![WooCommerce 面包屑示例 WooCommerce 面包屑示例](https://www.wpbeginner.com/wp-content/uploads/2021/09/woocommerce-breadcrumbs-example-1.png)
在 WooCommerce 中启用面包屑可以让您的客户更轻松地浏览您的在线商店并找到他们正在寻找的产品。他们可以轻松地单击产品属性或类别来查看相关产品。
面包屑还可以帮助搜索引擎了解电子商务商店中链接的层次结构和结构。像谷歌这样的搜索引擎甚至会在搜索结果中显示它们,这可以提高你的点击率。
话虽这么说,让我们看看如何在 WooCommerce 商店上启用面包屑。我们将介绍两种方法,建议大多数用户使用第一种方法:
方法 1:使用 AIOSEO 在 WooCommerce 中添加面包屑(推荐)
在 WooCommerce 中启用面包屑的最简单方法是使用多合一 SEO (AIOSEO)插件。
它是市场上最好的 WordPress SEO 插件,让您只需单击一个按钮即可在 WooCommerce 中添加面包屑。该插件还可以帮助您优化搜索引擎的商店,而无需任何技术技能。
在本教程中,我们将使用AIOSEO Pro 版本,因为它包含面包屑模板并提供更多自定义选项。
还有一个免费版本,其中包含面包屑,但不提供面包屑模板。
首先,您需要在网站上安装并激活 AIOSEO 插件。您可以参阅我们的指南,了解有关如何安装 WordPress 插件的更多详细信息。
激活后,您需要导航至All in One SEO » General Settings并输入您的许可证密钥。您可以在 AIOSEO 帐户区域找到密钥。
![多合一 SEO 许可证 多合一 SEO 许可证](https://www.wpbeginner.com/wp-content/uploads/2021/01/aioseo-license.png)
接下来,您需要使用其设置向导在 WooCommerce 商店上设置 AIOSEO。如果您需要帮助,那么您可以按照我们的指南了解如何为 WordPress 设置多合一 SEO。
在网站上正确配置插件后,您需要转到“多合一 SEO”»“常规设置”页面,然后单击“面包屑”选项卡。
![在多合一 SEO 中启用面包屑显示 在多合一 SEO 中启用面包屑显示](https://www.wpbeginner.com/wp-content/uploads/2021/05/enable-breadcrumbs.png)
之后,您可以打开“启用面包屑”选项,AIOSEO 会自动将面包屑架构标记添加到您的 WooCommerce 商店的代码中。
接下来,您需要选择面包屑的显示方式。只需向下滚动,您就会看到向在线商店添加面包屑的不同方法。
您可以使用短代码或块将它们添加到任何页面或手动发布,或者将它们添加到小部件区域。高级用户还可以使用 PHP 代码将面包屑添加到其主题模板文件中。
我们将在下面向您展示如何向您的 WooCommerce 产品添加面包屑,但首先,让我们看一下自定义选项。
![面包屑显示选项 面包屑显示选项](https://www.wpbeginner.com/wp-content/uploads/2021/05/breadcrumbs-display-options.png)
现在,如果您向下滚动到“面包屑设置”部分,您将看到多个用于自定义面包屑的设置。
例如,您可以更改分隔符、启用主页链接、添加面包屑前缀、更改格式等等。您甚至可以预览导航链接在 WooCommerce 商店中的显示方式。
![面包屑导航设置 面包屑导航设置](https://www.wpbeginner.com/wp-content/uploads/2021/05/breadcrumbsettings.png)
AIOSEO Pro还允许您访问面包屑模板。
这些模板允许您在网站上针对不同的内容类型、分类法和档案显示专业外观的面包屑链接。
![AIOSEO 面包屑导航模板 AIOSEO 面包屑导航模板](https://www.wpbeginner.com/wp-content/uploads/2021/09/aioseo-breadcrumb-templates.png)
不仅如此,WordPress 插件还提供了不同的选项来自定义模板。
例如,您可以禁用“使用默认模板”选项并查看更多设置。
![自定义产品面包屑模板 自定义产品面包屑模板](https://www.wpbeginner.com/wp-content/uploads/2021/09/customize-product-breadcrumb-template.png)
有一些选项可以显示主页链接、帖子类型存档链接、分类链接、向模板添加标签,以及选择是否要优先考虑类别或标签分类。
如果您为多个产品设置了父类别,那么您还可以在面包屑模板编辑器中自定义它们。
完成后,不要忘记保存更改。
接下来,您需要将面包屑添加到您的 WooCommerce 产品页面。
AIOSEO 将展示四种不同的方法,但最简单的方法是使用短代码在您的在线商店上显示面包屑导航链接。
![使用简码添加面包屑 使用简码添加面包屑](https://www.wpbeginner.com/wp-content/uploads/2021/08/use-a-shortcode-to-add-breadcrumbs.png)
您所要做的就是在您想要显示面包屑的位置添加以下短代码:
[aioseo_breadcrumbs] |
由
只需前往“产品”»“所有产品”并编辑产品页面即可。接下来,您可以在WordPress 编辑器的“文本”视图中添加短代码并更新您的页面。
![在产品页面添加简码 在产品页面添加简码](https://www.wpbeginner.com/wp-content/uploads/2021/08/add-shortcode-in-product-page-1.png)
您现在可以访问您的产品页面以查看正在运行的面包屑导航链接。
这就是我们的测试网站上的样子。
![面包屑示例 面包屑示例](https://www.wpbeginner.com/wp-content/uploads/2021/08/breadcrumbs-example-1.png)
除此之外,您还可以将面包屑添加到 WooCommerce 商店的侧边栏。这样,您就不必编辑每个单独的产品页面来显示导航链接,因为它们将显示在整个网站的侧边栏中。
要在侧边栏中显示面包屑,您可以从 WordPress 管理区域转到外观 » 小部件。
单击左上角的加号图标,然后搜索“面包屑”以找到“AIOSEO – 面包屑”小部件。只需将其拖放到侧边栏中即可。您还可以输入导航链接的标题。
![AIOSEO 面包屑小部件 AIOSEO 面包屑小部件](https://www.wpbeginner.com/wp-content/uploads/2021/09/aioseo-breadcrumbs-widget.png)
完成后,您可以单击“保存”按钮。
然后,只需查看您的 WooCommerce 商店即可看到侧边栏中的面包屑。
![WooCommerce 侧边栏面包屑 WooCommerce 侧边栏面包屑](https://www.wpbeginner.com/wp-content/uploads/2021/09/woocommerce-sidebar-breadcrumbs.png)
如果您想使用其他方式将面包屑添加到您的 WooCommerce 商店,请查看我们有关如何在 WordPress 中显示面包屑导航链接的指南。
如何为多个类别添加面包屑
您的 WooCommerce 商店中是否有具有多个类别的产品?
如果是,那么正确设置面包屑可能是一个挑战,因为 WordPress 不会记录客户登陆产品页面的路径。
但是,AIOSEO会自动在面包屑中添加第一个类别,并可以轻松地为具有多个类别的产品显示正确的导航菜单。
该插件还提供了一个面包屑模板,您可以为产品类别等WordPress 分类法进行自定义。您所要做的就是前往“多合一 SEO”»“常规设置”,然后选择“面包屑”选项卡。
接下来,向下滚动到“面包屑模板”部分并选择“分类法”选项卡。默认情况下,该插件将在 WooCommerce 商店的面包屑中显示父项目链接。
![在面包屑中显示父类别 在面包屑中显示父类别](https://www.wpbeginner.com/wp-content/uploads/2021/09/show-parent-category-in-breadcrumbs.png)
如果禁用“使用默认模板”选项,您将看到“显示父项链接”已启用。这样,您就可以轻松地在网站上显示任何产品的主要类别。
例如,假设您经营一家在线鞋店,其中一种产品同时属于运动鞋和运动鞋类别。
![产品有多个类别 产品有多个类别](https://www.wpbeginner.com/wp-content/uploads/2021/09/product-has-multiple-categories-1.png)
AIOSEO会自动选择第一个类别。
然后,它将显示在面包屑导航菜单中。
![多类别面包屑预览 多类别面包屑预览](https://www.wpbeginner.com/wp-content/uploads/2021/09/multiple-category-breadcrumb-preview.png)
方法 2:使用 WooCommerce 面包屑插件添加面包屑
在 WooCommerce 中启用面包屑的另一种方法是使用WooCommerce 面包屑插件。
它是一个免费的 WordPress 插件,可让您将面包屑添加到您的在线商店。该插件易于使用,但缺乏 AIOSEO 中的自定义功能。
首先,您需要安装并激活 WooCommerce Breadcrumbs 插件。有关更多详细信息,您可以参考我们如何安装 WordPress 插件的教程。
插件激活后,您可以从 WordPress 管理区域转到“设置”»“WC Breadcrumbs” 。之后,继续并单击“启用面包屑”复选框。
![启用 WooCommerce 面包屑导航 启用 WooCommerce 面包屑导航](https://www.wpbeginner.com/wp-content/uploads/2021/08/enable-woocommerce-breadcrumbs.png)
接下来,您可以更改 WooCommerce 商店中显示的导航链接的外观。
WooCommerce插件允许您选择面包屑分隔符以及面包屑之前和之后的 HTML 标签。
现在,如果向下滚动,您会发现更多自定义选项。例如,您可以更改导航链接中显示的主页文本和 URL。
![更多 WooCommerce 面包屑设置 更多 WooCommerce 面包屑设置](https://www.wpbeginner.com/wp-content/uploads/2021/08/more-woocommerce-breadcrumbs-settings.png)
完成更改后,请不要忘记单击底部的“保存更改”按钮。
我们希望本文能帮助您了解如何在 WooCommerce 中添加面包屑。您可能还想查看我们关于建立网站的费用的指南或我们专家精选的最佳托管托管服务。