让 WordPress 支持 WebP格式图片

知更鸟 2020年10月21日21:53:15101.3K4

让 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文章目录索引,可以方便浏览者阅读,文本分享一段最新免插件生成WordPress 文章目录索引代码,可以将h2-h6段落标题自动生成文章生成目录索引,并可实现分层级。 WordPres...
在WordPress文章中添加小工具 WordPress

在WordPress文章中添加小工具

虽然目前WordPress区块编辑器,可以在正文中添加任意区块,包括区块小工具,但想在所有文章中添加一个固定的内容,每次还是需要手动添加区块,文本分享一段代码,可实现在WordPress文章中添加一个...
匿名

发表评论

匿名网友

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

评论:10   其中:访客  6   博主  4
    • 夜未央
      夜未央 2

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

        • 知更鸟
          知更鸟

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

        • 凤凰单丛
          凤凰单丛 0

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

          • wang
            wang 0

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

              • 知更鸟
                知更鸟

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

              • 白杨博客
                白杨博客 2

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

                • 佛系软件
                  佛系软件 1

                  大佬有没有把jpg变成webp图片的插件啊,本地不保留webp图片,就是在jpg后缀加一个webp后缀这样的,以前好像用过这样的插件