WordPress免插件实现图片FancyBox灯箱教程

今天分享一个免插件实现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数据。