使用 GeneratePress 和 GenerateBlocks 添加面包屑导航(Breadcrumbs)教程

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

利用 GeneratePress 和 GenerateBlocks 添加面包屑导航的简易教程

一、准备工作

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

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

进入后台「外观 → 元素(Elements)」,点击「添加新元素」元素类型选 Hook

钩子名称设为 before_entry_title,即文章标题之前显示面包屑添加快捷块(Shortcode Block)在快捷块中粘贴 Yoast SEO 面包屑短代码:Home » 使用 GeneratePress 和 GenerateBlocks 添加面包屑导航(Breadcrumbs)教程 (其他插件请使用对应短代码)

选择显示位置为所有文章页面,点击发布

三、给面包屑添加样式(可选)

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

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

修改文本颜色(如蓝色)

修改链接颜色(如粉色)设置背景色(如灰色)调整内边距(Padding),建议统一为 5px添加底部外边距(Margin),增加面包屑与标题间间距

效果预览:

四、在页面横幅(Page Hero)中添加面包屑

将之前创建的面包屑元素设为草稿状态打开单篇文章的页面横幅元素(Single Post Hero)在横幅内添加快捷块,粘贴面包屑短代码

将快捷块移动至标题上方更新保存,刷新页面即可看到面包屑显示在页面横幅中

总结

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

最近更新

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用 * 标注