场景:全站浮动元素放哪个模板
Bricks Facebook 群里常见提问:我有一个浮动元素(悬浮按钮、回到顶部、浮动客服入口等)要在每个页面、每篇文章、每个 CPT 上都显示,应该把它放进哪个模板?
在 Oxygen 里大家习惯放在主模板(main)里;到了 Bricks,灵活度很高、做法很多,但最理想、最省事的方式是:单独建一个 Section 类型的模板,专门放浮动内容,然后把这个模板挂到 wp_footer 钩子上。这样浮动元素与页头、页脚、正文模板完全解耦,想改浮动内容只动这一个模板。
Step 1:新建 Section 类型模板
后台 Bricks → Templates → Add New,模板名称随意(如 Floating Content),类型选择 Section。用 Bricks 编辑器打开,把浮动内容搭出来:外层一个容器(Container)或 Div,里面放按钮、图标、文案等。
Step 2:给最外层容器设置固定定位
这是整个方案的核心:选中结构里最外层的包装元素,在 STYLE → Position 里设置:
position: fixed(固定定位,脱离文档流、不随页面滚动)right/bottom(典型值:0或20px等,贴右下角最常见)- 视需要补
z-index保证浮在其他内容之上
如果浮动元素想跟随滚动到中部再吸顶,那是另一套逻辑(position: sticky),本方案针对的是「一直悬浮在屏幕角落」的场景。
Step 3:条件设为整个网站并挂到 wp_footer
点击模板顶部齿轮图标(Settings)→ TEMPLATE SETTINGS → CONDITIONS,选择 Entire website(整个网站),这样所有页面都会加载该模板。
然后在 HOOK 下拉里选择 wp_footer。保存后到前台任意页面查看,浮动元素应该已经出现在右下角了。
Bricks 还有其他可用的钩子位置,比如 bricks_after_footer、bricks_after_site_wrapper,但 wp_footer 在这里是最优选——遵循前辈们总结的箴言:Hook late, return early(尽量挂晚、尽早返回),wp_footer 是整页最后执行的动作之一,浮动元素在它里面渲染不会干扰其他内容的输出顺序。
原理说明
- 模板类型 Section:Bricks 模板分为 Section / Header / Footer / Popup 等类型,Section 类型模板通过 Hook 挂载时会把模板内容渲染到指定钩子位置,适合做「页面级组件」。
- CONDITIONS 决定作用范围:Entire website 表示全站生效;也可以选 Single posts、特定 CPT、特定分类等,浮动元素就能按需出现在部分页面。
- position: fixed:相对视口定位,不占文档流空间,因此不会挤压页面内容;配合
right/bottom即可固定在屏幕角落,滚动时始终可见。 - Hook late, return early:挂在尽量靠后的钩子,减少与其他模板输出的顺序冲突,也让主题/插件的过早输出不会盖住浮动层。
小结
「Section 模板 + wp_footer」是 Bricks 里做全站浮动元素的推荐套路:建一次、全站复用、条件可控、与页头页脚解耦。以后遇到「每个页面都要有的小部件」——浮动客服按钮、促销浮层、回到顶部——都可以照这个模式处理。