無作為
不僅僅是一種態度!

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="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" rel="nofollow" href="http://www.btilnp.live/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.btilnp.live/";
// 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="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" rel="nofollow" href="http://www.btilnp.live/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.btilnp.live無作為 » wordpress文章添加圖片燈箱/暗箱功能|支持dux主題吊打各種問題

留下評論 1

  1. #1

    求車pai。

    AitLJL3個月前 (10-29)回復

無作為-不僅僅是一種態度

登錄/注冊廣告合作

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

广西风采快三