如何将面包屑添加到 WordPress 以帮助用户更好地浏览您的网站

如果您运行一个内容丰富的网站，或者如果您想知道如何，那么本文将帮助您了解如何将面包屑添加到 WordPress。

在德国童话故事中，“汉塞尔和格莱特”的弟弟和妹妹——无意中听到他们邪恶的继母打算把他们扔到树林里自生自灭——拿了一片面包，留下了面包屑的痕迹，他们会一旦他们的父母抛弃了他们，就跟着回家。

在现代出版； 在网络、软件或文档上，面包屑同样用于帮助读者找到回家的路。 或者至少能够根据他们所处的位置追溯他们的步骤。

面包屑是网站上显示访问者位置的辅助导航元素。

您正在阅读这篇文章，因为您知道它是什么，但如果您想知道它是什么样子，您可以前往 eBay 看看他们的。

查看适用于 Galaxy S9+ iPhone X XS Max 的 Qi 无线快速充电器充电板支架底座的买家，很容易知道他们在哪里以及如何获得列出其产品的不同类别。

在这种情况下，有一个返回主页的链接，然后是一个指向产品主类别的链接——手机和配件，然后是一个子类别——手机配件和另一个子类别——充电器和摇篮。

为什么要向 WordPress 网站添加面包屑？

通过查看上面的 eBay 结构，您可以看到面包屑对于分层或分层网站上的用户体验是如何出色的。 访问者在浏览网站时知道他们在任何给定点的位置。 如果他们需要转到列出他们正在查看的产品或文章的父类别，他们只需单击面包屑中的链接。

这为我们带来了向 WordPress 网站添加面包屑的另一个好处，用户不需要点击浏览器的后退按钮，只需点击面包屑即可。

面包屑允许在网站上发现内容。 考虑从搜索引擎或另一个网站上的链接发送到文章的访问者。 当用户阅读完文章后，面包屑导航会为用户提供更多选项以转到更高的类别以查看相似的内容。 您可以猜到，这会导致用户在网站上花费更多时间，从而降低跳出率。

面包屑不仅可以帮助用户浏览网站，还可以帮助搜索引擎浏览网站。

任何改善用户体验、降低跳出率、让搜索引擎机器人轻松抓取和索引网站的任何东西，都有助于网站获得搜索引擎的好评。

事实上，添加面包屑有助于网站进行搜索引擎优化。

如何将面包屑添加到 WordPress 网站？

大多数现代 WordPress 主题和几乎所有电子商务主题都设计有面包屑功能。

要使用这样的主题将面包屑添加到您的网站，只需启用该选项，通常可以在主题选项中找到。 如有疑问，请咨询您的主题文档或主题开发人员。

如果您的主题本身不支持面包屑，那么您可以使用面包屑插件轻松添加它们。 您还可以使用大多数 SEO WordPress 插件（例如 Yoast）将面包屑添加到您的网站。

对于本文，我们将使用免费的 WordPress 插件 - Breadcrumb NavXT 将面包屑添加到 WordPress

第 1 步：安装 Breadcrumb NavXT WordPress 插件。

面包屑导航 NavXT 根据用户的位置生成面包屑。 然后可以根据自己的喜好定制小径。

继续安装 Breadcrumb NavXT。

如果您不知道如何在 WordPress 中安装插件，这很容易。 登录到您的仪表板，然后在插件下的左侧菜单中向下滚动，单击添加新的。

在搜索框中输入您要安装的插件 - Breadcrumb NavXT -。

一两秒钟后，结果将返回。 现在，单击立即安装，然后再等待一两秒钟，然后单击激活。

第 2 步：在 WordPress 网站上显示面包屑 NavXT 面包屑。

您可以通过两种方式显示面包屑。

1.使用Breadcrumb NavXT提供的widget

进入主菜单； 外观 > 小部件。

找到 Breadcrumb NavXT，然后将其拖到您想要面包屑的侧边栏。

现在，转到出现侧边栏的任何帖子或页面，您应该会看到面包屑。

如果你想要你的面包屑在除边栏之外的任何地方，比如 eBay 的例子，那么你需要动手修改你的主题。

2.修改你的主题

您可能需要修改的文件是； home.php、single.php、page.php。 您还可以修改分类法和任何其他文件，只要您需要那里的面包屑。

但是，在您做任何事情之前，请备份您的网站。 如果事情适得其反，我们自己的 WPVivid 备份插件将为您节省时间和头痛。

接下来，我建议对子主题进行任何更改。 我们有一篇文章将向您展示如何为您的 WordPress 网站创建子主题。

如果您已完成上述操作，请继续将以下代码添加到您希望面包屑显示的页面中。

 <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">

<?php if(function_exists('bcn_display')) { bcn_display(); }?>

</div>

如果您要在文章中显示它，您可以修改 single.php 文件。 将代码粘贴到文章标签中。

保存您的更改，然后转到您的文章。

您的面包屑应该在您放置代码的区域。

你可以在我的例子中看到我在文章顶部有面包屑。

如果您的面包屑显示不正确，则需要使用一些 CSS 对其进行样式设置。

Breadcrumb NavXT 使用 .breadcrumbs css 类（这也可能取决于您的主题）。 您可以修改站点的 CSS 代码，或使用 WordPress 定制器来设置面包屑的样式。

 。面包屑 {

颜色：#000；

边距底部：20px；

}

第 3 步：自定义面包屑导航 NavXT 面包屑。

如果您需要对面包屑进行修改，则可以在 WordPress 仪表板中进行。

转到面包屑导航 NavXT 设置页面。 您可以在通用 WordPress –设置> Breadcrumb NavXT –菜单下找到它。

就是这样，希望您已成功将面包屑添加到您的 WordPress 网站。

不要在您网站的丛林中失去您的访问者。 将面包屑添加到您的网站。

接下来，您可能还想了解如何将 Google 自定义搜索添加到 WordPress 以改善您的现场导航。