【WordPress教程】WordPress支持WebP格式图片上传方法

WordPress本身(此时的版本为5.0.3)并不支持WebP图片的上传和在媒体库中生成略缩图。所以为了方便使用WordPress,文章将会介绍如何通过修改functions.php文件使之支持WebP格式的图片的上传与显示其略缩图

WebP是一种由Google于2010年提出的图片压缩格式 。
WebP为网络图片提供了无损和有损压缩能力,同时在有损条件下支持透明通道。据官方实验显示:无损WebP相比PNG减少26%大小;有损WebP在相同的SSIM(Structural Similarity Index,结构相似性)下相比JPEG减少25%~34%的大小;有损WebP也支持透明通道,大小通常约为对应PNG的1/3

PhotoShop高度压缩图片的方式已经可以大幅度压缩图片体积,但WebP格式的图片相较于这种方式图片体积还要小2倍!

在浏览器支持方面,现在主流的浏览器也都支持WebP格式,况且像微信公众号这样的大平台早已开始使用WebP图片,因此没有理由不将博客的插图换成WebP了。

默认情况下,WordPress不支持上传WebP格式的图片,在主题的functions.php里添加以下代码即可:

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

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

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

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

在这之后上传WebP格式图片不会再有问题了,但之前已经上传的其他格式的图片要替换为WebP格式还是比较麻烦,分享一下我的解决过程:

  1. 使用“Ubuntu下批量转换WebP格式图形工具”将wp-content/uploads目录中的图片全部转换为WebP格式,如果你是Windows系统,可以搜索一下相应的转换工具;
  2. 编写了一小段脚本读取数据库中所有的图片,使用wp_update_attachment_metadata()函数更新这些图片的数据;
  3. Gedit编辑器正则表达式替换wp_postmeta表中meta_key为_wp_attached_file的图片名称,可以看到这个表中meta_key为_wp_attachment_metadata对应的数据已经在第2步中替换了;
  4. Gedit编辑器正则表达式替换文章数据表中插入的图片链接;

由于我在处理时没有保存相应的脚本和正则表达式,所以你只有自己动手丰衣足食了。

 

另外还有一种方法是:

Webp 的缺点也很明显,就是只支持 Chrome 浏览器,iOS 下的 Safari 甚至都不支持。幸好,国内大部分浏览器都是 Chrome 内核的浏览器。

那么问题来了,我们手头并没有 webp 格式的图片,就算有还有不支持的浏览器,这我们也得考虑。幸运的是主流图片云储存都提供了输入格式的选择,webp 也包含在其中,只要你使用了此类云存储,那么都可以输出 webp 格式了,我们剩下要做的就是判断何时输出Webp 格式。

简单的方法,可以根据 HTTP 头中的 accept 是否包含image/webp来判断浏览器是否支持 webp 格式。

实现方法

下面的代码直接加到 functions 文件中即可

function fa_converse_webp($matches) {
 return $matches[1] . $matches['2'] . '!/format/webp';
 // 七牛把!/format/webp替换为下面的字段
 //?imageView2/format/webp
}
 
function fa_converse_webp_filter($content){
 global $post;
 $content = preg_replace_callback("/(<img[^>]*src *= *["']?)([^"']*)/i", 'fa_converse_webp' , $content);
 return $content;
}
 
function fa_is_support_webp(){
 return strstr($_SERVER['HTTP_ACCEPT'],'image/webp');
}
 
if ( fa_is_support_webp() ) add_filter('the_content','fa_converse_webp_filter');

默认代码支持的是又拍云,如果你使用的是七牛则将!/format/webp替换为?imageView2/format/webp。

此方案确实可以实现对于Webp的浏览器适配问题,但一旦启用缓存就不灵了。

 

完美解决方案:

下面记录一下基于七牛提供的图片处理服务使用Webp的完美解决方案:

思路简要概括

利用js判断浏览器是否支持webp,如果支持则输出Webp格式,否则原格式输出。由于浏览器加载渲染页面的原因,此方案需要配合图片延迟加载来完成,比如jQuery的某插件。

具体实现
  • 在七牛存储空间新建一个图片样式,输出格式选择WEBP,然后样式名称随便起个名字,比如:mywebp,其他选项根据跟人需要选择。
  • functions.php中加入如下代码,加载js文件
    function add_lbtbj_res() {
    	wp_register_script('lbtbj', get_template_directory_uri() . 'lbtbj.js');
    	wp_enqueue_script('lbtbj');
    }
     
    add_action('wp_enqueue_scripts', 'add_lbtbj_res');

     

  • js代码实现如下:
function checkWebp() {
    try {
        return document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
    } catch (err) {
        return false;
    }
}
 
jQuery(function ($) {
    let checkPic = function (isWebP) {
        $('img').each(function(i, v) {
            if (isWebP) {
                // 正则处理,img标签的src属性加上图片样式名称,由于本人很懒而且正则很烂,各位自行解决
            } else {
                // 正则处理,img标签的src属性去掉图片样式名称,由于本人很懒而且正则很烂,各位自行解决
            }
        });
    };
    checkPic(checkWebp());
});

 

完成~

 

免责申明:
1. 本站所有教程、文章分享目的仅供大家学习和交流,资源连接来自于网络,非本站发布,本站也不存储任何资源!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源质量及其时效性,恕不接受任何提问。
4.本站即不保存任何资源,也不对任何链接作品负责,希望大家赞助本站,费用仅维持本站的日常运营所需!
5. 百码云无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 通过本站收集链接的相关资源,严禁杜绝任何形式的正式商业用途,请前往官方购买。
7. 但凡通过本站链接导航下载的任何作品,虽不归本站所有,但在研究学习的前提下,请务必在下载24小时后删除。
百码云资源站仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本文章采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
百码云 » 【WordPress教程】WordPress支持WebP格式图片上传方法

提供互联网优质的链接集合站点

关于权限 站内帮助