Bricks 元素条件设置详解——不满足条件的元素直接不渲染

现象：某些内容只想对特定人显示

你想做这么个效果：登录用户看到“欢迎回来”的按钮，游客只看到“立即注册”；或者某条公告只在活动当天出现。用显隐切换（display:none）不彻底——它只是藏起来，HTML 里还在，爬虫和源码照样能拿到。

根因：元素条件是渲染前的可见性开关

Bricks 从 1.5.4 起引入了元素条件（Element Conditions）。它和 CSS 隐藏完全不同：条件不满足时，这个元素根本不会出现在最终 HTML 里，是真的“不渲染”，干净又安全。

每个条件由三个属性组成：

• Key（键）：比什么？比如用户登录状态、用户角色、日期、动态数据等。
• 比较操作（Operator）：怎么比？==、!=、>、<、包含、之前、之后等。
• 值（Value）：比什么值？数字、文本、勾选框、下拉选项等。

例如 User Login Is Logged In，意思就是“当用户已登录时显示”。

步骤一：给元素加条件组

1. 选中元素，设置面板里点那个条件图标（一条类似漏斗/条件的标志），进入条件设置。
2. 点 + 给元素添加一条条件，填好 Key / 比较操作 / 值。
3. 加完之后，条件图标会变成高亮色，提示你“这元素带了条件”。再点图标右边的 × 可以关掉整个条件设置。

步骤二：理解条件组之间的 或 / 与

Bricks 的条件逻辑是真假值 + 或（OR）/ 与（AND） 组合，这是最容易绕晕的地方：

• 条件组之间是 OR（或）：你可以加多个条件组，只要任意一个组为真，元素就显示。组与组之间标着 OR。
• 同一个条件组内部是 AND（与）：组里可以加多条条件，必须全部为真，这个组才算真。组内条件之间标着 And。
• 在条件组里点条件下方的 + 就能加组内的第二条条件。

记忆法：组间或，组内与。最后整体结果为真，元素才出场。

步骤三：用动态数据做条件

Key 还能选 Dynamic Data（动态数据），拿某个动态标签的值来比：

比如选 Post Title 作为 Key，比较操作选“包含”，值填 new——那么只有当当前文章标题里含有 new 时，这个元素才显示。

这对“按内容特征控制模块显隐”特别好用，比如标题带 promo 的文章自动挂个横幅。

进阶：用 bricks/element/render 过滤器自定义

如果内置条件还不够，想写自己的逻辑，可以用 Bricks 的 bricks/element/render 过滤器在 PHP 里控制：

add_filter( 'bricks/element/render', function( $render, $element ) {
    // 例：id 为 abc123 的元素，仅对有权限的用户渲染
    if ( $element->id === 'abc123' && ! current_user_can( 'edit_posts' ) ) {
        return false; // 返回 false 即不渲染
    }
    return $render;
}, 10, 2 );

上面过滤器的参数签名（如 $element 的属性名、返回值语义）以官方文档为准，按官方文档补全后再上生产。

常见误区

• 别用 display:none 代替条件：CSS 隐藏只是「藏起来」，HTML 里还在，爬虫和源码照样拿到；条件不满足是「根本不渲染」，这才是显隐需求的正确姿势。
• 组间或、组内与记牢：多个条件组之间是 OR（任一为真即显示），组内多条条件是 AND（全部为真组才为真）——组合逻辑绕晕是新手高频问题。
• 条件图标高亮 = 带了条件：设完条件后图标变高亮色，说明该元素有显隐规则；排查「元素怎么不见了」先看它有没有条件。
• 复杂逻辑再上过滤器：内置条件够用就别写 PHP；bricks/element/render 过滤器适合「按业务规则精细控制」的场景，参数签名以官方文档为准。

小结

元素条件是 Bricks 里控制可见性的正确姿势：不满足就真的从 HTML 消失，比 CSS 隐藏彻底得多。记住“组间或、组内与”，再加上动态数据 Key，基本能覆盖绝大多数显隐需求；更复杂的逻辑再上 bricks/element/render 过滤器。

条件组合老绕不清、或者想按业务规则做精细显隐？联系 Ray Chan，顺手帮你把元素条件配明白。

常见问题（FAQ）

Q：元素条件和 CSS 隐藏有什么区别？ A：CSS 隐藏（display:none）只是藏起来，HTML 里还在；元素条件不满足时元素根本不会渲染进最终 HTML，更干净安全。

Q：多个条件之间是「或」还是「与」？ A：条件组之间是 OR（任一为真即显示），同一个组内多条条件是 AND（全部为真组才为真）。记忆法：组间或、组内与。

Q：条件支持哪些 Key？ A：用户登录状态、用户角色、日期、动态数据等，配合比较操作符（==、!=、包含、之前/之后等）使用。

Q：怎么按文章内容控制显隐？ A：Key 选 Dynamic Data（如 Post Title），比较操作选「包含」，值填关键词——标题带 promo 的文章自动挂横幅。

Q：内置条件不够用怎么办？ A：用 bricks/element/render 过滤器在 PHP 里自定义渲染逻辑，参数签名以官方文档为准。

• 相关阅读：Bricks Setup Guide 延伸阅读

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

站长

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.

获取报价 →浏览全部教程