WordPress仅服务列表页应用响应式图片 代码失效问题求解

代码存在三个致命问题，直接导致规则完全失效：

• 过滤器回调未覆盖全分支返回值：仅在命中归档判断时返回自定义sizes字符串，其余场景无返回值（等同于返回空），会造成非归档页sizes属性丢失，浏览器自动 fallback 加载原始全尺寸图片
• 页面判断逻辑不可靠：直接调用get_post_type()依赖全局$post对象，在循环外、页头渲染、古腾堡块解析等场景下会拿到错误值，无法精准区分归档页和详情页
• sizes字符串格式和逻辑存在问题：包含大量无意义换行缩进，且媒体查询断点顺序不符合浏览器解析规则（浏览器从上到下匹配首个命中的媒体条件，顺序错误会导致尺寸匹配失效）

直接替换原有代码即可实现预期效果：

function content_image_sizes_attr($sizes, $size) {
    // 使用WordPress原生条件标签精准识别services归档页，不依赖全局post对象
    if( is_post_type_archive('services') && ! is_singular() ) {
        // 按断点从小到大排列媒体规则，移除多余空白字符
        return '(max-width: 365px) 365px, (max-width: 487px) 487px, (max-width: 767px) 728px, (max-width: 1024px) 487px, (min-width: 1025px) 365px';
    }
    // 非目标页面返回原始sizes值，保证默认图片规则正常运行
    return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'content_image_sizes_attr', 10, 2 );

• 如果你的服务归档页是通过新建普通页面实现，而非WordPress原生自定义文章类型归档，需要在判断条件中补充对应页面判断，例如加上|| is_page('services')，确保页面识别准确
• 单服务详情页为全宽布局，可新增is_singular('services')判断分支，配置对应全宽sizes规则，匹配你已生成的最大1118px宽度素材，参考规则：(max-width: 1118px) 100vw, 1118px
• 代码部署后请清空站点静态缓存、WordPress对象缓存，避免旧的图片属性缓存导致规则不生效

内容的提问来源于stack exchange，提问作者social.reza