如何在 WordPress 中添加面包屑

已发表: 2021-03-30

面包屑可以帮助您改善网站的导航，因此如果您正在寻找一种简单的方法在您的网站上启用它们，那么您来对地方了。 在本指南中，我们将向您展示如何使用插件和主题选项在 WordPress 中添加面包屑。

什么是面包屑？

面包屑是显示在页面顶部的链接。 这些是相互连接的链接，构成您网站导航的重要组成部分。 这些链接是分层排列的，因此您的用户不仅会知道他们在哪个页面上，而且他们还将了解他们所在的页面类别。 例如，在我们的网站上，您可以在该网页的顶部看到面包屑。

在 wordpress 中添加面包屑 - 博客上的面包屑

面包屑导航可帮助您的用户查看他们在您的网站上浏览的页面的层次结构，并获得连接的链接以直接返回更高的页面或主页。

为什么要在 WordPress 中添加面包屑？

对于那些想要改进网站导航的人来说，添加面包屑是一个很好的选择。 由于它本质上是一条线索，因此您的用户可以轻松地使用它来回溯到他们以前的页面并跟踪他们所在的页面。 这会带来更多的参与度，并使访问者了解他们查看的页面的类别。

此外，如果您有一个大型网站，添加面包屑是必不可少的。 如果您正在经营一家电子商务商店或将您的内容分布在不同的类别下，那么启用面包屑导航至关重要。 这使您的客户了解每个类别下的产品以及他们可以返回哪些类别以查看更多类似产品。

此外，启用面包屑导航还可以改善您网站的SEO ，因为它使搜索引擎爬虫更容易浏览您的互连链接。

现在我们更好地了解了它们是什么以及它们如何使您受益，让我们看看如何将面包屑添加到您的 WordPress 网站以及可以使用的不同方法。

如何在 WordPress 中添加面包屑

有几种不同的方法可以将面包屑添加到您的 WordPress 网站：

  1. 使用 Yoast 搜索引擎优化
  2. 带有专用的面包屑插件
  3. 从你的主题

让我们来看看每种方法。

注意：其中一些方法需要您修改一些核心文件。 尽管片段非常简单，但为了避免任何问题，我们强烈建议您使用子主题。 这使得对主题进行更改的过程更加安全，并且在您更新主题时不会恢复更改。 您可以创建子主题或使用任何这些专用插件。

1) 如何使用 Yoast SEO 在 WordPress 中添加面包屑

在 wordpress 中添加面包屑 - yoast SEO

YoastSEO是目前最流行的插件之一，它是 WordPress 的完整 SEO 解决方案。 它还带有一个专用选项来启用面包屑和高级选项以进一步自定义它。 这包括更改链接分隔符、主页的锚文本、404 页面的面包屑、额外的个性化选项，甚至在面包屑中显示或隐藏分类法和内容类型档案。

要访问和启用 Yoast 下的面包屑设置，请转到WordPress 管理仪表板上的Yoast SEO > 搜索外观（当然，假设您已经安装并激活了 Yoast SEO 插件。）

然后，转到面包屑选项卡，您将在 Yoast SEO 下看到面包屑选项。 向下滚动，启用“为您的主题启用面包屑”选项，然后保存更改。

在 wordpress 中添加面包屑 - yoast SEO

之后，您需要在headers.php文件中添加一小行代码，以便您的主题文件调用网站标题上的 Yoast SEO 面包屑。

为此，请单击外观 > 主题编辑器打开您的主题编辑器。 然后，使用右侧的主题文件列表并选择主题标题。

在 wordpress 中添加面包屑 - yoast SEO 代码

现在，使用编辑器并将以下代码段粘贴到header.php文件的末尾。

 <?php
如果（函数存在（'yoast_breadcrumb'））{
yoast_breadcrumb('<p>','</p>');
}
?>

然后，点击更新文件，就是这样！ 现在您应该可以使用 Yoast SEO 面包屑了。

请记住查看面包屑选项卡下的其他选项，以按照您想要的方式自定义面包屑。 Yoast 允许您从那里完成所有操作，并且它与大多数 WooCommerce 主题兼容。

2) 如何使用专用插件在 WordPress 中添加面包屑

或者，如果您不想使用 Yoast SEO，您可以使用第三方插件。 在本节中，我们将介绍一些出色的插件，您可以使用它们将面包屑添加到您的 WordPress 网站。 所有这些插件都是免费的，因此您可以测试它们并为您选择合适的插件，而无需花费一分钱。

1）弹性面包屑

Flexy BreadCrumb 允许您使用其专用短代码在您的网站上轻松启用面包屑。 只需安装并激活插件，并在您网站的任何部分使用其短代码：页面、博客、小部件、页眉或页脚。 这样，您可以将面包屑添加到网站的任何部分，以便它们适合您的其余内容。

这个免费插件还带有专用的个性化选项，因此您可以更改面包屑分隔符、主页和结尾文本、颜色、链接的颜色选项等等。

主要特点

  • 专用短代码，可将面包屑添加到您网站的任何部分
  • 大量个性化选项
  • 非常用户友好且易于使用

2) 面包屑导航

Breadcrumb NavXT 是一个完整且强大的解决方案，可实现功能齐全的面包屑。 它是最受欢迎的面包屑插件之一，并且有充分的理由。 您可以使用专用小部件轻松启用面包屑导航，也可以使用 WordPress 文件直接在页眉、页脚或特定页面模板上调用其功能。

