WP笔记

WordPress禁用Responsive Images(2021)

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

什么是Responsive Images

响应式图片,使用srcset属性指定一系列图片源,浏览器根据当前视口大小和分辨率选择尺寸合适的图片。同时,可以通过sizes属性指定一些规则,告诉浏览器当视口尺寸满足媒体查询条件时,应该选多大的图片。

举例,你在WordPress Editor里插入了图片,源代码如下,注意srcset属性和sizes属性。

<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-1238.png 1238w,
            https://www.solagirl.net/woocommerce-payment-test-enable-640.png 640w" 

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

srcset告诉我们备选图片有两站,一张宽度是1238px,另一张是640px,注意“w”是单位,描述图片的实际宽度,可以理解为像素。

下面,有请浏览器选择图片。浏览器看了一下sizes,当视口尺寸小于1238px时,按照viewport=100vw选择图片,比如手机屏幕viewport是400px,就从列表里选择大于400px的图片源,retina屏幕还会考虑分辨率,选一张更大的。当viewport大于1238px时,就当viewport是1238px来选图片。

禁用Responsive Images

如果你的图片本来就不大,把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

WordPress如何输出Responsive Images

理解WordPress如何控制responsive images,可以更好的解决实际问题。WordPress给图片添加属性的方法有三个途径:

  1. 通过wp_get_attachment_image()输出的图片。
  2. post_content里的图片,通过add_filter( ‘the_content’, ‘wp_filter_content_tags’ )增加srcset和sizes。
  3. gutenberg编辑器的元素,通过wp_filter_content_tags( $content )增加srcset和sizes属性。

可用fitler总共有四个,如下:

// 控制延迟加载的filter
apply_filters( 'wp_lazy_loading_enabled', $default, $tag_name, $context );

// 控制srcset属性的filter
apply_filters( 'wp_calculate_image_srcset', $sources, $size_array, $image_src, $image_meta, $attachment_id );

// 控制size属性的filter
apply_filters( 'wp_calculate_image_sizes', $sizes, $size, $image_src, $image_meta, $attachment_id );

// 控制所有属性的filter,仅适用于通过wp_get_attachment_image()输出的图片
apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment, $size );

这几个filter里,改变sizes属性可能最实用,WordPress的sizes规则过于简单,只要viewport尺寸大于图片尺寸,就会选择最大的图片,一张产品图我选择输出medium尺寸,比如768px宽,但一栏显示4个产品,图片渲染的宽度只有300px。结果会怎样:

  • viewport小于768px时,可能会选择尺寸小于768px的图片,比如thumbnail
  • viewport大于768px,就选最大的,即使实际渲染宽度只有300px。

结局就是,viewport越小越会用小图,越大则用大图,对一行一张图片的布局来说没问题,但对分栏布局不一定适用。所以我们可以适当修改sizes属性,例如:

  • viewport小于480px时一行一个产品,按viewport=100vw选择图片
  • viewport小于768px时一行两个产品,按viewport=240px选择图片
  • 大于768px一行四个产品,按viewport=300px选择图片
add_filter( 'wp_calculate_image_sizes', 'sola_custom_image_sizes_attribute' );
 
function sola_custom_image_sizes_attribute( $sizes ) {
  return '(max-width: 480px) 100vw, (max-width: 768px) 240px, 300px';
}

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

留言

您的电子邮箱地址不会被公开。