WordPress divi主题

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

by | May 16, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

面包屑wordpress

带有面包屑的 Home Depot 产品页面

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

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

订阅我们的 Youtube 频道

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

要使用 Yoast SEO 将面包屑添加到您的 WordPress 网站,您需要完成三个简单的步骤:

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

安装并激活 Yoast SEO 插件

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

面包屑wordpress

WordPress divi主题

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

接下来,我们需要将一小段代码添加到您的 WordPress 主题文件中。 因此,如果您还没有,最好创建一个子主题。 对于此示例,我将向您展示如何将面包屑代码片段添加到默认的 TwentyNineteen 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>' );
}
?>

面包屑wordpress

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

在插件设置中启用和配置 Yoast 面包屑

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

面包屑wordpress

现在让我们继续看看我在 TwentyNineteen 主题中创建的帖子中的面包屑是什么样子的。

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

面包屑wordpress

fiverr建站WordPress程序员

这是启用面包屑导航后帖子的样子。 这个特定的帖子示例有一个类别(“WordPress”)和一个父类别(“Web Design”),向您展示我在面包屑设置中选择的面包屑的类别分类。

面包屑wordpress

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

#breadcrumbs {

/*Add breadcrumb styling here*/

}

对于 TwentyNineteen 主题,我可能想通过添加以下自定义 CSS 来匹配标题文本的边距:

#breadcrumbs {

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

}

面包屑wordpress

独立站选品工具

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

Home » How To Add Breadcrumbs To Your WordPress Website

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

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

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

面包屑wordpress

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

高质量外链购买

面包屑wordpress

在本例中,我使用 Divi 主题在侧边栏顶部显示面包屑。 这是它在帖子上的样子。

面包屑wordpress

与 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 文件中添加代码。 这将在我所有帖子的顶部显示面包屑。

JasperAI 10000字免费额度试用

面包屑wordpress

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

面包屑wordpress

使用插件设置配置面包屑

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

面包屑wordpress

WordPress备份工具updrafplus

样式化面包屑

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

只需将以下 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 网站上获取面包屑的痛苦。

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

干杯!