如何实现CMB2可重复字段中Image字段的前端显示

全程保留原有代码规范、命名前缀、钩子挂载逻辑，仅新增图片字段注册与前端输出逻辑，不改动原有标题、文本域字段的已有功能。

第一步：后台Metabox注册新增图片字段 #

打开主题functions.php文件，找到yourthemeprefix_yourcpt_metabox_register函数中注册textarea测试内容字段的代码段，在其下方追加图片组字段的注册代码：

//* Image
$cmb_repeat_test->add_group_field( $group_repeat_test, array(
    'name'    => __( 'Test Image', 'your-text-domain' ),
    'id'      => $prefix . 'test_image_2',
    'type'    => 'file',
    'options' => array(
        'query_args' => array( 'type' => 'image' ), // 仅允许选择图片类型附件
        'preview_size' => 'medium', // 后台编辑页预览尺寸
    ),
) );

该字段使用CMB2原生file类型，默认存储图片附件ID，仅允许在媒体库选择图片文件，支持随分组增删、拖拽排序同步操作。

第二步：前端输出逻辑新增图片渲染 #

找到挂载在genesis_after_entry钩子的my_page_function_for_hook函数，修改遍历循环内的逻辑，新增图片字段获取、渲染代码，修改后完整函数代码如下：

function my_page_function_for_hook() {
    $prefix = '_cmb_';
    $entries = get_post_meta(get_the_ID() , $prefix . 'metaboxjff_sections', true);

    foreach((array)$entries as $key => $entry) {
        $title = $content = $image = '';
        
        if ( isset( $entry[ $prefix . 'test_title_2' ] ) ) {
            $title = esc_html( $entry[ $prefix . 'test_title_2' ] );
        }
                        
        if ( isset( $entry[ $prefix .'test_content_2' ] ) ) {
            $content = $entry[ $prefix . 'test_content_2' ];
        }

        // 获取图片字段，使用WordPress原生函数渲染图片标签
        if ( isset( $entry[ $prefix . 'test_image_2' ] ) && !empty( $entry[ $prefix . 'test_image_2' ] ) ) {
            $image = wp_get_attachment_image( $entry[ $prefix . 'test_image_2' ], 'large', false, array( 'class' => 'repeat-group-image' ) );
        }
        
        // 按「图片-标题-内容」顺序输出，可根据自身需求调整输出顺序
        if ( !empty($image) ) {
            echo $image;
        }

        if ( !empty($title) ) {
            echo '<h3> ' .$title . '</h3>';
        }
        
        if ( !empty($content) ) {
            echo wp_kses_post($content);
        }
    } //* end foreach;
} //* end my_page_function_for_hook()
add_action('genesis_after_entry', 'my_page_function_for_hook');

注意事项 #

• 图片字段存储的是WordPress媒体库附件ID，不要直接将字段值作为img的src属性输出，必须使用wp_get_attachment_image()原生函数渲染，会自动生成带alt文本、响应式srcset、尺寸属性的合规img标签，符合WordPress开发规范与无障碍要求。
• wp_get_attachment_image的第二个参数为输出图片尺寸，可替换为主题注册的自定义尺寸名，或传入宽高数组自定义尺寸。
• 输出顺序可根据实际页面需求调整图片、标题、内容的echo顺序，不影响字段功能。

内容的提问来源于stack exchange，提问作者Kazi Ramjan Ali