如何在 GeneratePress 主题中添加 Yoast Breadcrumb？

GeneratePress 是 WordPress 网站流行的轻量级主题之一。但是，它错过了许多减少 CSS 和 JavaScript 大小的基本功能。如果您在 GeneratePress 上使用 Yoast SEO 插件，那么这里是添加面包屑功能的方法。

为什么要添加面包屑？

如今，在 Google 中排名无非就是掌握在您的网站上使用不同类型的丰富网页摘要（模式）。早期的评论是主要的丰富网页摘要选项。如今，您有多种选择，例如常见问题解答、操作方法和面包屑。幸运的是，WordPress 有许多添加结构化数据的选项。 Yoast 面包屑是添加面包屑或导航链接的简单方法。您会在 Google 搜索结果中找到面包屑，如下所示：

最佳做法是在主要内容开始之前添加面包屑。这将帮助用户了解他们在网站上的确切位置。但是，您也可以在页面底部插入面包屑。

此外，Google Search Console 将向您显示每个页面的有效面包屑数据以验证架构。

在 Yoast SEO 插件中启用面包屑导航

安装并激活 Yoast SEO 插件后，转到“SEO > 搜索外观”部分。单击“面包屑”选项卡部分，然后选择“启用”选项。

您可以选择在面包屑中显示“博客”索引页面，并选择将页面标题加粗。

确保您已在“要在内容类型的面包屑中显示的分类”下为“帖子”选择了“类别”选项。这将帮助您在面包屑结构中展示您在帖子编辑器中选择的主要类别。

不幸的是，这不足以在您的网站上显示导航链接。您必须在博客文章模板（single.php 文件）中插入一段 PHP 代码来显示面包屑。以下是 Yoast SEO 面包屑 PHP 代码，您可以复制并插入到 GeneratePress 站点中。

<!-- BEGIN Yoast Breadcrumb -->
<?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<!-- END Yoast Breadcrumb -->

在 GeneratePress 主题中插入 Yoast Breadcrumb

如果您使用的是 GP 高级版，那么有一种使用 Elements 插入 PHP 代码的简单方法。如果您使用免费版本，则必须使用附加插件或将代码插入子主题或父主题的 single.php 文件中。

为 GP Premium 插入元素

首先，确保您已安装并激活了 GP 高级插件。

转到“外观> GeneratePress”并激活“元素”。请记住，“禁用元素”是一个不同的选项。因此，请检查并确保您已激活“元素”选项。

导航到“外观>元素”部分，然后单击“添加新”按钮。

单击下拉菜单并选择元素类型为“Hook”。

将元素的名称输入为“Yoast Breadcrumb”或类似名称。
将上一步中复制的 Yoast Breadcrumb 代码粘贴到文本框中。

单击“设置”选项卡，然后单击“挂钩”下拉菜单。您将看到大量可用的钩子位置并选择“before_content”选项。这将在帖子标题之前添加面包屑，如下图所示。

您可以参考这里的钩子位置列表视觉图表并选择您的站点所需的挂钩。
选择“Execute PHP”复选框并将优先级留空。如果同一“before_content”位置有多个挂钩，则输入 10 或 20 来决定执行的优先级。如果您只有一个用于“before_content”的钩子，则将此字段留空。

在“显示规则”选项卡下，您可以选择显示面包屑的位置。
单击下拉菜单并选择“帖子”，它将自动为下一个框选择“所有帖子”选项。

单击“发布”按钮以使 PHP 代码在您的站点上运行。您可以在所有博客文章的文章标题前看到面包屑导航。

免费版插入 Single.php 文件

如果您没有 GP 保费，那么有两种选择。您可以在父主题或子主题的 single.php 文件中插入 PHP 代码。我们在这里解释直接添加到父主题文件。查看这篇关于如何创建子和添加代码的文章。

转到“外观>主题编辑器”。
在 GeneratePress 上，single.php 文件使用 content-single.php 文件来拉取内容。因此，您必须在 content-single.php 文件中插入 Yoast Breadcrumb 代码。
在“主题文件”侧边栏上，找到 content-single.php 文件。
在

行之前粘贴面包屑代码。正如你所看到的，generate_before_content 钩子实际上在这里。
单击“更新文件”按钮以保存更改。

样式化面包屑

正如您在上面的面包屑屏幕截图中所见，它显示在浅灰色阴影框内。您必须使用自定义 CSS 来更改面包屑的显示。这是免费和高级主题版本所需的可选步骤。

转到“外观 > 自定义”部分。
将以下 CSS 代码粘贴到“其他 CSS”部分下。
点击“发布”按钮。

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