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

需求：导航列表高亮当前项

有用户提问：他的 CPT 单篇页上有一个同类型文章列表（用于站内导航），希望“当前”这篇文章的样式和其他项不一样——比如背景色、边框或文字颜色突出显示，让访客一眼就知道自己正在看哪一篇。但他在浏览器里检查 DOM，找不到任何能区分的属性或标记。

这个需求非常常见：文档站的侧边栏目录、杂志站的文章导航、电商站的同类商品切换，都需要“当前项高亮”。Bricks 的 Query Loop 默认不会给当前文章打任何标记，所以我们需要自己动手，而最干净的做法就是：给循环项输出一个自定义 data 属性，用纯 CSS 去定位样式。

思路如下：定义一个微型自定义函数，判断循环中当前文章的 ID 是否等于当前单篇文章（宿主文章）的 ID，把返回结果作为 Bricks 里一个自定义 data 属性的值，前端就能靠它来识别和美化当前项。

Step 1：定义判断函数

把下面代码添加到子主题（child theme）的 functions.php（不要带开头的 PHP 标签），或用代码片段插件（如 WPCodeBox）：

function bl_is_current_post() {
  return get_the_ID() === get_queried_object_id();
}

• get_the_ID() 返回循环中当前文章的 ID。
• get_queried_object_id() 返回当前单篇文章（宿主文章）的 ID。

两者相等，说明这一项就是正在浏览的文章，函数返回 true；否则返回 false。这个函数极其轻量，不涉及数据库查询，对性能没有任何影响，在循环里每项调用一次完全没问题。

Step 2：白名单函数

Bricks 出于安全考虑，只允许白名单内的函数在动态数据（Dynamic Data）里被调用。如果不加白名单，{echo:bl_is_current_post} 这种动态标签不会生效。把新函数加进白名单：

<?php 

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'bl_is_current_post'
  ];
} );

注意：白名单里还应包含你 Bricks 站点上其他正在使用的函数（原生或自定义的）。可以在 Bricks → Settings → Custom code 里点 Code review 按钮查看当前白名单。更多说明见 bricks/code/echo_function_names 过滤器文档。

Step 3：添加属性并写 CSS

1. 用 Bricks 编辑单篇文章或 CPT 模板。
2. 添加一个 Section，在它的 Container 里放一个 Block 元素。
3. 给这个 Block 启用查询循环（query loop），需要的话选择文章类型。
4. 进入 STYLE → ATTRIBUTES，添加一个属性：
   • Name：data-current
   • Value：{echo:bl_is_current_post}

保存后打开任意一篇文章查看 DOM，当前文章对应的循环项 HTML 里会出现 data-current="1"，其他项没有这个属性（属性值为空或不存在）。这里的 {echo:...} 是 Bricks 调用自定义函数的动态标签语法。

接下来就能写 CSS 了，例如把当前文章标题（假设是 h4 级标题）变红：

%root%[data-current="1"] h4 {
  color: red;
}

%root% 是 Bricks 中指向当前元素（这里指启用了查询循环的 Block）的选择器占位符。你也可以换成任何你想突出的样式：背景色、左边框、加粗、缩放等，全部交给 CSS，不用在构建器里做条件逻辑。

小结：核心就三步——一个判断函数、一次白名单、一个动态属性。之后高亮当前文章就是纯 CSS 的事，不用任何插件。这个模式也能推广到“当前分类项高亮”“当前产品高亮”等场景——只要把判断函数里的逻辑换成对应的对比条件即可，是 Bricks 查询循环高级用法里很实用的一招。