WordPress

WordPress禁用Responsive Images(2021)

WordPress4.4引入了Responsive Images,所有附件图片都会添加srcset和sizes属性,对移动设备非常友好,但也有需要禁用Responsive Images的时候,方法如下。

禁用Responsive Images

你在WordPress Editor里插入了图片,源代码看起来是这样的,注意那一大串srcset属性。

<figure class="wp-block-image size-full">
    
    <img loading="lazy" width="1238" height="745" src="https://www.solagirl.net/woocommerce-payment-test-enable.png" alt="" class="wp-image-5783" 

    srcset="https://www.solagirl.net/woocommerce-payment-test-enable.png 1238w,
            https://www.solagirl.net/woocommerce-payment-test-enable-640x385.png 640w, 
            https://www.solagirl.net/woocommerce-payment-test-enable-150x90.png 150w, 
            https://www.solagirl.net/woocommerce-payment-test-enable-768x462.png 768w, 
            https://www.solagirl.net/woocommerce-payment-test-enable-800x481.png 800w" 

    sizes="(max-width: 1238px) 100vw, 1238px">
</figure>

如果你的图片本来就不大,把img标签弄的如此臃肿就显得多余,在child theme的functions.php里加入如下代码可禁用此功能。

function sola_disable_responsive_images( $sources ) {

    //只在archive页面禁用
    if( is_archive() ){
        return false;
    }

    return $sources;
}
 
add_filter( 'wp_calculate_image_srcset', 'sola_disable_responsive_images' );

可以选择性的在某些页面禁用。参考WordPress Conditional TagsWooCommerce Conditional Tags

延伸阅读:什么是响应式图片

留言

您的电子邮箱地址不会被公开。 必填项已用*标注