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
基础上完善的,本站已适配云落主题