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 属性，其他项就干净地没有这个类。

Step 4：让全局类样式可用

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

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