如何在 WordPress 中添加 Yoast SEO 面包屑?

面包屑可帮助用户轻松浏览您的网站,并通过显示面包屑轨迹使搜索引擎结果具有现代感。 尽管大多数主题都提供面包屑作为默认功能,但您可能无法在逐页模式下完全控制它。 Yoast 的 WordPress SEO 插件是一个增强 WordPress 网站 SEO 的强大功能包,它提供了比用于创建面包屑的专用插件更好的处理面包屑的简单有效的方法。 在本文中,我们将讨论如何使用 Yoast SEO 插件以及自定义选项在 WordPress 中添加面包屑。

安装 WordPress SEO 插件

登录到您的 WordPress 管理仪表板并导航到“插件 > 添加新”菜单。 搜索“Yoast SEO”或在“流行”选项卡下查找“Yoast SEO”插件。 安装插件并在您的站点上激活它。

如何启用面包屑?

激活插件后,它将添加一个名为“SEO”的新导航菜单。 转到“SEO > 搜索外观”菜单,然后导航到“面包屑”选项卡。

Yoast SEO 面包屑设置
Yoast SEO 面包屑设置

向下滚动到底部并为“为您的主题启用面包屑”设置“启用”选项。 以下是 Yoast 面包屑提供的一些自定义选项,这些选项将适用于您的整个网站:

  • 在面包屑级别之间添加分隔符,可以是 >、<、- 或任何其他符号。
  • 输入要为“主页”页面显示的锚文本。
  • 在主页、档案、404 页面等各种页面上为面包屑路径添加前缀。
  • 您可以从面包屑中启用或禁用“博客”页面。
  • 如果您想通过将其加粗来突出显示面包屑中的标题。
  • 为每个内容类型和分类选择要在面包屑中显示的分类和帖子类型。
WordPress 站点中的示例面包屑
WordPress 站点中的示例面包屑

保存更改,下一步是在主题文件中添加面包屑代码。 请注意,Yoast SEO 插件还在“外观 > 自定义 > Yoast SEO 面包屑”部分下添加了一些自定义选项。 插件设置页面中的设置将自动显示在此处,您可以根据需要进行更改。

定制器中的 Yoast 面包屑设置
定制器中的 Yoast 面包屑设置

在 Single.php 中添加面包屑代码

为了使用 Yoast SEO 插件在您的 WordPress 网站上激活面包屑功能,您需要在核心主题文件中添加以下 PHP 代码。 您可以在子主题文件或直接在父主题文件上执行此操作。 根据需要的位置,您可能需要将以下代码粘贴到“header.php”或“single.php”文件下。 在大多数情况下,您需要将代码放在“single.php”下。 复制以下代码:

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

导航到“外观 > 编辑器”并查找“single.php”文件。 将代码粘贴到帖子标题上方,然后单击“更新文件”按钮保存更改。

在 Single.php 文件中添加 Yoast 面包屑代码
在 Single.php 文件中添加 Yoast 面包屑代码

如果面包屑与您发布的帖子没有对齐,那么您可能需要相应地调整代码的位置。 例如,当代码放在“single.php”文件中时,下面是默认 WordPress 主题之一中的面包屑显示。

WordPress 25 主题中的 Yoast 面包屑显示
WordPress 25 主题中的 Yoast 面包屑显示

Google 将在搜索结果中显示面包屑,如下所示:

Google 搜索中显示的面包屑导航
Google 搜索中显示的面包屑导航

大多数最新的 WordPress 主题允许使用钩子在站点布局的所需位置插入代码,而不是编辑 functions.php 文件。 例如,您可以在 GeneratePress 主题中使用钩子来添加 Yoast 面包屑,如本文所述。 很少有其他主题像 Kadence,允许从 Yoast SEO 等少数流行插件中选择面包屑选项,并自动插入到您想要的位置。

使用 CSS 自定义面包屑

添加 PHP 代码将创建带有链接的裸面包屑。 您可以添加自定义 CSS 类来装饰面包屑,否则只需在“single.php”中使用相同的 PHP 代码,然后在主题的“style.css”文件下或主题选项的自定义主题部分下添加以下 CSS 代码(如果您主题支持)。

#breadcrumbs { 
box-shadow: 1px 1px #d5d4d4; 
background: #eeeded; 
border: 1px solid #eeeded; 
border-radius: 5px; 
padding: 0 5px 0 10px; 
font-size: 16px;
}

它将生成如下所示的面包屑,您可以根据需要自定义 CSS。

带有自定义 CSS 的 Yoast 面包屑
带有自定义 CSS 的 Yoast 面包屑

在面包屑导航中更改帖子标题

有时实际的帖子标题可能很长,您只想在面包屑显示中截取较短的标题。 Yoast SEO 插件将在 WordPress 可视化编辑器中创建一个元框,并提供适用于页面级别的各种功能。 创建或编辑帖子时,请转到 WordPress SEO 插件元框中的“高级”选项卡,然后输入该页面所需的面包屑标题。 这将显示在面包屑试用版中,而不是实际的帖子标题。

在 Yoast WordPress SEO 插件中更改面包屑标题
在 Yoast WordPress SEO 插件中更改面包屑标题

从 Yoast Breadcrumb 中删除帖子标题

通常,面包屑显示在帖子标题的正上方。 在这种情况下,在面包屑中显示标题是多余的,因为它会占用折叠区域上方的宝贵空间。 这在页面加载时空间有限的移动设备上尤其成问题。 许多插件(如 Rank Math)允许您通过单击从面包屑中删除帖子标题。

在排名数学的面包屑中隐藏帖子标题
在排名数学的面包屑中隐藏帖子标题

尽管 Yoast 没有为此提供任何选项,但您可以在您的 functions.php 文件中添加以下代码来实现此目的。 了解如何使用 functions.php 文件在您的主题中添加功能。

/* Remove Post Title from Yoast Breadcrumb */
add_filter('wpseo_breadcrumb_single_link', 'remove_breadcrumb_title' );
function remove_breadcrumb_title( $link_output) {
if(strpos( $link_output, 'breadcrumb_last' ) !== false ) {
$link_output="";
}
return $link_output;
}

最终结果将如下所示,有和没有帖子标题:

从 Yoast Breadcrumb 中删除帖子标题
从 Yoast Breadcrumb 中删除帖子标题

最后的话

早些时候,Yoast 面包屑是 WordPress 用于在其网站上插入面包屑的简单可用选项之一。 由于该插件可帮助您在帖子有多个类别时选择主要类别,因此您可以在面包屑中显示主要类别。 然而,现在许多 WordPress 主题,尤其是 SEO 代理和杂志主题都提供面包屑作为内置功能。 因此,请确保仅当您的主题中没有此选项时才使用 Yoast 面包屑。

  您应该远离的 5 个不良 SEO 公司的迹象

类似文章