• 欢迎访问佰阅部落,本站为优质开源程序分享站,所有自研项目均开源免费,可在Github查看源码。 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎积极参与讨论、反馈问题

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

wordpress 佰阅部落 3个月前 (08-15) 218次浏览 0个评论
文章目录[隐藏]

1.为什么折腾这个?

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

<img src="https://img.baiyue.one/upload/2019/08/5d53bb011f8c2.png" alt="title" title="Win10+Docker+Vscode搞定php开发环境(适用于任意docker化的php程序title

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

<a href="https://img.baiyue.one/upload/2019/08/5d53bb011f8c2.png" rel="box" class="fancybox" title="" data-fancybox="images" data-original-title="title"><img src="https://img.baiyue.one/upload/2019/08/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)
佰阅部落
关于作者:
爱折腾,爱学习,我是一个Docker菜鸟,用心分享各种实用搭建教程,让优质web程序脱颖而出,欢迎订阅!

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