今天分享一个免插件实现WordPress文章中的图片FancyBox灯箱的教程。希望可以帮助你！
b2主题美化之全代码集成FancyBox灯箱
b2主题是没有图片灯箱效果的，百度了许久依旧没看到一个可行的方案，所以我整理了全代码集成FancyBox灯箱，亦可摆脱无用插件，FancyBox 图片灯箱效果不仅可以点击图片放大，而且还支持幻灯片播放、全屏查看、缩略图列表以及分享照片的功能。
当然这个灯箱功能支持任何主题呢。
效果图：
免代码教程：
将下方代码添加到文章页面模板的</head>之前
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /><script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
文章模板名称：
b2的主题放在single.php 29 行就可以了
其他主题single.php找到这个文章模板房子最下面<?php get_footer();这个页尾函数前面就可以了
将下面的代码放入你 WordPress 主题下的 functions.php 文件中即可实现效果。
/**FancyBox图片灯箱，大致修改版**/add_filter('the_content', 'fancybox');function fancybox($content){ $file_types = 'bmp|gif|jpeg|jpg|png|swf|webp'; // 文件类型列表$pattern = array("/<img(.*?)src=('|\")([^>]*).($file_types)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).($file_types)('|\")(.*?)>(.*?)<\/a>/i");$replacement = array('<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>');$content = preg_replace($pattern, $replacement, $content);return $content;}教程到这里就结束了,这个免插件的教程是b2主题论坛大佬柒月写的,使用中有任何问题可有文末留言,也可以百度一下【七月笔记】给作者做个seo数据。
