wordpress给文章添加图片灯箱/暗箱功能，点击图片弹出|支持dux最新主题

折腾了三个小时，终于把所有有关于wordpress图片灯箱或者暗箱特效的问题全部搞定了，支持dux主题以及各种wordpress主题。wordpress文章图片暗箱功能

增加这个功能大家可以通过代码或者插件的形式，都可以解决，不过麻烦很多，比如很多主题之家添加插件，无效果。

经过几个小时的折腾，缘聚岛完美解决了各种灯箱代码教程还有插件无效的问题。

这里以dux为例，大家都知道dux代码比较整齐，而修改dux主题麻烦就在于它把代码都写到一起了，试用其他大部分主题的教程dux不一定适用。

问题：
1、主题不兼容，直接使用网上教程无效，安装插件无效。
2、修改过主题，比如给主题添加了外链自动go转跳的功能，导致图片灯箱功能失效。

解答：
不管是什么问题，我们放心过去的总总，直接开始教程，没有任何冲突！

给文章页增加图片Fancybox灯箱效果/支持放大自动播放等

教程分两种，一种是没修改过主题的，另一种是给主题添加了外链转跳功能的。

这里直接推荐方法二，因为你现在不修改难保以后不修改主题，所以方法二统一搞定。

<!-- 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. 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>

教程结束，大家自己刷新网站，点开图片就会有灯箱效果了。