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

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

为什么要添加面包屑?

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

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

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

Google 搜索结果中的面包屑导航
Google 搜索结果中的面包屑导航

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

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

启用 Yoast 面包屑
启用 Yoast 面包屑

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

选择 Yoast Breadcrumb 的选项
选择 Yoast Breadcrumb 的选项

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

不幸的是,这不足以在您的网站上显示导航链接。 您必须在博客文章模板(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 代码粘贴到文本框中。
粘贴 Yoast SEO 面包屑代码
粘贴 Yoast SEO 面包屑代码
  • 单击“设置”选项卡,然后单击“挂钩”下拉菜单。 您将看到大量可用的钩子位置并选择“before_content”选项。 这将在帖子标题之前添加面包屑,如下图所示。
GeneratePress 主题中的 Yoast Breadcrumb
GeneratePress 主题中的 Yoast Breadcrumb
  • 您可以参考这里的钩子位置列表 视觉图表 并选择您的站点所需的挂钩。
  • 选择“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 钩子实际上在这里。
  • 单击“更新文件”按钮以保存更改。
在主题文件中添加 PHP 代码
在主题文件中添加 PHP 代码

样式化面包屑

正如您在上面的面包屑屏幕截图中所见,它显示在浅灰色阴影框内。 您必须使用自定义 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;
}
添加自定义面包屑 CSS
添加自定义面包屑 CSS

根据需要调整填充、边框颜色、边框半径和背景。

  如何删除 WordPress 中未使用的 CSS 和 JavaScript?

类似文章