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 过滤器文档。

相关阅读：

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

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

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

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 查询循环高级用法里很实用的一招。

常见误区

用 data-current 高亮时有几个注意点：一是别在多个列表里用同一套判断却忘了区分上下文，比如侧边栏目录和正文内联列表都要高亮「当前」，判断函数最好能按当前查询上下文区分，避免错高亮；二是隐藏元素养类样式的老问题——如果高亮样式只在这一页出现，Bricks 可能不输出对应 CSS，需要时用一个隐藏元素把样式「养」出来；三是缓存页面要留意，整页缓存下「当前文章」是生成缓存那一刻算的，动态性会打折，必要时对这块关缓存或用动态片段。

常见问题（FAQ）

Q：为什么查询循环不给当前文章打标记？ A：Bricks 默认不输出任何当前项标记，需要自己用函数判断当前 ID 并输出 data 属性，再用 CSS 高亮。

Q：高亮样式没生效？ A：多半是该样式没在页面上实际出现，Bricks 不打包它的 CSS；用一个隐藏元素把类/属性样式「养」出来即可。

Q：能高亮当前分类/产品吗？ A：能，把判断函数里的对比条件换成对应的分类 ID 或产品 ID 即可，模式一样。

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.

获取报价 →浏览全部教程