该插件还带有用于自定义面包屑的内置选项，并且提供的选项数量之多简直令人震惊。 您可以为您的博客、帖子设置单独的模板，并尝试用创造性的方式在网站的不同部分清楚地显示您的面包屑。

主要特点

  • 广泛的面包屑个性化和模板定制
  • 专用小部件可在您网站的任何位置启用面包屑
  • 供用户添加功能和过滤器的附加功能

3）捕捉面包屑

Catch BreadCrumb 是一个漂亮的轻量级插件，可让您将面包屑导航添加到您的网站。 您可以立即启用您的面包屑，并通过使用其专用的短代码和个性化选项进一步改进。

Catch BreadCrumbs 在功能方面并不是最拥挤的，但其精心设计的选项包具有您需要的所有功能而不会让人不知所措，即使是最初学者的用户也可以在几分钟内设置他们的面包屑. 最后，您可以添加优雅的面包屑并使用漂亮的选项，例如在主页上隐藏面包屑。

主要特点

  • 轻巧且易于使用
  • 具有大量个性化选项的响应式设计
  • 在主页或特定页面上隐藏/显示面包屑的选项

现在，让我们看一下其中一个插件，看看如何在您的网站上启用它们。 对于这个演示，我们将使用Flexy BreadCrumbs ，但您可以使用任何其他工具。 大多数工具都是相似的，因此您应该能够对大多数插件执行这些步骤而不会出现任何问题。 但是，我们建议您准备好文档以解决您在此过程中可能遇到的任何问题。

使用 Flexy Breadcrumbs 在 WordPress 中添加 BreadCrumbs

让我们从安装插件开始，因此在您的WordPress 管理仪表板中，转到插件 > 添加新的。 然后，使用右上角的搜索栏搜索Flexy BreadCrumbs ，点击安装，然后激活它。

在 wordpress 中添加面包屑 - 灵活安装

现在让我们看看如何设置和自定义插件。

使用 Flexy BreadCrumbs 简码并将其添加到您的主题文件中

使用 Flexy BreadCrumbs 的最简单方法是简单地使用它的简码：

 [flexy_breadcrumb]

您可以将此短代码添加到任何博客、页面或小部件，以在其上显示您的面包屑。

例如，如果您想在博客或产品页面上显示面包屑，只需将此短代码添加到其中，如下所示。

另一方面，如果您希望面包屑显示在您的所有页面和帖子上而不手动添加它们，您可以将此短代码添加到您的主题文件中。

为此，请通过单击Appearance > Theme Editor打开您的主题编辑器，使用右侧的主题文件侧边栏并选择您的header.php文件。

在 wordpress 中添加面包屑 - yoast SEO 代码

现在，在文件的底部，添加以下代码段：

 <?php
echo do_shortcode('[flexy_breadcrumb]');
?>

请记住，如果您使用另一个短代码插件，您将使用插件的短代码替换插件的[flexy_breadcrumb]部分。

之后，单击更新文件，您的面包屑将显示在您的网站上。

但是，如果您想自定义面包屑以适合您的网站怎么办？ 您可以通过使用插件的选项来做到这一点。 只需单击WP Admin Dashboard 侧边栏上的Flexy Breadcrumb ，您将看到所有自定义选项来更改您的面包屑。 这包括更改主页图标、面包屑分隔符、帖子类型层次结构，甚至排版设置。

在 wordpress 中添加面包屑 - 灵活选项

3) 如何从您的主题中添加 WordPress 中的面包屑（或删除它们）

一些主题带有自己专用的面包屑选项，您通常可以从它们的主题选项中启用/禁用它们。 例如，对于Elf 主题，我们可以通过转到外观 > 自定义 > 专用主题选项选项卡进入主题选项，这对我们来说被标记为仙女主题选项。 到达那里后，我们单击面包屑并使用提供的切换启用/禁用它们。

在 wordpress 中添加面包屑 - 主题面包屑
一些主题还带有额外的选项来自定义面包屑以匹配您网站的外观和感觉。

奖励：如何禁用面包屑

某些主题默认启用面包屑导航，因此要禁用它们，您必须向主题文件添加一个功能。 例如，Storefront 带有其专用的面包屑，您可以使用以下代码禁用它们：

 add_action('init', 'ql_remove_storefront_breadcrumbs');
功能 ql_remove_storefront_breadcrumbs() {
remove_action('storefront_before_content', 'woocommerce_breadcrumb', 10);
}

只需转到Appearance > Theme Editors > functions.php将其添加到您的functions.php文件中。

之后，记得更新文件，就是这样。 您已成功从您的站点中删除面包屑。

结论

总而言之，面包屑可以帮助您改善网站的导航并增强客户体验。

在本指南中，我们看到了将面包屑添加到 WordPress 网站的不同方法：

  • 使用 Yoast SEO 的面包屑选项
  • 带有专用插件
  • 通过您的主题选项（如果有）

此外，我们还向您展示了如何使用简单的代码片段轻松地从您的网站中删除面包屑。 最后，请记住，如果您更改主题，您可能需要重新添加代码片段以添加面包屑。

有关如何自定义站点和改进其导航的更多信息，请查看以下教程：

  • 如何在 WordPress 中编辑面包屑
  • 如何按品牌组织 WooCommerce 产品
  • 如何将 WooCommerce 产品类别添加到菜单中

您是否将面包屑添加到您的网站？ 您使用了哪种方法？ 在下面的评论部分让我们知道！