WordPress srcset不生效排查：自定义软裁切图片尺寸适配问题

问题根因 #

1. 代码逻辑错误：wp_filter_content_tags() 为返回修改后HTML字符串的纯函数，不会原地修改传入的变量。你当前代码调用完函数后直接输出未修改的原始$image_tag，相当于完全未执行srcset注入逻辑。
2. WordPress默认srcset比例匹配规则限制：默认仅会将与原始上传图片宽高比差值小于0.01的尺寸纳入srcset候选，你使用软裁切模式时，如果原始图片比例不是1:1，生成的自定义尺寸实际比例与注册的1:1标准比例存在偏差，会被默认规则排除在srcset候选池外。
3. 自定义尺寸默认未被强制纳入srcset候选列表，部分场景下系统不会主动识别自定义软裁切尺寸。

修复方案 #

第一步：修复图片调用代码 #

优先使用WordPress原生wp_get_attachment_image()函数，会自动生成包含srcset、sizes、alt属性的完整img标签，无需手动拼接，简化后代码如下：

<div class="upper-image">
    <?php
    $image_id = get_field('top_animated_image_1');
    $size = 'medium_larger'; // 替换为你需要的自定义尺寸
    if ($image_id) {
        echo wp_get_attachment_image(
            $image_id, 
            $size, 
            false, 
            [
                'class' => 'size-' . $size . ' wp-image-' . $image_id,
                'title' => get_the_title($image_id)
            ]
        );
    }
    ?>
</div>

如果要保留原有手动拼接逻辑，只需修改wp_filter_content_tags调用逻辑即可：

// 原代码
wp_filter_content_tags($image_tag);
echo $image_tag;
// 修改为
$image_tag = wp_filter_content_tags($image_tag);
echo $image_tag;

第二步：放宽srcset比例匹配阈值 #

将以下代码添加到主题functions.php文件中，放宽比例校验规则，适配不同比例的软裁切图片：

// 调整srcset比例匹配阈值，默认值为0.01，可根据实际需求调整大小
add_filter('wp_image_srcset_max_ratio', function() {
    return 0.5;
});

如果你的站点所有图片都通过object-fit适配布局，可将阈值调整为1，支持所有比例的图片纳入srcset候选。

第三步：强制将自定义尺寸加入srcset候选（可选，前两步生效可忽略） #

如果调整阈值后仍有自定义尺寸未被识别，可添加以下代码强制注册自定义尺寸到srcset候选池：

add_filter('wp_get_attachment_image_srcset', function($srcset, $attachment_id) {
    // 填入你注册的所有自定义图片尺寸名称
    $custom_sizes = ['medium_larger', 'home_portrait', 'mobile'];
    foreach ($custom_sizes as $custom_size) {
        $image_data = wp_get_attachment_image_src($attachment_id, $custom_size);
        if ($image_data) {
            $srcset .= ', ' . $image_data[0] . ' ' . $image_data[1] . 'w';
        }
    }
    // 去重避免重复资源条目
    $srcset_arr = array_unique(explode(', ', $srcset));
    return implode(', ', $srcset_arr);
}, 10, 2);

生效验证 #

修改完成后，使用缩略图再生插件批量重新生成一次历史上传图片的缩略图即可生效，新上传图片会自动适配规则。

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