如何实现wordpress文章中图片点击放大及幻灯功能

文
章
目
录

wordpress文章中的图片如果不使用插件或者自己写代码实现，是无法在我们点击图片时，将图片放大，当有多个图片是，也没办法利用类似幻灯片方式来查看所有图片，今天子夜资源网教大家如何使用fancybox来实现图片放大以及灯箱功能。

实现步骤

1）找到你所使用的主题里的header.php头部文件，在里面新增fancybox的css代码引用，内容如下：

<link rel="stylesheet" rel="nofollow" href="https://zy.panziye.com/jump/?url=aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2ZhbmN5YXBwcy9mYW5jeWJveEAzLjUuNy9kaXN0L2pxdWVyeS5mYW5jeWJveC5taW4uY3Nz" />

2）找到footer.php的页脚文件，新增fancybox的js引用，如下：

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

3）找到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;
 }

4)然后我们再去访问文章页面，发现电机图片就出现放大效果，并且当有多张图片是，可以有幻灯片的等效效果，赶紧快来试试吧！