如何在WPBakery Page Builder中用Post Grid显示ACF关联字段

我太懂这种感觉了——Post Grid的布局灵活又好看，但偏偏不支持直接调用ACF关联的文章对象，确实有点让人头疼。不过咱们可以通过一点自定义代码来搞定这个需求，下面是具体的实现步骤：

准备工作确认 #

首先先确认一下你的ACF字段设置没问题：

• 字段类型是 Relationship
• 返回格式设置为 Post Objects
• 记好你的字段名（比如假设叫related_posts，后面代码里要用到）
• 找到你要修改的Post Grid的ID（在Post Grid编辑页面的URL里能看到，比如post_grid=123，那ID就是123）

自定义代码实现 #

在你的主题（推荐用子主题，避免主题更新丢失代码）的functions.php文件里添加以下代码：

function custom_post_grid_load_acf_related_posts( $args, $grid_id ) {
    // 替换成你的目标Post Grid ID
    $target_grid = 123;
    // 替换成你的ACF字段名
    $acf_field_name = 'related_posts';

    // 仅在单个文章页面，且当前是目标Post Grid时生效
    if ( is_singular() && $grid_id === $target_grid ) {
        // 获取当前文章的ACF关联文章对象
        $related_posts = get_field( $acf_field_name );
        
        if ( $related_posts ) {
            // 从关联对象中提取文章ID数组
            $post_ids = wp_list_pluck( $related_posts, 'ID' );
            
            // 修改Post Grid的查询参数
            $args['post__in'] = $post_ids;
            $args['posts_per_page'] = count( $post_ids ); // 显示所有关联文章
            $args['orderby'] = 'post__in'; // 保持ACF中设置的排序顺序
        } else {
            // 如果没有关联文章，返回空结果
            $args['post__in'] = array(0);
        }
    }

    return $args;
}
add_filter( 'post_grid_query_args', 'custom_post_grid_load_acf_related_posts', 10, 2 );

代码说明 #

• 这段代码通过post_grid_query_args过滤器，在Post Grid生成查询之前修改它的参数，让它只加载当前文章中ACF关联的那些文章。
• orderby = 'post__in'可以保证文章的顺序和你在ACF字段里设置的关联顺序一致。
• 如果当前文章没有关联任何文章，Post Grid会显示空内容，避免出现无关的文章。

后续测试 #

1. 保存代码后，清空网站的缓存（包括Post Grid的缓存，如果有的话）。
2. 打开设置了ACF关联字段的文章页面，查看Post Grid是否正确展示了关联的文章。

如果遇到问题，比如找不到Post Grid ID，或者字段名写错了，随时调整代码再试就行！

内容的提问来源于stack exchange，提问作者Jason