WooCommerce AFC分类图片仅展示非空内容的代码修复咨询

问题原因 #

你原有代码的逻辑错误在于：无论ACF字段是否有有效值，你都提前拼接了img标签字符串，就算get_field()返回空，$cat_img_1/2/3变量也会包含<img src=""/>这段内容，empty()判断永远返回假，所以无效的空图片也会被渲染到页面上，形成空白占位。

修改后的代码 #

add_action('woocommerce_before_subcategory_title', 'wpse_add_custom_text_under_category_title', 10);
function wpse_add_custom_text_under_category_title($category) {
    $term_id = 'product_cat_'.$category->term_id;
    $valid_imgs = [];
    // 逐个校验字段是否存在有效值，仅有效时生成img标签存入数组
    $img_1 = get_field('category_image_1', $term_id);
    if (!empty($img_1)) {
        $valid_imgs[] = '<img src="'.esc_url($img_1).'"/>';
    }
    $img_2 = get_field('category_image_2', $term_id);
    if (!empty($img_2)) {
        $valid_imgs[] = '<img src="'.esc_url($img_2).'"/>';
    }
    $img_3 = get_field('category_image_3', $term_id);
    if (!empty($img_3)) {
        $valid_imgs[] = '<img src="'.esc_url($img_3).'"/>';
    }
    // 仅当存在有效图片时输出轮播结构
    if (!empty($valid_imgs)) {
        echo '<ol class="carousel__viewport">';
        foreach ($valid_imgs as $index => $img) {
            // 给轮播项加上序号避免id重复，符合HTML规范
            echo '<li id="carousel__slide_'.($index+1).'" tabindex="0" class="carousel__slide">'.$img.'<div class="carousel__snapper"></div></li>';
        }
        echo '</ol>';
    }
}

修改说明 #

• 新增了字段有效性校验逻辑，只有ACF字段返回有效值时才会生成对应的img标签
• 去掉了冗余的多层重复判断，用数组遍历的方式输出轮播项，后续新增图片字段只要增加对应校验逻辑即可，不用修改输出结构
• 修复了原有代码中所有轮播项id相同的问题，给每个轮播项增加序号后缀，符合HTML标准
• 额外加了esc_url()对图片链接做转义，提升站点安全性
• 不会生成任何空的img标签，自然不会出现空白占位的问题

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