如何使用foreach循环将图片插入WordPress动态字段

参考效果截图：

无输出问题排查方向 #

• 优先确认自定义字段的返回格式：ACF、Pods等常用自定义字段插件的图片字段，只有设置为返回ID/数组格式时才可被遍历处理，若误设为返回URL字符串，遍历会直接为空
• 先做原始值调试：在循环逻辑前加入var_dump( get_field('你的自定义字段名') );，确认是否能拿到有效值，排除字段名拼写错误、当前文章未给字段赋值的低级问题

核心实现代码示例 #

假设你使用ACF的Repeater重复字段作为优缺点的动态字段载体，可参考如下代码实现：

// 获取存储优缺点的重复字段组，组内需包含：内容文本字段、是否为优点的判断字段
$pros_cons_list = get_field('pros_cons_list');
if ( !empty($pros_cons_list) ) {
    foreach ( $pros_cons_list as $item ) {
        // 渲染优点项
        if ( $item['is_pro'] ) {
            echo '<div class="pros-item">';
            // 输出优点对应的图标（从动态字段读取）
            echo '<img src="'. esc_url($item['pro_icon']['url']) .'" alt="'. esc_attr($item['pro_icon']['alt']) .'">';
            echo '<p>'. esc_html($item['content']) .'</p>';
            echo '</div>';
        } else {
            // 渲染缺点项
            echo '<div class="cons-item">';
            // 硬编码禁用图标，不需要存到动态字段，每个缺点项自动匹配
            echo '<img src="'. get_stylesheet_directory_uri() .'/assets/img/disabled-icon.png" alt="不支持">';
            echo '<p>'. esc_html($item['content']) .'</p>';
            echo '</div>';
        }
    }
}

禁用图标对应渲染说明 #

不需要将禁用图标存入动态字段，只需在循环中判断当前项为缺点时，直接写死图标本地路径输出即可，所有缺点项会自动带上该图标，和你预期的渲染效果完全匹配。

若你使用WordPress原生自定义字段存储数据，需要先将字段存储的序列化值反序列化为数组，再执行遍历操作。

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