Bricks Query Loop 条件类名与 data 属性：库存大于 25 加 in-stock

需求：按字段值条件加类

Bricks Facebook 群里有用户问：怎么按条件给查询循环项加类？比如：class 属性的值写成“如果 {acf_field} > 25，就加 classname”。他试了好几种语法都不对——这很正常，因为 Bricks 的动态标签（Dynamic Data）本身不支持条件表达式，{echo:函数} 只能输出函数的返回值，不能做“如果…就…“的运算。

这个需求的现实场景很多：电商站按库存给商品卡片加“有货/缺货”类、按价格区间加“促销”类、按日期给活动加“已结束”类。核心解法是：把条件判断写进一个 PHP 函数，让函数返回类名字符串，再用动态标签把返回值注入属性。这样条件逻辑完全由 PHP 掌控，想怎么写怎么写，Bricks 这边只需要一个属性。

而且这个方案还能顺带解决一个隐藏问题：“Bricks 全局类的样式在别的页面不可用”。下面以“库存大于 25 加 in-stock 类”为例完整走一遍。

Step 1：定义条件函数

假设文章上挂了一个 Number 类型自定义字段 stock_quantity（库存数量）。定义一个函数：当前循环项的该字段值大于 25 时返回 in-stock：

<?php
/**
 * 根据库存数量判断商品是否有货。
 *
 * 读取 stock_quantity 自定义字段值，
 * 数量大于 25 时返回 'in-stock'。
 *
 * @return string 库存大于 25 返回 'in-stock'，否则返回空字符串。
 */
function bl_check_stock_availability(): string {
	// 读取 stock_quantity 自定义字段值
	$stock_quantity = get_post_meta( get_the_ID(), 'stock_quantity', true );
	// 转成整数并判断是否大于 25
	if ( (int) $stock_quantity > 25 ) {
		return 'in-stock';
	}
	return '';
}

get_post_meta( get_the_ID(), 'stock_quantity', true ) 读取当前循环项的字段值，(int) 强转成整数再做比较，避免字符串比较的坑。函数放在子主题的 functions.php 或代码片段插件里。

Step 2：白名单函数

把函数加进 Bricks 白名单：

<?php 
add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'bl_check_stock_availability'
  ];
} );

白名单里还要包含你站点正在用的其他函数，可在 Bricks → Settings → Custom code 的 Code review 查看。文档见 bricks/code/echo_function_names。

Step 3：添加属性

1. 在页面或模板里给 Block 元素设置查询循环。

2. 进入 STYLE → ATTRIBUTES，添加一个属性：

   • Name：class

   • Value：{echo:bl_check_stock_availability}

建议：一般情况下用 data 属性比 class 更好。如果你不打算用 Bricks 的全局类，可以把 Name 换成 data-stock-availability，然后 CSS 用 [data-stock-availability="in-stock"] 选择器定位。data 属性不会和 Bricks 自身的类体系产生任何冲突，也不会被全局样式误伤，调试时也更清晰。

用 class 作属性名时，输出效果就是：库存大于 25 的项带 in-stock 类。想把库存 ≤ 25 或字段为空的项标记为 not-in-stock，把函数里的 return ''; 换成 return 'not-in-stock'; 即可——注意函数返回空字符串时，Bricks 不会输出一个空的 class 属性，其他项就干净地没有这个类。

相关阅读：

• Bricks Query Loop 高亮当前文章：给循环项加 data-current 属性

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

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

Step 4：让全局类样式可用

如果你在构建器里给某个元素分配过 in-stock 类并用 Bricks 元素控件设了样式，但另一页/模板上没有这个类的元素，Bricks 不会输出该类样式——因为 Bricks 只为“实际出现在页面上的元素”生成 CSS。最简单的办法：随便添加一个元素，分配该类，然后通过 CSS 控件把它的显示设为 none（或用 Bricks 新的 Hide element 功能）。这样该类样式会被打包输出，但访客看不到这个隐藏元素。

小结：条件类名的核心是“函数返回类名 + 动态标签注入属性”。比起硬记语法，这个方案更干净，还能复用白名单机制。字段条件换成任何你想要的判断（日期、布尔、关系等）都行，一套模式通吃。想进一步，还可以让函数返回多个类名（用空格分隔的字符串），实现多重条件组合。

常见误区

最常被误解的一点：Bricks 动态标签不支持条件表达式，所以 {acf_field} > 25 就加类 这种写法在标签里写不出来——必须把判断搬进 PHP 函数，让函数返回类名字符串，再用 {echo:函数} 注入。第二个坑是安全：条件函数最好带白名单，只返回你允许的有限类名，别把任意字段值直接拼进 class，避免前端出现意料之外的类甚至注入。第三个是全局类样式不会自动输出，页面上没出现该类的元素，Bricks 就不打包它的 CSS，需要时用隐藏元素把类「养」出来。

常见问题（FAQ）

Q：为什么直接在动态标签里写条件不生效？ A：Bricks 动态标签不做条件运算，要把判断写进 PHP 函数，用 echo 返回类名再注入属性。

Q：条件函数为什么要白名单？ A：防止任意字段值被拼进 class，造成意外类名或注入，只返回允许的类更安全。

Q：加了类但样式没生效？ A：Bricks 只为页面上实际出现的类生成 CSS，可用隐藏元素把该类样式「养」出来。

Q：能同时加多个类吗？ A：能，让函数返回用空格分隔的多个类名字符串即可。

延伸阅读

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

站长

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.

获取报价 →浏览全部教程