解决WordPress4.4.1不支持图片暗箱问题，Begin主题适用
解决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 属性