WordPress：如何在页面不同位置调用ACF Flexible Content指定布局内容

方案思路 #

现有全局调用柔性内容的模板会输出所有布局，我们只需要给该模板增加指定布局过滤的入参支持，即可实现按需输出对应布局内容，不用重写布局渲染逻辑，完全复用现有代码。

步骤1：修改柔性内容通用模板 #

编辑template-parts/fields/field--flex-content.php文件，调整代码如下：

<?php
// 接收传入的参数：仅渲染指定布局，留空则输出全部
$allowed_layouts = $args['allowed_layouts'] ?? [];

// 此处替换为你后台Flexible Content字段组的实际机读名称
$flex_content = get_field('flexible_content_template');

if( $flex_content ):
    foreach( $flex_content as $layout ):
        $layout_name = $layout['acf_fc_layout'];
        // 如果有指定允许的布局，不匹配的就跳过
        if( !empty($allowed_layouts) && !in_array($layout_name, $allowed_layouts) ){
            continue;
        }
        // 保留原有模板里的布局渲染逻辑不变
        switch ($layout_name) {
            case 'icon-columns':
                // 原有Icon Columns布局的输出代码
                break;
            case 'text_and_full_image': // 替换为你后台对应布局的实际机读名称
                // 原有text and full image布局的输出代码
                break;
            // 其他原有布局的判断逻辑全部保留
        }
    endforeach;
endif;
?>

注意：请把代码里的字段名、布局机读名称替换成你后台实际设置的对应值，不要直接使用中文布局名。

步骤2：修改B2B landing page模板代码 #

把原来直接调用get_template_part的位置，传入要过滤的布局参数即可：

<!-- START FAST, EASY ORDERING SECTION -->
<?php 
// 仅输出icon-columns布局
get_template_part(
    'template-parts/fields/field--flex-content',
    '',
    ['allowed_layouts' => ['icon-columns']]
); 
?>
<!-- END FAST, EASY ORDERING SECTION -->

<!-- START HOW OUR GIFTS MAKE A SIGNIFICANT IMPACT Section -->
<?php 
// 仅输出text and full image布局
get_template_part(
    'template-parts/fields/field--flex-content',
    '',
    ['allowed_layouts' => ['text_and_full_image']] // 替换为实际的布局机读名
); 
?>
<!-- END HOW OUR GIFTS MAKE A SIGNIFICANT IMPACT Section -->

低版本WordPress兼容方案 #

如果你的WordPress版本低于5.5，不支持get_template_part传参，可以改用set_query_var的方式传递参数：

<!-- 输出指定布局示例 -->
<?php 
set_query_var( 'allowed_layouts', ['icon-columns'] );
get_template_part('template-parts/fields/field--flex-content');
// 用完清空参数避免影响后续调用
set_query_var( 'allowed_layouts', [] );
?>

然后在field--flex-content.php里用$allowed_layouts = get_query_var('allowed_layouts', []);接收参数即可。

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