首页教程软件教程正文

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

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 712 浏览 1092 个字

摘要 :

文章目录实现步骤 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)然后我们再去访问文章页面，发现电机图片就出现放大效果，并且当有多张图片是，可以有幻灯片的等效效果，赶紧快来试试吧！