首页 / 中文教程 / 教程

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

Bricks 的查询循环原生支持 ACF Repeater 和 Meta Box Group,配合可嵌套的 Tabs 元素,可以把 Repeater 的每一行变成标签页——标签标题取一个子字段、内容取另一个子字段,全程不用写一行代码。

Ray Chan·2026-08-11·约 1 分钟

思路: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,分别做好标记(改文本占位符即可),方便后续区分。

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)等任意可嵌套元素。

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

需要帮忙?

用 Bricks 建站?我接客户项目。

从快速营销站到完整的 Bricks 建站,再到从 Elementor 迁移——我都做过。本站每篇教程都来自真实项目经验。告诉我你的需求,一个工作日内回复。

  • Bricks 建站与改版
  • Elementor / Divi → Bricks 迁移
  • Bricks → Astro / headless 性能升级
  • 速度优化,PageSpeed 95+ 目标