如何结合WordPress响应式功能实现WooCommerce缩略图响应式？

WordPress原生支持自动生成srcset和sizes属性实现响应式图片，我们可以通过钩子将这个功能和WooCommerce的产品画廊缩略图结合，替代单一尺寸输出。

1. 注册自定义缩略图尺寸（可选） #

如果默认的WordPress尺寸（thumbnail/medium/large）不满足需求，先在主题的functions.php里注册自定义尺寸：

add_action( 'after_setup_theme', 'custom_wc_gallery_sizes' );
function custom_wc_gallery_sizes() {
    // 按需定义尺寸：名称、宽、高、是否裁剪
    add_image_size( 'wc-gallery-sm', 150, 150, true );
    add_image_size( 'wc-gallery-md', 300, 300, true );
    add_image_size( 'wc-gallery-lg', 450, 450, true );
}

注册后需要用Regenerate Thumbnails插件重新生成已上传图片的对应尺寸。

2. 替换画廊缩略图输出逻辑 #

通过woocommerce_single_product_image_thumbnail_html钩子，用WordPress的wp_get_attachment_image()函数生成带srcset的图片：

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'responsive_wc_gallery_thumbs', 10, 2 );
function responsive_wc_gallery_thumbs( $html, $attachment_id ) {
    // 指定要包含在srcset中的尺寸列表
    $allowed_sizes = [ 'wc-gallery-sm', 'wc-gallery-md', 'wc-gallery-lg', 'medium' ];
    
    // 生成响应式图片HTML
    $html = wp_get_attachment_image(
        $attachment_id,
        'wc-gallery-md', // 默认加载的尺寸
        false,
        [
            // 根据屏幕宽度设置图片显示尺寸，按需调整
            'sizes' => '(max-width: 480px) 150px, (max-width: 768px) 300px, 450px',
            // 保留WooCommerce默认类名，保证样式兼容
            'class' => 'woocommerce-product-gallery__image'
        ]
    );
    
    return $html;
}

size属性可以根据你的主题布局调整，比如用相对单位calc(33.333% - 8px)适配移动端每行3个缩略图的场景。

3. 调整原有尺寸过滤器（可选） #

如果你之前用了woocommerce_gallery_thumbnail_size过滤器，可修改为匹配默认尺寸：

add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
    return 'wc-gallery-md';
} );

验证效果 #

刷新产品页，查看缩略图的HTML，应该能看到包含srcset和sizes的结构，类似：

<img width="300" height="300" src="product-300x300.jpg" class="woocommerce-product-gallery__image" alt="产品名称" srcset="product-150x150.jpg 150w, product-300x300.jpg 300w, product-450x450.jpg 450w" sizes="(max-width: 480px) 150px, (max-width: 768px) 300px, 450px">

注意事项 #

• 新注册的尺寸需要重新生成缩略图才能生效。
• 修改代码后清空缓存插件的缓存，避免旧代码残留。
• sizes规则要和主题的CSS布局对应，防止图片显示异常。

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