让 WordPress 支持 WebP格式图片

知更鸟 2020年10月21日21:53:15101.4K4
文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

让 WordPress 支持 WebP格式图片

让WordPress 支持 WebP格式图片

文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

WordPress 默认不支持WebP格式图片上传,将下面代码添加到当前主题函数模板functions.php中,即可解决上传问题。文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

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

展开收缩
文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

另一段类似的代码文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

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

文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

虽然已经可以上传WebP格式的图片了,但在媒体列表中看不到缩略图,这是因为WordPress在用 wp_generate_attachment_metadata()函数生成图片数据时,使用了file_is_displayable_image()函数判断文件是否为图片,判断WebP图片的结果为否,因此中断了保存图片数据的操作。文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

该函数位于:wp-admin/includes/image.php

展开收缩
文章源自知更鸟-https://zmingcx.com/wordpress-webp.html
文章源自知更鸟-https://zmingcx.com/wordpress-webp.html
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里添加以下代码:文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

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 );

展开收缩
文章源自知更鸟-https://zmingcx.com/wordpress-webp.html
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);

文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

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

不过新版Safari和微信已支持webp图片,是个好消息。文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

嫌改代码麻烦可以安装插件:Allow Webp image文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

代码源自:文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

https://mariushosting.com/how-to-upload-webp-files-on-wordpress/文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

https://www.beizigen.com/2205.html文章源自知更鸟-https://zmingcx.com/wordpress-webp.html

文章源自知更鸟 | 崇尚专注 追求极致 分享交流WordPress经验与技巧,关注前端设计与网站制作,打造自己专属的WordPress主题,让你的博客与众不同!
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
WordPress 添加动态版权日期 WordPress

WordPress 添加动态版权日期

一般网站都会在页脚添加个类似Copyright ©2000-2021版权信息,如果嫌每年都改这个日期麻烦,可以通过下面的方法添加一个动态版权日期。 将下面代码添加到当前主题函数模板functions....
匿名

发表评论

匿名网友

:?: :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后缀这样的,以前好像用过这样的插件