• 欢迎访问佰阅部落
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

WordPress点击图片放大效果实现方法—适用于任意img标签自动变成a标签

搭建教程 佰阅 4年前 (2019-08-15) 2092次浏览 0个评论

1.为什么折腾这个?

我一般用typora写文章,图片外链用的水印图床,每次写完文章,copy到wordpress文章编辑器后,默认保持了原有的样式,图片效果如下:

<img src="https://gcore.jsdelivr.net/gh/Baiyuetribe/yyycode@dev/img/20/5d53bb011f8c2.png" alt="title" title="Win10+Docker+Vscode搞定php开发环境(适用于任意docker化的php程序title

但是支持点击放大的效果图,需要如下代码:

<a href="https://gcore.jsdelivr.net/gh/Baiyuetribe/yyycode@dev/img/20/5d53bb011f8c2.png" rel="box" class="fancybox" title="" data-fancybox="images" data-original-title="title"><img src="https://gcore.jsdelivr.net/gh/Baiyuetribe/yyycode@dev/img/20/5d53bb011f8c2.png" alt="Win10+Docker+Vscode搞定php开发环境(适用于任意docker化的php程序titleer化的php程序二次开发)"></a>title

所以,问题就在于原有的<img>标签外部需要补加一层<a href=""...>这样的超链接。所以,解决办法就是用正则表达式进行替换。

2.正则表达式示例:

$pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i";"/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>';'<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>';

3.wp-插件下载(simple-fancybox)

该插件为simple-facybox基础上完善的,本站已适配云落主题

文件下载

 


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress点击图片放大效果实现方法—适用于任意img标签自动变成a标签
喜欢 (0)

您必须 登录 才能发表评论!