在 Bricks 查询循环中集成 WP Grid Builder 筛选器

更新说明：本教程撰写于 WPGB 推出 Bricks 扩展之前。现在更推荐使用官方扩展（可在此获取）。

更新于 2022 年 7 月 6 日。

在本教程中，我们将讲解如何在使用自定义查询时，让 WP Grid Builder 的 facets 与 Bricks 的查询循环（Query Loop）功能协同工作。例如，为用容器元素自定义搭建的文章列表添加不同的产品筛选器、文章搜索等。

WP Grid Builder 是一款流行的 WordPress 插件，可以为文章和页面添加实时的分面搜索与筛选。结果会在页面上即时加载，因此非常适合在不刷新页面、不打断用户操作流的前提下筛选产品或搜索文章。如果你还想了解查询循环的更多玩法，可参考 在 Bricks 中将查询循环显示为三列。

用容器包裹文章循环

在 Bricks 中，当给一个容器元素启用查询循环功能时，该容器本身会根据查询重复出现多次。这些就是会被 facets 改变的文章。

我们需要先把它们包裹在一个新的容器里，并给这个文章容器一个唯一的类名。要求是：这个类名必须以 wpgb-content 开头。对于我们的文章网格，我们给它命名为 wpgb-content-post-grid-1。

设置 Facets 短代码

在 WP Grid Builder 的设置页面里，选定要使用的 facets 后，插件会提供可以插入页面的短代码。我们需要复制这些短代码，并稍作修改。

在 Bricks 中，使用 Shortcode（短代码）元素把短代码添加进去。对每一个短代码，把 grid 参数改成我们给新容器所设的类名。因此在本例中，grid 参数应为 wpgb-content-post-grid-1。

短代码看起来类似这样：

[wpgb_facet id="1" grid="wpgb-content-post-grid-1"]

注意：facet 短代码在编辑器内部不会渲染。

让 WPGB 识别自定义查询

默认情况下，WP Grid Builder 不会自动识别自定义查询，因此 facets 不会生效。我们需要添加一个新的查询参数来解决这个问题。该参数名为 wp_grid_builder，需要把它的值设为容器的类名，也就是 wpgb-content-post-grid-1。

最简单、且可以完全在 Bricks 内完成的方式是：在我们的容器之前添加一个新的短代码，这次用的是 wpgb_query 短代码，并确保把 ID 设为与容器类名一致：

[wpgb_query id="wpgb-content-post-grid-1"]

启用 Filter Custom Content

最后一步是回到 WP Grid Builder 的设置，启用「Filter custom content（筛选自定义内容）」这个选项。这会确保 WPGB 去留意自定义查询并正确筛选它。

完成

现在在前端，facet 会出现在短代码所放置的位置，并对我们容器内的文章进行筛选。

筛选用户时

我们需要使用 Bricks 的 bricks/users/query_vars 过滤器，把 wp_grid_builder 参数添加到用户查询中。

把它添加到子主题的 functions.php 中，或使用代码片段插件（在前端生效）：

add_filter( 'bricks/users/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( 'mjkama' === $element_id ) {
		$query_vars['wp_grid_builder'] = 'wpgb-content-user-grid-1';
	}
	
	return $query_vars;
}, 10, 3 );

把 mjkama 替换为应用了查询循环的元素在 Bricks 中的元素 ID。

把 wpgb-content-user-grid-1 替换为添加到查询循环元素父级上的类名。

这里不需要添加 wpgb_query 短代码。

筛选分类法术语时

我们需要使用 Bricks 的 bricks/terms/query_vars 过滤器，把 wp_grid_builder 参数添加到术语（terms）查询中。

把它添加到子主题的 functions.php 中，或使用代码片段插件（在前端生效）：

add_filter( 'bricks/terms/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( 'mjkama' === $element_id ) {
		$query_vars['wp_grid_builder'] = 'wpgb-content-term-grid-1';
	}
	
	return $query_vars;
}, 10, 3 );

把 mjkama 替换为应用了查询循环的元素在 Bricks 中的元素 ID。

把 wpgb-content-term-grid-1 替换为添加到查询循环元素父级上的类名。

这里同样不需要添加 wpgb_query 短代码。

参考资料

https://docs.wpgridbuilder.com/resources/guide-filter-custom-queries/

小结

借助「以 wpgb-content 开头的容器类名 + wpgb_query 短代码 + 启用 Filter Custom Content」这套组合，WP Grid Builder 的 facets 就能驱动 Bricks 自定义查询循环实现实时筛选。对于用户、术语等特殊查询类型，则通过 bricks/users/query_vars 或 bricks/terms/query_vars 过滤器注入 wp_grid_builder 参数即可。

站长

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.

获取报价 →浏览全部教程