WordPress响应式加载图片是一项很好的功能。但有人想要使用自己的方法来实现(比如小编我)。这篇文章将介绍如何禁用WordPress响应图像功能(即srcset属性),以便您可以自由发挥。
WordPress响应式图片:
其实wordpress从4.4版本就开始支持srcset属性,但我也是最近测试腾讯的对象储存COS时才发现这一“新”功能。其两大特性就是:
- 原图片的目录会自动创建768px的缩略图副本
- 网站前端会添加
srcset
的图像属性
举个栗子吧,我们熟知的常规图片加载形式如下:
[img src="https://example.com/wp-content/uploads/2018/08/photo.jpg" />
但是响应式图片就有点小变化啦:
[img src="https://example.com/wp-content/uploads/2018/08/photo.jpg"
srcset="https://example.com/wp-content/uploads/2018/08/photo.jpg 600w,
https://example.com/wp-content/uploads/2018/08/photo.jpg 1024w,
https://example.com/wp-content/uploads/2018/08/photo.jpg 1600w" />
禁用srcset和768px缩略图的方法:
// 禁止自动生成 768px 缩略图
function shapeSpace_customize_image_sizes($sizes) {
unset($sizes['medium_large']);
return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'shapeSpace_customize_image_sizes');
// 禁用 srcset 属性
add_filter('max_srcset_image_width', create_function('', 'return 1;'));
将以上代码复制到functions.php
中即可。