让 WordPress 支持 WebP格式图片

知更鸟
知更鸟
知更鸟
1647
文章
6938
评论
2020年10月21日21:53:1589543

让 WordPress 支持 WebP格式图片

让WordPress 支持 WebP格式图片

WordPress 默认不支持WebP格式图片上传,将下面代码添加到当前主题函数模板functions.php中,即可解决上传问题。

function webp_filter_mime_types( $array ) {
	$array['webp'] = 'image/webp';
	return $array;
}
add_filter( 'mime_types', 'webp_filter_mime_types', 10, 1 );

展开隐藏

function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

虽然已经可以上传WebP格式的图片了,但在媒体列表中看不到缩略图,这是因为WordPress在用 wp_generate_attachment_metadata()函数生成图片数据时,使用了file_is_displayable_image()函数判断文件是否为图片,判断WebP图片的结果为否,因此中断了保存图片数据的操作。

该函数位于:wp-admin/includes/image.php展开隐藏

function file_is_displayable_image( $path ) {
    $displayable_image_types = array( IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG, IMAGETYPE_BMP, IMAGETYPE_ICO );
 
    $info = @getimagesize( $path );
    if ( empty( $info ) ) {
        $result = false;
    } elseif ( ! in_array( $info[2], $displayable_image_types, true ) ) {
        $result = false;
    } else {
        $result = true;
    }
 
    /**
     * Filters whether the current image is displayable in the browser.
     *
     * @since 2.5.0
     *
     * @param bool   $result Whether the image can be displayed. Default true.
     * @param string $path   Path to the image.
     */
    return apply_filters( 'file_is_displayable_image', $result, $path );
}

解决办法是在主题的functions.php里添加以下代码:

function webp_file_is_displayable_image($result, $path) {
	$info = @getimagesize( $path );
	if($info['mime'] == 'image/webp') {
		$result = true;
	}
	return $result;
}
add_filter( 'file_is_displayable_image', 'webp_file_is_displayable_image', 10, 2 );

展开隐藏

function webp_is_displayable($result, $path) {
	if ($result === false) {
		$displayable_image_types = array( IMAGETYPE_WEBP );
		$info = @getimagesize( $path );
		if (empty($info)) {
			$result = false;
		} elseif (!in_array($info[2], $displayable_image_types)) {
			$result = false;
		} else {
			$result = true;
		}
	}
	return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

文本中的插图就是webp图片,以目前的网络速度使用webp图片并不完全为了加载快,而是当图片很多时webp图片优势就明显了,可以减少三分一以上的空间占用。虽然目前七牛、又拍云、阿里云oss、腾讯云cos等都支持WebP,可惜之前苹果设备不支持webp图片,这也可能是WordPress一直不支持webp图片的原因吧。

不过新版Safari和微信已支持webp图片,是个好消息。

嫌改代码麻烦可以安装插件:Allow Webp image

代码源自:

https://mariushosting.com/how-to-upload-webp-files-on-wordpress/

https://www.beizigen.com/2205.html

weinxin
版权声明
本站原创文章转载请注明文章出处
利用WordPress自带短代码添加视频 WordPress

利用WordPress自带短代码添加视频

利用WordPress自带的视频短代码可以方便地让你在任何位置添加视频,支持的文件类型是mp4,m4v,webm,ogv,wmv和flv。 基本的视频短代码 【video src="pepper.mp...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:8   其中:访客  5   博主  3
    • 夜未央 夜未央 2

      IE也不支持,插件和有些CDN能自动判断浏览器,返回不同格式的图片,但这样在上传时就需要自动将图片存成不同的格式。不懂技术,不知道这样的自动判断是否影响加载速度,感觉现在的CDN速度已经不是问题,所以一张图片大几十K对速度来说影响不大,除非是图很多的页面。

        • 知更鸟 知更鸟

          @ 夜未央 微软都使用 Chromium 内核了,还哪有IE
          不是为了速度,是为了少占空间,当你有一万张图片,优势就明显了

        • 凤凰单丛 凤凰单丛 0

          使用webp对苹果用户相当不友好,发现苹果版的微信打开网站,也是不显示图片的。

          • wang wang 0

            wp5.51,该修改办法对版本无效。

              • 知更鸟 知更鸟

                @ wang 这个和WP版本无关
                文章修改了,可以尝试安装文章中推荐的插件试试

              • 白杨博客 白杨博客 2

                知更鸟主题自带这个功能吧?