无作为
折腾了三个小时，终于把所有有关于wordpress图片灯箱或者暗箱特效的问题全部搞定了，支持dux主题以及各种wordpress主题。
wordpress文章图片暗箱功能
增加这个功能大家可以通过代码或者插件的形式，都可以解决，不过麻烦很多，比如很多主题之家添加插件，无效果。
经过几个小时的折腾，无作为完美解决了各种灯箱代码教程还有插件无效的问题。
这里以dux为例，大家都知道dux代码比较整齐，而修改dux主题麻烦就在于它把代码都写到一起了，试用其他大部分主题的教程dux不一定适用。
效果测试图
问题：
1、主题不兼容，直接使用网上教程无效，安装插件无效。
2、修改过主题，比如给主题添加了外链自动go转跳的功能，导致图片灯箱功能失效。
解答：
不管是什么问题，我们放心过去的总总，直接开始教程，没有任何冲突！
给文章页增加图片Fancybox灯箱效果/支持放大自动播放等
教程分两种，一种是没修改过主题的，另一种是给主题添加了外链转跳功能的。
这里直接推荐方法二，因为你现在不修改难保以后不修改主题，所以方法二统一搞定。
方法一：如果你没修改过主题，可以直接使用
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://www.w1234.net/link?url=aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvZmFuY3lib3gvMy4yLjUvanF1ZXJ5LmZhbmN5Ym94Lm1pbi5jc3M=" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
上面第二行代码会自动转码为本站内链，默认链接为：https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css
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 = "http://www.w1234.net/"; // 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://www.w1234.net/link?url=aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvZmFuY3lib3gvMy4yLjUvanF1ZXJ5LmZhbmN5Ym94Lm1pbi5jc3M=" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
上面第二行代码会自动转码为本站内链，默认链接为：https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css
教程结束，大家自己刷新网站，点开图片就会有灯箱效果了。
历史上的今天:
- 2020: LOL手游全球公测啦，快来一起手游吧(0)
- 2018: 电影《反贪风暴3》超清中字磁力链接(0)
- 2018: 电影《大轰炸》1080P高清百度网盘在线观看+磁力链接(0)
- 2018: 最新安卓斗图表情包app内购破解(0)
- 2018: 最新安卓InShot 视频编辑器破解版(0)
赞(
：吐血推荐
求车pai。