如何正确将 HTML 页面上传到 WordPress 并避免 404 错误
lyc054211本教程介绍利用 GeneratePress 和 GenerateBlocks，使用Block Hook 元素轻松在网站中添加面包屑导航，提升页面导航效果。示例采用 Yoast SEO 插件的面包屑功能，方法适用其他 SEO 插件（如 Rank Math），只需更换相应短代码。
利用 GeneratePress 和 GenerateBlocks 添加面包屑导航的简易教程
一、准备工作
确认已安装启用 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 插件短代码，实现高效导航效果提升。
最近更新
了解 宝藏号 的更多信息订阅后即可通过电子邮件收到最新文章。 © 版权声明 文章版权归作者所有，未经允许请勿转载。 相关文章
lyc054211
Flatsome主题全面指南：从安装到优化，打造高效电商网站lyc054211
如何用插件给 WordPress 网站添加分页功能lyc054211
Gutenberg 20.6 和 20.7 更新整合内容lyc054211 暂无评论... |
|---|