无作为
不仅仅是一种态度!

wordpress文章添加图片灯箱/暗箱功能|支持dux主题吊打各种问题

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

wordpress文章图片暗箱功能

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

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

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

效果测试图

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

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

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

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

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

View all posts in 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.wuzuowei.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.wuzuowei.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.wuzuowei.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

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

历史上的今天:
赞(14) 打赏
所有免费资源、福利、电影、破解软件未经允许不得转载:www.wuzuowei.net无作为 » wordpress文章添加图片灯箱/暗箱功能|支持dux主题吊打各种问题

留下评论 1

  1. #1

    求车pai。

    AitLJL3个月前 (10-29)回复

无作为-不仅仅是一种态度

登录/注册广告合作

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