• 歡迎訪問奇跡の海網站,本站不上傳任何資源,所有資源均來自于網絡,歡迎加入奇跡の海~!奇跡の海-WordPress QQ群
  • 本站下載資源為網絡上收集整理而來,并且以計算機技術研究交流為目的,版權歸原作者所有,僅供大家參考,學習,不存在任何商業目的與商業用途.
  • 本站系統鏡像均來自于官方原版,ed2k可視為P2P下載鏈接。所有操作系統默認均為試用版,如有正版密鑰可以有效激活,本站不提供任何激活和相關服務。

WordPress為anylink插件外鏈跳轉添加漂亮的跳轉頁面

WP插件 奇跡の海 2年前 (2017-09-04) 722次瀏覽 已收錄 0個評論 掃描二維碼

WordPress為anylink插件外鏈跳轉添加漂亮的跳轉頁面

anylink插件

這是dudo博客原創的第一個WordPress插件:Anylink。它是一個鏈接包裝和美化插件,可以把外鏈轉換成內鏈,同時又能防止網站權重過度向外傳遞,對于網站SEO來說很有好處。Anylink既提供了307、301等跳轉方式,這和你直接使用外鏈沒有任何區別;也提供了Javascript跳轉方式,這則可以阻止權重對外傳遞。同時Anylink還可允許你自定義鏈接樣式等功能,可以滿足大部分wordpress網站的需要。

Anylink外鏈包裝美化插件是一款自動將外鏈轉換為內鏈、將較長、較復雜的外鏈轉換為樣式統一的內鏈的WordPress插件。同時它還提供了鏈接自定義功能,允許你根據個人喜好設置鏈接的樣式。例如我們的網站有時候會需要插進一些鏈接如成都航院計算機工程系的官網http://www.cap.edu.cn/campus/xywmbys/jsjgcx/,這樣的鏈接既長又沒有意義,anylink就是針對這種情況設計的一款插件,它會幫你轉換成 http://你的域名/goto/ab12 的形式,從而使鏈接變得短小整齊。主要功能有:

1. 自動提取外鏈內轉換。Anylink會自動提取文章中的外鏈并進行轉換,不需要進行額外操作。

2. 不修改任何原始數據。Anylink不會修改任何wordpress數據,這很好地保護了你的數據安全。任何情況下刪除該插件均不會留下痕跡。

3. 允許自定義鏈接樣式。默認情況下轉換后的鏈接樣式為 http://你的域名/goto/ab12 的形式,你可修改跳轉目錄,把goto修改為任何可用形式。

4. 允許自定義slug樣式。slug是指鏈接后面的小尾巴,你可修改它的樣式,如它的長度、組成等等,默認為4位的數字和字母組合。

5. 通話自定義跳轉樣式。默認情況下使用了301永久轉移跳轉http狀態碼,這和你們直接使用一個鏈接是沒有任何區別的,也就是說anylink此種情況下只是修改了鏈接的樣式,其它的均未作修改,比如SEO信息等。不過你可以設置為307、Javascript等等形式。

插件改造經過

張戈博客的教程中(地址:分享兩種外鏈跳轉方法,可避免權重流失)提出了兩中外鏈美化方式。第一種是:http://www.***.com/go.php?http://www.******.com?的方式;第二種是:http://www.***.com/go/?url=http://www.***.com/?的方式。

通過上面對anylink插件的介紹,大家應該知道,anylin轉換后的鏈接默認為?http://你的域名/goto/ab12 的方式,所以我覺得張戈博客的第二種美化方式比較適合。

根據教程說的,我在網站根目錄建了一個/goto/目錄,并上傳了一個index.php文件進去。index.php的內容大致都是張戈分享的go.php的代碼,只是將之前的外鏈獲取方式改成了獲取后四位字母的方式,也就是獲取goto/后面生成的小尾巴。

不會用正則,所以獲取小尾巴的代碼花了先森很長時間,但是最后鼓搗出來之后發現,這樣的方式點擊外鏈后還是會直接跳轉過去(先森使用的是307跳轉),所以并沒有什么卵用。

然而在先森快要放棄的時候,發現了轉機。

為anylink外鏈添加跳轉頁面

先森在研究張戈的代碼無果后,轉而研究插件本身,在插件的設置中,嘗試著使用了JavaScript跳轉,一看,這就不是跳轉頁面嗎!下面是正式教程。

