wordpress给文章添加图片灯箱/暗箱功能,点击图片弹出|支持dux最新主题
作者:风月 日期:2019-10-30 17:18:36 浏览:2902 分类:网站源码
折腾了三个小时,终于把所有有关于wordpress图片灯箱或者暗箱特效的问题全部搞定了,支持dux主题以及各种wordpress主题。wordpress文章图片暗箱功能
增加这个功能大家可以通过代码或者插件的形式,都可以解决,不过麻烦很多,比如很多主题之家添加插件,无效果。
经过几个小时的折腾,缘聚岛完美解决了各种灯箱代码教程还有插件无效的问题。
这里以dux为例,大家都知道dux代码比较整齐,而修改dux主题麻烦就在于它把代码都写到一起了,试用其他大部分主题的教程dux不一定适用。
问题:
1、主题不兼容,直接使用网上教程无效,安装插件无效。
2、修改过主题,比如给主题添加了外链自动go转跳的功能,导致图片灯箱功能失效。
解答:
不管是什么问题,我们放心过去的总总,直接开始教程,没有任何冲突!
给文章页增加图片Fancybox灯箱效果/支持放大自动播放等
教程分两种,一种是没修改过主题的,另一种是给主题添加了外链转跳功能的。
这里直接推荐方法二,因为你现在不修改难保以后不修改主题,所以方法二统一搞定。
FancyBox 简单介绍
Fancybox 是一个 JavaScript 库,用于以优雅的方式呈现图像,视频和任何 HTML 内容。它具有您期望的所有功能 – 触摸启用,响应和完全可定制。
依赖
jQuery 3+ 是首选,但 fancyBox 适用于 jQuery 1.9.1+ 和 jQuery 2+
兼容性
fancyBox 包括对触控手势的支持,甚至支持缩放手势。它非常适合手机和桌面浏览器。
特点
移动第一:每个设备上看起来不错;支持最常见的触控手势-双击,捏放和捏出来的图像浏览; 水平滑动进行导航。
多个实例:它可以打开一个模式,而另一种是仍然可见。
快速和简易安装:就在两个文件,无需编写 JavaScript 代码一行来实现。
自动内容识别:支持最流行的网站诸如 YouTube,Vimeo 的和谷歌地图的开箱。
GPU 加速:硬件加速的动画有更好的表现。
响应:设置使用任何 CSS 单位,浏览器将完成剩下的内容维度;所有的图形,包括加载图标,仅与 CSS 创建。
官方使用教程
<!-- 1. Add latest jQuery and fancyBox files --> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"> </script><!-- 2. Create links --> <a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a> <a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a> <!-- 3. Have fun! -->
方法一:如果你没修改过主题,可以直接使用
1、在文件头(如主题内的 header.php 文件)中引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件(可以使用以上代码中的链接,或者直接下载后上传到所使用主题文件夹内再添加),而 jquery-3.2.1.min.js 文件一般不用理会,因为大部分 WordPress 站点都已经引入有 jQuery 库了。
大白话:这是功能代码,添加了就有功能了!
在主题内的 header.php 文件加入如下代码:
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <link rel="stylesheet" rel="nofollow" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
2、接着只需要给我们站点文章内图片的链接添加 data-fancybox 属性即可,还可以使用 data-caption 属性添加标题。例如:
<a href="image.jpg" data-fancybox data-caption="My caption"> <img src =“thumbnail.jpg” alt =“My caption”/> </a>
大白话:这是调用代码
为文章页内的图片链接添加 data-fancybox
属性可以使用函数自动添加,只需要将以下代码添加到当前主题的functions.php
文件最后一个 ?>
的前面即可。
/* ================================================== fancybox图片灯箱效果,自动给图片添加图片链接 ================================================== */ add_filter('the_content', 'fancybox1'); add_filter('the_content', 'fancybox2'); function fancybox1($content){ global $post; $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>'; $content = preg_replace($pattern, $replacement, $content); return $content; } function fancybox2($content){ global $post; $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i"; $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>'; $content = preg_replace($pattern, $replacement, $content); return $content; }
到此就完美搞定了。
方法二:网站添加“自动给文章的外部链接添加nofollow属性”这种功能
这样会导致图片的链接被识别为外链,所以灯箱失效,这里我们只需要在代码的判断处添加了对外链图片的过滤规则。
大白话:只可意会不可言传
我们直接吧之前的转跳功能代码删除,用缘聚岛提供的即可,或者根据缘聚岛给出的规则大家自己改你们的代码!
1、把下面代码添加到主题文件的function.php中:
其中“&& !preg_match(‘/\.(jpg|jepg|png|ico|bmp|gif|tiff)/i’,$val)”是排除图片外链的规则。
// 自动给文章的外部链接添加nofollow属性(纠正外链图片暗箱功能失效by缘聚岛) add_filter('the_content','web589_the_content_nofollow',999); function web589_the_content_nofollow($content){ preg_match_all('/href="(http.*?)"/',$content,$matches); if($matches){ foreach($matches[1] as $val){ if( strpos($val,home_url())===false && !preg_match('/\.(jpg|jepg|png|ico|bmp|gif|tiff)/i',$val)) $content=str_replace("href=\"$val\"", "rel=\"nofollow\" href=\"" . get_bloginfo('wpurl'). "/link?url=" .base64_encode($val). "\"",$content); } } return $content; } // 给图片自动添加链接 add_filter('the_content', 'fancybox1'); add_filter('the_content', 'fancybox2'); function fancybox1($content){ global $post; $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>'; $content = preg_replace($pattern, $replacement, $content); return $content; } function fancybox2($content){ global $post; $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i"; $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>'; $content = preg_replace($pattern, $replacement, $content); return $content; }
2、然后在网站根目录下新建个 link 的文件夹,在其中写个 index.php 的文件,内容如下(请保存为UTF-8):
<?php $url = $_GET['url']; $a = ''; if( $a==$url ) { $b = "https://www.yuanjudao.com/"; // echo 'true'; } else { $b = $url; $b = base64_decode($b); } //Template Name:链接跳转(有过度) ?> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="0.1;url=<?php echo $b; ?>"> <title>正在跳转....</title> </head> <body> </body> </html>
3、在主题内的 header.php 文件加入如下代码:
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <link rel="stylesheet" rel="nofollow" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
教程结束,大家自己刷新网站,点开图片就会有灯箱效果了。
猜你还喜欢
- 04-04 [笔刷] 337期全中文笔刷大合集,全网分类最精准,iPad手绘强推!
- 11-28 [资料] 手机、电脑绿幕虚拟直播教程
- 11-10 城阳电工电路:家庭电路问题频出,一路寻找发电厂的奇怪之旅!
- 11-05 《王者荣耀》精品教程带你掌握王者技巧(包含小棉花最全23个英雄教学)
- 09-01 [教程] 实景+绿幕 直播间搭建优化教程
- 07-09 整点秒杀“拼多多”领5元无门槛券
- 07-02 [资料] 张至顺道长《八部金刚功4K画质重制版》非常值得收藏
- 04-02 [云资源] 2022 Tiktok从小白到精英实操特训营!(保姆级实操教程)
- 03-04 [美工修图] ALITA机甲女性角色高级教程
- 01-24 【12-11暂停更新】SSR更新分享,老司机懂的,滴滴!
- 01-15 [资料] 1~12年级奥数教程
- 11-28 [教程] 2022年IDEA使用全攻略教程
取消回复欢迎 你 发表评论:
-
- 最新文章
- 热门文章
- 热评文章
[课程] 女性必备护肤课,带你轻松养出逆龄好肌肤【完结】
[课程] 《风水 算命系列课程》九合集 新年顺风顺水[pdf.mp4]
[短剧] 下架短剧小合集
[资料] AI行业最新资料大全(391份)
[书籍] 【私人珍藏精品好书A-100部】
[书籍] TXT电子书大合集(70000本)
[翻译识别] Pot v2.7.9 跨平台划词翻译和OCR工具
[素材资源] 短视频剪辑配音音效库(9000+)
[笔刷] 337期全中文笔刷大合集,全网分类最精准,iPad手绘强推!
[英语教育] 新概念英语视频教程
- 最新评论
-
有意思的片子sdssds3 评论于:03-22 很久就想看啦。谢谢楼主sdssds3 评论于:03-22 经典永留存bantiaomin 评论于:02-08 看看在说四个眼 评论于:02-03 gooooooodflyingmoon 评论于:01-04 コメント我喜双中国、万分感谢t3taira 评论于:08-30 好评推荐bbaa365 评论于:08-28 加油很好啊军子混混 评论于:08-20 感谢分享123yaonie 评论于:08-19 不知道算不算,毕竟这集早就有了,今年莫名又被拿出来播观棋 评论于:08-16
- 热门tag