用 BricksExtras 与 WP Grid Builder 在 Bricks 中实现动态文章轮播

本文将解答一个问题：

我们要搭建一个 Bricks 查询循环，用 BricksExtras 的 Pro Slider 展示某个自定义文章类型（Custom Post Type）的文章。当用 WP Grid Builder 按分类法筛选这些 CPT 条目时，轮播不会被正确重建（它们仍然占据空间，但内容没有刷新）。

关于 WP Grid Builder 与 Bricks 查询循环的配合，可先回顾 在 Bricks 查询循环中集成 WP Grid Builder 筛选器。

我最初尝试用 change 事件来解决，但正确应该使用的是 appended 事件。

引用 WP Grid Builder 开发者 Loïc Blascos 的话：

关于轮播，你不应该使用「change」事件，而应使用「appended」事件：https://docs.wpgridbuilder.com/resources/event-facet-appended/ 。DOM 只有在 appended 时才可用。当你筛选时，旧内容会从页面移除，新内容被 appended 上去。所以你无法「刷新」某样东西，必须重新初始化脚本才能生效。而这只能在新的内容已经存在于页面中时（appended 事件）完成。

CPT 归档模板的结构如下：

• Facet 元素通过 WPGB 的 Bricks 扩展添加。
• Pro Slider 里的两个 Slide 元素被删除，启用 Gallery 模式，并在其中添加一个 Pro Slider Gallery 元素，设为：

{ acf_testimonial_gallery }

其中 testimonial_gallery 是一个通过 ACF Pro 附加到 testimonials（见证/推荐）上的 Gallery 类型自定义字段。

添加调用 BricksExtras 创建轮播函数的 JavaScript。

通过模板注入 JS

Settings（齿轮图标）→ PAGE SETTINGS → CUSTOM CODE → Body（footer）scripts：

<script>
window.WP_Grid_Builder &&
WP_Grid_Builder.on("init", function (wpgb) {
    wpgb.facets &&
    wpgb.facets.on("appended", function (args) {
        doExtrasSlider(document.getElementById("brxe-roadst"))
    })
})
</script>

其中 brxe-roadst 是查询循环父级 Container 的 ID。

通过子主题注入 JS

如果你更喜欢通过子主题添加 JS，而不是在 Bricks 模板里写，可以在子主题 functions.php 中、挂在 wp_enqueue_scripts 上的匿名函数里添加：

if ( is_post_type_archive( 'testimonial' ) ) {
			wp_enqueue_script( 'testimonial', get_stylesheet_directory_uri() . '/assets/js/testimonial.js', [], filemtime( get_stylesheet_directory() . '/assets/js/testimonial.js' ), true );
		}

而 assets/js/testimonial.js 中的代码为：

document.addEventListener("DOMContentLoaded", () => {
  window.WP_Grid_Builder &&
	WP_Grid_Builder.on("init", function (wpgb) {
	  wpgb.facets &&
		wpgb.facets.on("appended", function (args) {
		  doExtrasSlider(document.getElementById("brxe-roadst"))
		})
	})
})

小结

当 Pro Slider 的内容被 WP Grid Builder 筛选替换后，必须监听 appended 事件（而非 change）来重新调用 doExtrasSlider()，否则轮播不会重建。把初始化逻辑放进 WP_Grid_Builder.on("init", ...) 内的 facets.on("appended", ...) 回调，并传入查询循环父容器的 ID 即可。

站长

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.

获取报价 →浏览全部教程