思路:Tabs 的两个部分各挂一个查询循环
Bricks 的查询循环除了文章、用户、分类,还开箱支持 ACF Repeater 和 Meta Box Group。这意味着 Repeater 的每一行都可以作为一个“循环项”来渲染。把这一点和 Bricks 的 Tabs(Nestable)元素结合起来,就能实现一个很实用的效果:
Repeater 每行 = 一个标签页,标题取行的 A 子字段,内容取行的 B 子字段。
经典的“产品功能”场景:Repeater 字段 features,每行有 features_title(功能名)和 features_blurb(功能描述),前端渲染成一组标签页,点哪个功能名就显示哪个描述。全程在构建器里点选完成,不需要任何 PHP。
Step 1:建字段组并填充数据
- ACF 字段组挂在某个 Page 上:Repeater 字段
features,子字段features_title(text)和features_blurb(textarea 或 WYSIWYG)。 - 在该页面录入 2-3 行功能数据,每行一个标题一段描述。
Step 2:搭建 Tabs 结构
- 用 Bricks 编辑页面,在 Section 的 Container 里添加 Tabs(Nestable) 元素。
- Tabs 初始自带一个 Tab 菜单(Tab menu)和一个内容区(Content),各自默认有两个子项。我们要把它变成“一个菜单项 + 一个面板”的骨架:
- 选中 Tab menu 下的第二个 Div,删掉——只留一个,让它作为循环项模板;
- 选中 Content 下的第二个 Pane,删掉——只留一个。
- 给 Tab menu 里剩下的那个 Div 里的 Basic Text,以及 Content 里剩下的那个 Pane 里的 Rich Text,分别做好标记(改文本占位符即可),方便后续区分。
Step 3:Tab 菜单循环 + 内容面板循环
现在给 Tabs 的两个部分各挂一个 ACF Repeater 查询循环:
- Tab 菜单:选中 Tab menu 下剩下的那个 Div,启用查询循环(Query Loop),点击查询图标,查询类型选你的 ACF Repeater 字段
features。然后选中 Div 里的 Basic Text,用动态数据(闪电/花括号按钮)插入{acf_features_title}——每行一个标签,标签文本就是该行的功能名。 - 内容面板:选中 Content 下剩下的那个 Pane,启用查询循环,同样把查询类型设为同一个 ACF Repeater。再把 Pane 里 Rich Text 的内容替换为动态数据
{acf_features_blurb}——每行一个面板,面板内容就是该行的功能描述。
保存并查看前端:Repeater 有几行,就自动生成几个标签页,标题和内容一一对应,点标签切换面板。加行、删行、拖拽排序,前端标签页都会自动跟随,完全不需要重新构建结构。
几个值得注意的点:
- 两个查询循环引用同一个 Repeater 字段,它们各自独立运行,但行数相同、顺序相同,所以标签和面板天然对齐;
- 如果子字段是 WYSIWYG(富文本),面板里用 Rich Text 元素而不是 Basic Text,
{acf_features_blurb}会输出格式化后的 HTML; - 这套“循环挂菜单 + 循环挂面板”的套路同样适用于 Meta Box Group 字段(查询类型选 MB Group),以及把 Repeater 行做成手风琴(Accordion)、轮播(Slider)等任意可嵌套元素。
小结:ACF Repeater 变成 Tabs 标签页,本质是“可嵌套元素 + 两个查询循环”的组合拳。Tabs 的菜单部分循环标题子字段、内容部分循环描述子字段,零代码、零插件。这是 Bricks 查询循环原生支持 ACF Repeater 最直观的用法之一——理解了“循环可以挂在任何可嵌套元素的任何子容器上”,还能延伸出更多玩法。