零代码：ACF Repeater 子字段值做成 Bricks Tabs 标签页

思路：Tabs 的两个部分各挂一个查询循环

Bricks 的查询循环除了文章、用户、分类，还开箱支持 ACF Repeater 和 Meta Box Group。这意味着 Repeater 的每一行都可以作为一个“循环项”来渲染。把这一点和 Bricks 的 Tabs（Nestable）元素结合起来，就能实现一个很实用的效果：

Repeater 每行 = 一个标签页，标题取行的 A 子字段，内容取行的 B 子字段。

经典的“产品功能”场景：Repeater 字段 features，每行有 features_title（功能名）和 features_blurb（功能描述），前端渲染成一组标签页，点哪个功能名就显示哪个描述。全程在构建器里点选完成，不需要任何 PHP。

Step 1：建字段组并填充数据

1. ACF 字段组挂在某个 Page 上：Repeater 字段 features，子字段 features_title（text）和 features_blurb（textarea 或 WYSIWYG）。

2. 在该页面录入 2-3 行功能数据，每行一个标题一段描述。

Step 2：搭建 Tabs 结构

1. 用 Bricks 编辑页面，在 Section 的 Container 里添加 Tabs（Nestable） 元素。

2. Tabs 初始自带一个 Tab 菜单（Tab menu）和一个内容区（Content），各自默认有两个子项。我们要把它变成“一个菜单项 + 一个面板”的骨架：

   • 选中 Tab menu 下的第二个 Div，删掉——只留一个，让它作为循环项模板；

   • 选中 Content 下的第二个 Pane，删掉——只留一个。

3. 给 Tab menu 里剩下的那个 Div 里的 Basic Text，以及 Content 里剩下的那个 Pane 里的 Rich Text，分别做好标记（改文本占位符即可），方便后续区分。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

Step 3：Tab 菜单循环 + 内容面板循环

现在给 Tabs 的两个部分各挂一个 ACF Repeater 查询循环：

1. Tab 菜单：选中 Tab menu 下剩下的那个 Div，启用查询循环（Query Loop），点击查询图标，查询类型选你的 ACF Repeater 字段 features。然后选中 Div 里的 Basic Text，用动态数据（闪电/花括号按钮）插入 {acf_features_title}——每行一个标签，标签文本就是该行的功能名。

2. 内容面板：选中 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）等任意可嵌套元素。

适用场景与常见坑

这套「Tabs + Repeater」适合数量固定、内容短平快的展示：产品功能点、服务项目、规格说明。几个常见坑提前排掉：

• 两个循环顺序必须一致：Tab 菜单和内容面板引用同一个 Repeater，行数、顺序天然对齐；增删行后两个循环自动同步，不用担心错位。
• 富文本子字段用 Rich Text：子字段是 WYSIWYG 时，面板里用 Rich Text 元素，{acf_xxx} 才会输出格式化后的 HTML，用 Basic Text 会看到一堆标签。
• 长内容别硬套标签页：标签页适合短段落；内容很长、需要完整收录的场合，直接展示或用手风琴可能更合适。

小结：ACF Repeater 变成 Tabs 标签页，本质是“可嵌套元素 + 两个查询循环”的组合拳。Tabs 的菜单部分循环标题子字段、内容部分循环描述子字段，零代码、零插件。这是 Bricks 查询循环原生支持 ACF Repeater 最直观的用法之一——理解了“循环可以挂在任何可嵌套元素的任何子容器上”，还能延伸出更多玩法。

常见问题（FAQ）

Q：Tabs 的标签和面板怎么保证一一对应？ A：两个部分引用同一个 Repeater 字段，各自独立循环但行数相同、顺序相同，天然对齐。

Q：子字段是富文本（WYSIWYG）怎么办？ A：面板里用 Rich Text 元素而不是 Basic Text，{acf_xxx} 才会输出格式化后的 HTML。

Q：加行、删行后前端会自动更新吗？ A：会。Repeater 有几行前端就有几个标签页，增删和拖拽排序都自动跟随，不需要重建结构。

Q：这个套路只适用 Tabs 吗？ A：不限于 Tabs。同样的「循环挂菜单 + 循环挂面板」思路适用于手风琴（Accordion）、轮播（Slider）等任意可嵌套元素，也适用于 Meta Box Group 字段。

Q：需要写 PHP 吗？ A：全程在构建器里点选完成，零代码、零插件。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程