使用 GeneratePress 和 GenerateBlocks 添加面包屑导航（Breadcrumbs）教程

本教程介绍利用 GeneratePress 和 GenerateBlocks，使用Block Hook 元素轻松在网站中添加面包屑导航，提升页面导航效果。示例采用 Yoast SEO 插件的面包屑功能，方法适用其他 SEO 插件（如 Rank Math），只需更换相应短代码。

一、准备工作

确认已安装启用 Yoast SEO 插件（或其他支持面包屑的 SEO 插件），且面包屑功能已开启。

二、新建元素并添加面包屑短代码

• 进入后台「外观 → 元素（Elements）」，点击「添加新元素」

• 元素类型选 Hook
• 钩子名称设为 before_entry_title，即文章标题之前显示面包屑

• 添加快捷块（Shortcode Block）

• 在快捷块中粘贴 Yoast SEO 面包屑短代码：[wpseo_breadcrumb] （其他插件请使用对应短代码）
• 选择显示位置为所有文章页面，点击发布

三、给面包屑添加样式（可选）

新增容器块，将快捷块拖入容器内，确保容器包裹快捷块

使用容器块样式调整面包屑外观：

• 修改文本颜色（如蓝色）
• 修改链接颜色（如粉色）

• 设置背景色（如灰色）

• 调整内边距（Padding），建议统一为 5px

• 添加底部外边距（Margin），增加面包屑与标题间间距

效果预览：

四、在页面横幅（Page Hero）中添加面包屑

• 将之前创建的面包屑元素设为草稿状态

• 打开单篇文章的页面横幅元素（Single Post Hero）

• 在横幅内添加快捷块，粘贴面包屑短代码
• 将快捷块移动至标题上方

• 更新保存，刷新页面即可看到面包屑显示在页面横幅中

总结

利用 GeneratePress 和 GenerateBlocks 的 Block Hook 功能，添加面包屑导航简单灵活，样式可自由调整。结合 SEO 插件短代码，实现高效导航效果提升。

最近更新

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：[email protected]
④ 工作时间：周一至周五，9:30-18:30，节假日休息