Bricks Countdown 倒计时元素接入动态日期（旧版过滤器方案 + 2.4 原生支持双版本）

本文为付费教程的骨架翻译：场景与步骤按原文可见部分梳理，锁定代码按 Bricks 官方过滤器补全实现，并已注明「补全实现」。未复制原文代码。 2026-08-17 更新：Bricks 2.4 beta 的官方 changelog 已确认 “The Countdown element now supports dynamic data”——旧版「不支持动态数据」的结论已作废，本文改为双版本写法。

结论先说：2.4 原生支持，旧版用过滤器

• Bricks 2.4 及以上：Countdown 元素的 Date 控件原生支持动态数据，构建器里直接把日期绑定到 ACF / Meta Box 字段，零代码。
• Bricks 2.3.x 及更早：内置 Countdown 的 Date 控件没接入动态数据解析器，得用官方 bricks/element/settings 过滤器在渲染前改写日期设置（下面版本 B）。

下面两个版本都给，按你站点的 Bricks 版本选。

场景：倒计时日期接不进自定义字段

营销活动页、新品发布页经常放一个 Countdown 倒计时元素。理想状态是：日期直接绑到文章的自定义字段（比如 ACF 的 Date Time Picker），改期只改字段值，不用进编辑器手动改倒计时。

• 2.4+ 用户：这一步构建器里直接拖 {field} 就行（见版本 A）。
• 2.3.x 及更早用户：构建器拖不进字段，得走版本 B 的过滤器。

版本 A（Bricks 2.4+）：原生动态数据，零代码

1. 用 ACF 加一个 Date Time Picker 字段（如 event_date），赋值到对应文章/页面。Meta Box 等同理。
2. 页面里加 Countdown 元素。
3. 在 Countdown 的 Date 控件里，点动态数据按钮（数据库图标），选你的 event_date 字段。
4. 保存。倒计时现在读字段值，改期只改 ACF 字段即可。

无需任何代码、无需插件。这是 2.4 起官方支持的能力。

版本 B（Bricks 2.3.x 及更早）：过滤器补全实现

BricksLabs 给了两条出路：

1. 用 BricksExtras 插件的 Pro Countdown 元素（付费插件，自带动态日期支持）；
2. 用 Bricks 官方过滤器在渲染前把日期设置改写为自定义字段的值——不依赖插件，本文采用这条路线。

步骤骨架（原教程）

1. 用 ACF 添加一个类型为 Date Time Picker 的字段（例如 event_date），并赋值到相应文章/页面。其他自定义字段插件（如 Meta Box）的日期时间字段同理。
2. 在页面里添加 Countdown 元素，日期先用任意占位值。
3. 在子主题 functions.php 或代码片段插件里挂官方过滤器，让 Countdown 渲染时读取当前文章的日期字段值并替换 Date 设置。

补全实现：渲染前改写日期设置

原文提到使用 bricks/element/render 过滤器族；补全实现选用 Bricks 官方标准过滤器 bricks/element/settings（在元素渲染前改写设置，是动态注入设置值的正路），完整代码如下（补全实现）：

/**
 * Countdown 元素动态日期：从 ACF Date Time Picker 字段取值
 * 补全实现（基于 Bricks 官方 bricks/element/settings 过滤器）
 * 适用：Bricks 2.3.x 及更早（2.4+ 原生支持，无需此代码）
 */
add_filter( 'bricks/element/settings', function( $settings, $element ) {
	// 只处理 Countdown 元素
	if ( $element->name !== 'countdown' ) {
		return $settings;
	}
	// 读取当前文章/页面的 ACF 日期时间字段（字段名按你的实际修改）
	$event_date = function_exists( 'get_field' ) ? get_field( 'event_date' ) : '';
	if ( $event_date ) {
		// ACF 返回的格式可能是 Ymd 或带时间戳，统一转成 Bricks Countdown 期望的格式
		$timestamp  = is_numeric( $event_date ) ? (int) $event_date : strtotime( $event_date );
		$settings['date'] = date( 'Y-m-d H:i:s', $timestamp );
	}
	return $settings;
}, 10, 2 );

要点：

• $element->name 是 Bricks 元素的内部标识，Countdown 对应 countdown。
• get_field( 'event_date' ) 取当前文章/页面的字段值；在归档页/循环里取不到文章上下文时，可改用 get_post_meta( get_the_ID(), 'event_date', true )。
• ACF Date Time Picker 默认返回值可能是 Y-m-d H:i:s 字符串，strtotime 转时间戳后统一格式化为 Bricks Countdown 需要的 Y-m-d H:i:s，避免时区/格式不一致导致倒计时算错。

原理说明

• 2.4 为什么原生支持了：官方在 2.4 把动态数据解析器接进了 Countdown 的 Date 控件，构建器里能直接拖 {field}。这是版本升级带来的能力，不是插件。
• 2.3.x 及更早为什么不行：Bricks 部分控件（如日期类）在设计上没有接入动态数据解析器，构建器里拖不进 {field} 标签。这是 Bricks 的功能边界，不是 Bug。
• bricks/element/settings 过滤器：Bricks 在每次渲染元素前都会执行 apply_filters( 'bricks/element/settings', $settings, $element )，允许你在输出前任意增删改元素的设置数组。改动设置 → 元素按新设置渲染，等于给任何控件补上了「动态数据」能力。
• 过滤器的两个参数：第一个 $settings 是元素设置数组（键为控件 ID，如 date），第二个 $element 是元素对象（含 name、id、post_id 等），按 name 精准筛选、用 post_id 定位数据来源。
• 别忘了在子主题 functions.php（或 Code Snippets 插件）里挂载，并确认字段名、日期格式与你的站点一致。

适用场景与常见误区

适合：活动倒计时、促销截止、课程开课等需要把日期接到自定义字段的场景。误区：一是日期格式和时区没对齐，前后台差几小时，记得统一时区；二是倒计时元素只认特定格式的日期字符串，自定义字段返回格式不对就不动，要在渲染前改写（2.3.x）或确认字段类型匹配（2.4）；三是忘了处理「已过期的日期」，倒计时归零后页面还显示活动。接日期类字段时，格式和时区是先确认的两件事。

小结

• 用 Bricks 2.4+：Countdown 日期直接绑 ACF 字段，构建器里拖一下就行，零代码。
• 用 Bricks 2.3.x 及更早：Countdown 日期接不进自定义字段，就用 bricks/element/settings 在渲染前改写设置——这是 Bricks 给「官方没做动态数据的控件」补动态能力的标准姿势，不止倒计时，任何控件（日期、数字、链接……）都能照此办理。

优先升 2.4；暂时升不了再用过滤器方案。

• 相关阅读：Bricks Setup Guide 延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

倒计时日期接不进字段怎么办？ 2.4+ 直接在 Date 控件绑字段；2.3.x 及更早是正文字段格式不对，在渲染前把日期改写成倒计时元素认的格式即可。

前后台时间差几小时？ 时区没对齐，统一站点和字段的时区设置就能解决。

过期日期怎么处理？ 在逻辑里判断已过期就显示「已结束」之类提示，别让倒计时卡在 0。

能用 ACF 日期字段吗？ 能，2.4 原生接；2.3.x 及更早用上面的过滤器接。

站长

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.

获取报价 →浏览全部教程