图片灯箱的功能可以给读者带来更好的阅读效果，然而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了，效果就出来了。