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

术语“面包屑”指的是一种高效的网站导航工具（就像 Hansel 和 Gretel 教给我们的那样）旨在帮助跟踪一个人的步骤回到网站的“主页”（或主页）。 它们通过提供一直返回主页的链接（或标签）的内联跟踪，允许用户查看当前页面如何适应整个站点结构。

带有面包屑的家得宝产品页面

面包屑对您的 WordPress 网站实际上比您想象的更重要。 它们不仅可以增强用户体验，还可以让您的网站在搜索排名中有所提升。 谷歌喜欢网站中的这种结构元素，当访问者有机地偶然发现您的一个页面（降低跳出率）时，他们将获得至关重要的导航帮助。

您可能会认为将这样一个集成的原生系统添加到您的网站会很困难，但实际上使用插件非常简单。 事实上，如果您使用的是 Yoast SEO 插件，那么您就有了一个良好的开端，因为 Yoast 中已经内置了面包屑功能！ 而且，通过 Yoast 添加面包屑绝对是目前首选的方法之一。 除了 Yoast SEO，插件 Breadcrumb NavXT 是另一个很好的选择，它是高度可定制的，也适用于我们自己的 Divi 主题。

订阅我们的 YouTube 频道

如何使用 Yoast 将面包屑添加到您的 WordPress 网站

要使用 Yoast SEO 将面包屑添加到您的 WordPress 网站，您需要解决三个简单的步骤：

• 安装并激活 Yoast SEO 插件
• 将 Breadcrumbs 代码片段添加到您的 WordPress 主题
• 在插件设置中启用/配置面包屑 Yoast Breadcrumbs

安装并激活 Yoast SEO 插件

要安装 Yoast SEO 插件，请转到您的 WordPress 仪表板并导航至插件 > 添加新。 然后在 WordPress 存储库中搜索“yoast”。 当您看到 Yoast SEO 插件时，单击以安装并激活该插件。

将面包屑代码片段添加到您的 WordPress 子主题

接下来，我们需要向您的 WordPress 主题文件添加一小段代码。 因此，如果您还没有，创建一个子主题是个好主意。 对于此示例，我将向您展示如何将面包屑代码片段添加到默认的 29 岁 WordPress 主题。 您可以将代码添加到任何主题文件/模板，但在大多数情况下，您需要将其添加到 single.php 文件（以显示在所有帖子中）、page.php 文件（以显示在所有页面上） )，或到您的 header.php 文件（以显示整个站点）。

对于这个例子，我将把面包屑代码添加到我的子主题的 header.php 文件中。 从父主题复制 header.php 文件后，打开以在您选择的代码编辑器中编辑该文件。

然后在 header.php 文件的最底部，添加 Yoast 提供的以下 php 片段以激活 Breadcrumbs 功能：

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

这将直接在所有页面的标题下显示面包屑，这是面包屑的常见位置。

在插件设置中启用和配置 Yoast Breadcrumbs

将代码片段添加到您的 WordPress 子主题后，您要做的就是在 Yoast SEO 插件设置中激活面包屑。 为此，请转到您的 WordPress 仪表板并导航到 SEO > 搜索外观，然后单击面包屑选项卡。 在面包屑设置下，确保通过将选项切换为“启用”来启用面包屑。 然后您可以根据需要配置面包屑设置。 您可能还想选择一个分类法以在您的帖子的面包屑中显示。 对于此示例，我将设置我的帖子以在面包屑导航中显示类别。

现在，让我们继续查看我在“TwentyNineteen”主题中创建的其中一篇帖子上的面包屑外观。

这是启用面包屑之前帖子的样子。

这是启用面包屑后帖子的样子。 这个特定的帖子示例有一个类别（“WordPress”）和一个父类别（“网页设计”），以向您展示我在面包屑设置中选择的面包屑的类别分类法。

您可能需要使用一些外部 CSS 调整面包屑的样式。 为此，您可以使用包含在 php 代码中的 CSS ID“面包屑”。 打开子主题的 style.css 文件（或者您可以将其添加到“附加 CSS”下的“主题定制器”中）并添加以下内容：

#breadcrumbs {

/*Add breadcrumb styling here*/

}

对于TwentyNineteen 主题，我可能希望通过添加以下自定义CSS 来匹配标题文本的边距：

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

如果您想更好地控制面包屑的特定位置，您也可以将以下短代码用于单个帖子或页面。

[wpseo_breadcrumb]

使用 Breadcrumb NavXT 将面包屑添加到您的 WordPress 网站

如果您出于某种原因不想安装 Yoast SEO，或者您正在寻找另一个简单的选项，那么 Breadcrumb NavXT 插件是一个很好的选择。

要安装插件，请转到您的 WordPress 仪表板并导航到插件 > 添加新。 然后在 WordPress 存储库中搜索“breadcrumb navxt”。 看到插件后，单击以安装并激活它。

要调用面包屑以使其显示在您的网站上，您可以使用小部件页面中提供的内置 Breadcrumb NavXT 小部件。 这将允许您将小部件拖动到主题提供的各种小部件区域。 为此，请转到您的 WordPress 仪表板并导航到外观 > 小部件。 然后将小部件拖到小部件区域或您的选择并更新小部件设置。

对于此示例，我使用 Divi 主题在侧边栏顶部显示面包屑。 这是帖子上的样子。

与 Yoast Breadcrumb 示例类似，您还可以通过将必要的代码添加到您的子主题来调用您站点的面包屑路径。 这是他们提供的符合 schema.org 面包屑列表的代码：

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

因为我在这个例子中使用了 Divi 主题，所以我将把代码添加到我的 Divi Child 主题的 Single.php 文件中，就在文章标签的正上方。 这将在我所有帖子的顶部显示面包屑。

这是添加代码后帖子的样子。

使用插件设置配置面包屑

Breadcrumb NavXT 插件有一些强大的选项来配置你的面包屑。 您可以针对不同的分类法等自定义面包屑的整个模板。 您可以通过导航到“设置”>“面包屑导航”从 WordPress 仪表板访问这些设置。

面包屑的样式

如果要设置面包屑的样式，可以定位代码中包含的名为“面包屑”的类。

只需将以下 CSS 添加到您的子主题的 style.css 文件或主题定制器附加 CSS 中：

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

如果您想使用带有 Divi 主题的面包屑小部件，您还可以使用 Divi 的侧边栏模块在 Divi Builder 中为面包屑添加样式。

最后的想法

面包屑是网站可用性和搜索引擎优化的重要组成部分。 因此，如果您正在考虑向 WordPress 网站添加面包屑，我建议您从本文中提到的插件（Yoast SEO 和 Breadcrumb NavXT）提供的方法开始。 如果您已经在利用他们的 SEO 插件，那么使用 Yoast 面包屑是最有意义的，因为它已经可供您使用。 但是，Breadcrumb NavXT 也是一个高度可定制的选项。 当然，您可能需要访问您的主题文件，但总而言之，这个过程很简单。 如果有的话，我希望这有助于减轻在您自己的 WordPress 网站上获取面包屑的痛苦。

我期待在评论中收到您的来信。

干杯!