打開插件文件夾中的re.php文件,文件中的代碼是:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    setInterval( function(){top.location = "<?php echo $gotoLink ?>";} , 3000)
</script>
</head>
<body>
正在為您跳轉到(Now we're relocating you to):
<?php echo $gotoLink; ?>
</body>
</html>

代碼非常簡單,但這就是anylink的跳轉頁面。再來看張戈提供的go.php跳轉頁面代碼:

<?php 
//$t_url=$_GET['url']; //此代碼無法支持帶請求參數的目的地址,已棄用!
$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]); //這個支持
if(!empty($t_url)) {
    preg_match('/(http|https):\/\//',$t_url,$matches);
    if($matches){
        $url=$t_url;
        $title='頁面加載中,請稍候...';
    } else {
        preg_match('/\./i',$t_url,$matche);
        if($matche){
            $url='http://'.$t_url;
            $title='頁面加載中,請稍候...';
        } else {
            $url='https://zhangge.net/';
            $title='參數錯誤,正在返回首頁...';
        }
    }
} else {
    $title='參數缺失,正在返回首頁...';
    $url='https://zhangge.net/';
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="1;url='<?php echo $url;?>';">
<title><?php echo $title;?></title>
<style>
body{background:#000}.loading{-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-o-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.spinner-wrapper{position:absolute;top:0;left:0;z-index:300;height:100%;min-width:100%;min-height:100%;background:rgba(255,255,255,0.93)}.spinner-text{position:absolute;top:50%;left:50%;margin-left:-90px;margin-top: 2px;color:#BBB;letter-spacing:1px;font-weight:700;font-size:36px;font-family:Arial}.spinner{position:absolute;top:50%;left:50%;display:block;margin-left:-160px;width:1px;height:1px;border:25px solid rgba(100,100,100,0.2);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(720deg) scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg) scale(1)}50%{-moz-transform:rotate(720deg) scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg) scale(1)}50%{-o-transform:rotate(720deg) scale(0.6)}}@keyframes spin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(720deg) scale(0.6)}}
</style>
</head>
<body>
<div class="loading">
  <div class="spinner-wrapper">
    <span class="spinner-text">頁面加載中,請稍候...</span>
    <span class="spinner"></span>
  </div>
</div>
</body>
</html>

修改起來也很簡單,re.php文件中的代碼基本沒用,只需要將其中的”$gotoLink”轉嫁到張戈的go.php代碼中即可,將以下代碼放進re.php:

<?php 
  $url = $gotoLink;
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="1;url='<?php echo $url;?>';">
<title>頁面加載中,請稍候..</title>
<style>
body{background:#000}.loading{-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-o-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.spinner-wrapper{position:absolute;top:0;left:0;z-index:300;height:100%;min-width:100%;min-height:100%;background:rgba(255,255,255,0.93)}.spinner-text{position:absolute;top:50%;left:50%;margin-left:-90px;margin-top: 2px;color:#BBB;letter-spacing:1px;font-weight:700;font-size:36px;font-family:Arial}.spinner{position:absolute;top:50%;left:50%;display:block;margin-left:-160px;width:1px;height:1px;border:25px solid rgba(100,100,100,0.2);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(720deg) scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg) scale(1)}50%{-moz-transform:rotate(720deg) scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg) scale(1)}50%{-o-transform:rotate(720deg) scale(0.6)}}@keyframes spin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(720deg) scale(0.6)}}
</style>
</head>
<body>
<div class="loading">
  <div class="spinner-wrapper">
    <span class="spinner-text">頁面加載中,請稍候...</span>
    <span class="spinner"></span>
  </div>
</div>
</body>
</html>

轉載請注明出處來自:成航先森


版權聲明:本站所有文章和資源使用CC BY-NC-SA 4.0協議授權發布 , 轉載應當以相同方式注明文章來自“SeaOMC.COM->WordPress為anylink插件外鏈跳轉添加漂亮的跳轉頁面!在下邊可以分享本文哦!
喜歡 (0)
[]
分享 (0)
奇跡の海
關于作者:
一個WordPress菜鳥!
發表我的評論
取消評論

表情 貼圖 加粗 刪除線 居中 斜體 簽到

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
中国福利彩票36选7开奖结果