WordPress mip-img 图片新版兼容改造代码

张子凡 WordPress建站/百度MIP 2018-12-07 14:41:07 阅读(...) 评论(2)

关于 WordPress MIP 图片改造代码子凡很早之前就曾在泪雪博客做过分享,也做过不同不定期的升级更新,包括去符合最新的落地页规范等等,而由于之前的mip-img 改造代码考虑着想要预留更多的 img 信息,所以可能会造成某些情况下 WordPress 插入的图片无法完美的适配 MIP 图片改造。

WordPress mip-img 图片改造

那么就在前两天有Fanly MIP 主题的用户给我留言,说已经生效的 MIP 页面中的图片存在错位,所以子凡也在第一时间分析了具体问题,也早早的改进了代码,刚刚这位用户才联系我给做了具体的测试,嗯,完美,所以子凡也在第一时间更新了 Fanly MIP 主题,然后也希望将这个小小的改变的代码分享出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
//WordPress mip-img 图片适配
add_filter('the_content', 'fanly_mip_images');
function fanly_mip_images($content){
	preg_match_all('/<img (.*?)\>/', $content, $images);
	if(!is_null($images)) {
		foreach($images[1] as $index => $value){
			preg_match('/<img .*? src=\"(.+?)\".*?>/i',$images[0][$index],$match);
			$mip_img = '<mip-img popup src="'.$match[1].'"></mip-img>';
			$content = str_replace($images[0][$index], $mip_img, $content);
		}
	}
	return $content;
}

以上代码只是针对 WordPress 文章或者页面内的 mip-img 适配,如果页面中其它位置的图片需要手动适配,因为本来 WordPress 也可以全站适配所有图片,但是因为可能模板的不同会直接影响页面样式,所以子凡就没有分享出来了,当然你感兴趣的话可以参考文章《WordPress 全站改造百度 MIP 图片标签》就可以全站适配了,注意图片中有 popup 属性哦。

由于代码简写了,所以原有图片中的任何参数等信息在 mip 规范适配中都不会被保留,大家根据自己需求选择性使用吧,当然你也可以去看看子凡前面的一篇文章。

除非注明,否则均为泪雪博客原创文章,转载请以链接形式标明本文地址

本文链接:https://zhangzifan.com/wordpress-mip-img-code.html

发表评论

  1. 木木资源博
    1楼
    木木资源博 1周前 (12-07)

    谢谢,博主辛苦了

    • 张子凡
      回复
      张子凡 5天前
      回复 @木木资源博 :幸苦倒是谈不上,单纯的喜欢这种分析形式。