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