网站建设

解决WordPress4.4.1不支持图片暗箱问题,Begin主题适用

Jager · 1月14日 · 2016年 2211次已读

前几天更新WordPress最新4.41版本之后,发现文章之前的图片暗箱弹出功能没了,而且之前设置好是缩略图尺寸也没了,直接就是最大尺寸。

看了下当前页面图片的源代码,发现变了:

解决WordPress4.4.1不支持图片暗箱问题,Begin主题适用

①、很明显多了一个srcset属性

②、Begin主题专用的图片暗箱标识:rel=”example_group” 消失了。

所以,图片暗箱失效的原因就是这个暗箱属性 rel=”example_group” 没了导致的。而我之前设置好的图片尺寸失效则是因为新增了 srcset 这个标签导致的。

简单了解了下,最新版 WordPress 加入srcset是为了更好的做到图片自适应,srcset这个属性细节,感兴趣的朋友可以自行了解下。

废话不多说,下面分享解决方法。

因为我之前有现成的缩略图代码,所以只要在缩略图代码里面多加入2条替换规则即可解决。

缩略图代码我就不分享了,感兴趣或有需求的朋友可以参考之前的文章:

WordPress集成PHP缩略图,并开启Nginx缓存的方法

下面是本文相关代码:

/**
* 修复 WordPress 4.41 图片暗箱失效和图片缩略图尺寸问题
* 文章地址:https://zhang.ge/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这个新玩意:解决WordPress4.4.1不支持图片暗箱问题,Begin主题适用

具体如何彻底取消,有时间我再摸索下,已经摸索出来的朋友也欢迎分享或留言告知。

好了,言简意赅,就这么多了,是否意犹未尽呢?自己体会。


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://zhang.ge/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属性

8 条回应
  1. 好文章 2016-1-15 · 23:34

    感谢分享

  2. yyyyyyyhb 2016-1-16 · 22:01

    我没禁用图片也没有被裁剪啊

  3. aunsen 2016-1-17 · 0:54

    我还在等鸟哥的更新 :mrgreen:

  4. 香港虚拟主机 2016-1-18 · 16:14

    WordPress4.4.1不支持图片暗箱问题,还会出现这样的问题,真的是稀奇

  5. Koolight 2016-1-18 · 16:54

    感谢大神分享!

  6. 源码迷 2016-1-27 · 1:10

    想问下是不是禁止图片自适应后就能阻止wordpress自己产生截图?我发现每次我上传一张图片后在FTP里都会看到自动产生额外的两张其他大小的缩略图。。

  7. 源码迷 2016-1-27 · 15:34

    还有,为什么我的网站暗箱只能在IE浏览器中有效,Chrome内核的有暗的效果但是不显示图片! ❗

  8. 云落 2016-4-4 · 2:24

    觉得用a标签嵌套最简单