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

前几天更新 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 属性

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