图片灯箱的功能可以给读者带来更好的阅读效果,然而wordpress许多主题是不支持图片灯箱功能的,这里教大家如何纯代码实现图片灯箱的效果,此类的插件有lightgallery、mudulobox等等,但是不推荐使用过多的插件,能自己使用代码解决的就用代码解决,插件是影响网页的性能是较高的。首先看下效果。

首先先找到你安装wordpress的根目录,点击进入wp-content文件夹,找到并点击进入themes文件夹,themes文件夹里全是你的wordpress主题,找到你含有你主题名的文件夹进入.下面我们要将代码添加到相应的文件中


一、找到footer.php

找到该目录的footer.php文件,编辑,在结束body标签前添加下面的代码,添加完后保存退出

<!--图片点击变大-->
 <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>


二、找到该目录的functions.php文件

编辑functions.php,在最后添加下面的代码,添加完后保存退出

//图片点击变大
 add_filter('the_content', 'fancybox');
 function fancybox($content){
     $pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
     $replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
     $content = preg_replace($pattern, $replacement, $content);
     return $content;
 }


三、找到该目录的header.php文件

编辑header.php,在head标签内添加下面的代码,添加完后保存退出

<!--图片点击变大-->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

代码添加进对应的文件后就ok了,效果就出来了。


天天摸鱼,将来有一天会成为摸鱼大佬吗