Bricks Query Loop 教程：在单篇文章中标记并高亮当前文章怎么做

用户提问

有用户提问：

Current Item Query Styling（当前项查询样式）

查询里有没有「current item（当前项）」这个选项？

我在自己的 CPT 单页上有一个 CPT 项目列表（用作导航）——我想让「当前」这一项和其他项的样式不同，但是在 DOM 里找不到任何表明它是当前项的属性或类似标记。

实现思路

我们可以定义一个很小的自定义函数：根据 Query Loop 循环中那篇文章的 ID 是否等于当前单篇文章的 ID，来返回 true 或 false。然后把返回值作为 Bricks 里某个自定义 data attribute 的取值，以此来标识并高亮当前文章。

步骤一：添加自定义函数

将以下代码添加到子主题（child theme）的 functions.php 中（不要带开头的 PHP 标签），或者使用 code snippets 插件：

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

get_the_ID() 返回当前 Query Loop 循环中那篇文章的 ID。

get_queried_object_id() 返回当前单篇文章（也就是「宿主」文章）的 ID。

步骤二：将函数加入白名单

把 bl_is_current_post 函数加入白名单。

示例：

<?php 

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

除了 bl_is_current_post，你还应该把 Bricks 实例中用到的其他函数（原生或自定义）一并加入白名单。 可以在 Bricks → Settings → Custom code 中点击 Code review（代码审查）按钮来查看。

关于白名单的更多信息可以查看这里。

步骤三：在 Bricks 中设置 data attribute

用 Bricks 编辑你的单篇文章或 CPT 模板。

添加一个 Section，并在其 Container 内部添加一个 Block 元素。

开启 Query Loop（查询循环）。

如有需要，选择对应的文章类型（post type）。

进入 STYLE → ATTRIBUTES（样式 → 属性）面板。

添加一个如下的属性：

名称（Name）：data-current

值（Value）：

{echo:bl_is_current_post}

打开你这个文章类型下的任意一篇单篇文章，观察 DOM。

当前这篇文章的 HTML 标记中现在会带上 data-current="1" 属性。

步骤四：用 CSS 高亮当前项

现在你就可以给开启了 Query Loop 的 Block 添加类似下面这样的自定义 CSS，例如：

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

把当前单篇文章的标题（假设是 h4 级别标题）颜色设为红色。

相关阅读

• 把任意自定义 WP_Query 循环接入 Bricks 查询循环
• Bricks Query Loop 按日期字段条件输出元素（Pro 思路卡）
• Bricks 博客文章页制作教程：单篇文章怎么排才 SEO 友好

站长

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.

获取报价 →浏览全部教程