js外链跳转_WordPress为anylink插件外链跳转添加漂亮的跳转页面
接觸WordPress以來，經常在各路大神的網站上學習經驗，無意間在張戈博客逛的時候看到，張戈博客跳轉到外鏈時，有個感覺非常舒服的跳轉頁面：
通過一番尋找，發現張戈也將教程為大家分享了。因為是針對外鏈，所以還需要在function.php中添加代碼。但是先森嘗試后感覺已經發布的文章中的內頁好像并不會被自動添加外鏈，所以就放棄使用張戈提供的外鏈跳轉代碼。但是又不想放棄，所以就想將張戈的跳轉頁面與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文件，文件中的代碼是：
html>
setInterval(?function(){top.location?=?"<?php ?echo?$gotoLink??>";}?,?3000)
正在為您跳轉到(Now?we're?relocating?you?to)：
代碼非常簡單，但這就是anylink的跳轉頁面。再來看張戈提供的go.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/';
}
?>
';">
<?php ?echo?$title;?>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)}}
頁面加載中,請稍候...
修改起來也很簡單，re.php文件中的代碼基本沒用，只需要將其中的"$gotoLink"轉嫁到張戈的go.php代碼中即可，將以下代碼放進re.php：
$url?=?$gotoLink;
?>
';">
頁面加載中,請稍候..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)}}
頁面加載中,請稍候...
總結：1.跳轉方式選擇JavaScript跳轉；2.修改re.php文件。
下面來看看效果，外鏈到先森的微博：@成航先森?(希望能關注一下，謝謝)
除特別注明外，本站所有文章均為成航先森 www.capjsj.cn原創，本文共6368個字
轉載請注明出處來自https://www.capjsj.cn/wp_wanylinkcjwltztjpldtzym.html
總結
以上是生活随笔為你收集整理的js外链跳转_WordPress为anylink插件外链跳转添加漂亮的跳转页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Lua5.3 与C交互学习(一)
- 下一篇： 充分利用 cpu_如何充分利用云