WordPress图片sizes属性如何计算？全宽图片拉伸模糊问题求解

问题原因 #

WordPress核心默认的图片sizes属性基于主题声明的$content_width全局变量计算，该变量用于定义主题常规内容区域的最大宽度。你遇到的640px限制，是因为你的自定义主题没有显式声明该变量，WordPress自动 fallback 到了默认的640px阈值。
虽然你已经添加了add_theme_support('align-wide')支持宽/全宽对齐，但该配置仅影响前端样式，不会自动修改WordPress默认的sizes属性生成逻辑，所以全宽图片的sizes属性仍然沿用了默认的内容宽度规则。

修改方案 #

你可以通过WordPress提供的过滤器自定义sizes属性，优先选择仅针对宽/全宽对齐的图片修改，避免影响常规内容区域的图片加载性能：

1. 将以下代码添加到主题的functions.php文件中即可：

add_filter( 'wp_get_attachment_image_attributes', function ( $attr, $attachment, $size ) {
    // 匹配宽对齐、全宽对齐的图片类，PHP版本低于8.0也可正常使用
    if ( isset( $attr['class'] ) && ( false !== strpos( $attr['class'], 'alignwide' ) || false !== strpos( $attr['class'], 'alignfull' ) ) ) {
        // 可根据你的站点最大布局宽度调整下面的规则，示例为最大1920px宽的全宽布局
        $attr['sizes'] = '(max-width: 1920px) 100vw, 1920px';
    }
    return $attr;
}, 10, 3 );

如果你的站点所有内容区域都是全宽布局，也可以直接在functions.php开头添加全局声明简化配置：

if ( ! isset( $content_width ) ) {
    $content_width = 1920; // 替换为你的站点实际最大内容宽度
}

2. 额外排查项：如果你使用了图片优化、CDN加速类插件，部分插件会强制覆写图片的sizes属性，可先临时禁用这类插件测试是否有额外影响。
3. 修改完成后清空站点缓存、浏览器缓存后重新测试即可生效。

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