写博客时经常要在文章里插大图,但默认情况下点图片只会跳链接。用古腾堡(Gutenberg)自带的灯箱(Lightbox)能力,可以让访客点图后在当前窗口弹层放大查看,体验更顺。
古腾堡的灯箱是什么
灯箱(Lightbox)指点击图片后,图片以半透明遮罩层的形式在浏览器窗口中央放大展示,点右上角关闭即可退出。古腾堡编辑器从较新版本起,给图片块内置了「点击展开」的连接选项,无需装插件就能实现。
设置步骤
- 在古腾堡编辑器里添加一张 图片 块,上传或选好图。
- 选中图片块,在右侧「块设置」里找到「链接到 / Link to」选项。
- 把链接目标设为 媒体文件(Media File),然后在展开的「点击行为」中选择「点击展开 / 灯箱(Lightbox)」。
- 更新或发布文章,前台点图片即可看到弹层放大效果。
注意事项
- 灯箱依赖主题或编辑器对灯箱脚本的加载,如果点击没反应,检查是否装了会禁用灯箱的优化/懒加载插件。
- 外贸站产品图建议用原图或大尺寸图做灯箱源,缩略图负责列表展示、灯箱负责看清细节。
- 若你的站主要用 Bricks 排版而非古腾堡,也可以在 Bricks 的图片元素里开启灯箱类设置达到同样效果。
小结
古腾堡图片灯箱是零成本提升阅读体验的小技巧:图片块链接到媒体文件并开启「点击展开」,访客点图即放大。适合教程截图、产品细节图等需要看清大图的场景。
内容说明(整理稿):本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程(源多为截图驱动教程,正文极薄),内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理,非原文逐字翻译,也不构成官方文档。操作入口/路径以你当前 Bricks 版本为准,实操前建议对照官方文档核对。
延伸阅读
Bricks 建站杂项技巧——古腾堡图片点击放大与那些零碎坑
教程:收录几个 Bricks / WordPress 建站中零散但实用的小技巧,比如让古腾堡里的图片点击后灯箱放大。
tutorialBricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据
教程:Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据——acf 附完整代码可直接复用,适合外贸独立站与 WordPress 开发者。
tutorialBricks 中输出 ACF Relationship 关联文章的数量
教程:Bricks 中输出 ACF Relationship 关联文章的数量——acf 附完整代码可直接复用,适合外贸独立站与 WordPress 开发者。
tutorialACF Relationship 字段 + Bricks 查询循环:显示关联文章
教程:ACF Relationship 字段 + Bricks 查询循环:显示关联文章——acf 附完整代码可直接复用,适合外贸独立站与 WordPress 开发者。
