解决WordPress4.4.1不支持图片暗箱问题,Begin主题适用
前几天更新 WordPress 最新 4.41 版本之后,发现文章之前的图片暗箱弹出功能没了,而且之前设置好是缩略图尺寸也没了,直接就是最大尺寸。
看了下当前页面图片的源代码,发现变了:
①、很明显多了一个 srcset 属性 ②、Begin 主题专用的图片暗箱标识:rel="example_group" 消失了。
所以,图片暗箱失效的原因就是这个暗箱属性 rel="example_group" 没了导致的。而我之前设置好的图片尺寸失效则是因为新增了 srcset 这个标签导致的。
简单了解了下,最新版 WordPress 加入 srcset 是为了更好的做到图片自适应,srcset 这个属性细节,感兴趣的朋友可以自行了解下。
废话不多说,下面分享解决方法。
因为我之前有现成的缩略图代码,所以只要在缩略图代码里面多加入 2 条替换规则即可解决。
缩略图代码我就不分享了,感兴趣或有需求的朋友可以参考之前的文章:
下面是本文相关代码:
/**
* 修复 WordPress 4.41 图片暗箱失效和图片缩略图尺寸问题
* 文章地址:https://zhangge.net/5081.html
*/
add_filter ('the_content', 'fix_fancybox');
function fix_fancybox($content) {
global $post;
#修复图片暗箱属性
$content = preg_replace("/<a(.*?)rel=('|")(.*?)('|")(.*?)><img(.*?)</a>/i", '<a$1rel="example_group"$5><img$6</a>', $content);
#去掉 srcset 属性(若不需要缩略图尺寸可注释或删除)
$content = preg_replace("/srcset=('|")(.*?)('|")/i", '', $content);
#去掉图片尺寸属性(若不需要缩略图尺寸可注释或删除)
$content = preg_replace('/<img(.*?)width="(.*?)" height="(.*?)"(.*?)>/i', '<img$1$4>', $content);
return $content;
}
如上代码,添加到主题的 functions.php 当中保存即可,若不在意或本身就是用完整尺寸图片,请如注释所述,去掉后面 2 条规则即可。
另外,上述代码只适用于需要 rel="example_group" 属性的暗箱功能,比如 Begin 主题。其他暗箱若发现不能功能,可以参考这个方法修复。
上述方法只是直接解决问题,但未研究如何从 WordPress 本身根治,比如暗箱标识是否是因为多了一个 srcset 属性导致的,如果是,完全可以修改暗箱代码兼容之。
还有,升级 4.41 之后,就算你禁止了任意尺寸的图片裁剪,WordPress 依然会裁剪 1 份,也是为了 srcset 这个新玩意:
具体如何彻底取消,有时间我再摸索下,已经摸索出来的朋友也欢迎分享或留言告知。
好了,言简意赅,就这么多了,是否意犹未尽呢?自己体会。
2015-01-15 补充内容:
早上搜索了下 WordPress 去掉 srcset,发现WP 大学 已经发过教程了,我就当一下搬运工,贴一下去除代码,方便有需要的朋友:
/**
* 禁用 WordPress 4.4+ 的响应式图片功能
* http://www.wpdaxue.com/disable-responsive-images.html
*/
add_filter( 'max_srcset_image_width', create_function( '', 'return 1;' ) );
不想改代码,也可以安装 Disable Responsive Images 插件解决。
那么,前文分享的代码可以修改如下(已集成 WP 大学分享的代码):
/**
* 修复 WordPress 4.41 图片暗箱失效问题以及去掉srcset属性(响应式图片)
* 文章地址:https://zhangge.net/5081.html
*/
add_filter( 'max_srcset_image_width', create_function( '', 'return 1;' ) );
add_filter ('the_content', 'fix_fancybox');
function fix_fancybox($content) {
global $post;
#修复图片暗箱属性
$content = preg_replace("/<a(.*?)rel=('|")(.*?)('|")(.*?)><img(.*?)</a>/i", '<a$1rel="example_group"$5><img$6</a>', $content);
return $content;
}
另外,我在搜索上述问题的时候,发现小松博客也分享了一个关于响应式图片相关问题,解决的是评论图片问题,我博客的评论由于很少贴图,所以暂时没发现这个问题。
若遇到此类问题可以前往参考解决:wordpress 去掉评论响应式图片 srcset 属性
- Eureka 服务上下线监控
- 程序员面试50题(1)—查找最小的k个元素[算法]
- Netty4自带编解码器详解
- C和指针小结(C/C++程序设计)
- Netty-整合Protobuf高性能数据传输
- Netty-整合kryo高性能数据传输
- 40个重要的HTML 5面试问题及答案
- js调用原生API--陀螺仪和加速器
- OpenDaylight开发-DataStoreChange监听器三种类型
- express模拟接口
- spring boot开发的日志系统
- elasticsearch 5.0.1安装analysis-ik分词器
- Spring Cloud中Feign如何统一设置验证token
- laravel+react+webpack+babel+gulp的配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法