WordPress為anylink插件外鏈跳轉(zhuǎn)添加漂亮的跳轉(zhuǎn)頁(yè)面
編輯：狂族晨曦 來(lái)源：WordPress技巧 日期：2016-01-23 閱讀： 7,663 次 6 條評(píng)論 » 百度已收錄
接觸WordPress以來(lái)，經(jīng)常在各路大神的網(wǎng)站上學(xué)習(xí)經(jīng)驗(yàn)，無(wú)意間在張戈博客逛的時(shí)候看到，張戈博客跳轉(zhuǎn)到外鏈時(shí)，有個(gè)感覺(jué)非常舒服的跳轉(zhuǎn)頁(yè)面：
通過(guò)一番尋找，發(fā)現(xiàn)張戈也將教程為大家分享了。因?yàn)槭轻槍?duì)外鏈，所以還需要在function.php中添加代碼。但是先森嘗試后感覺(jué)已經(jīng)發(fā)布的文章中的內(nèi)頁(yè)好像并不會(huì)被自動(dòng)添加外鏈，所以就放棄使用張戈提供的外鏈跳轉(zhuǎn)代碼。但是又不想放棄，所以就想將張戈的跳轉(zhuǎn)頁(yè)面與anylink插件生成的跳轉(zhuǎn)鏈接相結(jié)合。
anylink插件
這是dudo博客原創(chuàng)的第一個(gè)WordPress插件：Anylink。它是一個(gè)鏈接包裝和美化插件，可以把外鏈轉(zhuǎn)換成內(nèi)鏈，同時(shí)又能防止網(wǎng)站權(quán)重過(guò)度向外傳遞，對(duì)于網(wǎng)站SEO來(lái)說(shuō)很有好處。Anylink既提供了307、301等跳轉(zhuǎn)方式，這和你直接使用外鏈沒(méi)有任何區(qū)別；也提供了Javascript跳轉(zhuǎn)方式，這則可以阻止權(quán)重對(duì)外傳遞。同時(shí)Anylink還可允許你自定義鏈接樣式等功能，可以滿(mǎn)足大部分wordpress網(wǎng)站的需要。
Anylink外鏈包裝美化插件是一款自動(dòng)將外鏈轉(zhuǎn)換為內(nèi)鏈、將較長(zhǎng)、較復(fù)雜的外鏈轉(zhuǎn)換為樣式統(tǒng)一的內(nèi)鏈的Wordpress插件。同時(shí)它還提供了鏈接自定義功能，允許你根據(jù)個(gè)人喜好設(shè)置鏈接的樣式。例如我們的網(wǎng)站有時(shí)候會(huì)需要插進(jìn)一些鏈接如成都航院計(jì)算機(jī)工程系的官網(wǎng)http://www.cap.edu.cn/campus/xywmbys/jsjgcx/，這樣的鏈接既長(zhǎng)又沒(méi)有意義，anylink就是針對(duì)這種情況設(shè)計(jì)的一款插件，它會(huì)幫你轉(zhuǎn)換成 http://你的域名/goto/ab12 的形式，從而使鏈接變得短小整齊。主要功能有：
1. 自動(dòng)提取外鏈內(nèi)轉(zhuǎn)換。Anylink會(huì)自動(dòng)提取文章中的外鏈并進(jìn)行轉(zhuǎn)換，不需要進(jìn)行額外操作。
2. 不修改任何原始數(shù)據(jù)。Anylink不會(huì)修改任何wordpress數(shù)據(jù)，這很好地保護(hù)了你的數(shù)據(jù)安全。任何情況下刪除該插件均不會(huì)留下痕跡。
3. 允許自定義鏈接樣式。默認(rèn)情況下轉(zhuǎn)換后的鏈接樣式為 http://你的域名/goto/ab12 的形式，你可修改跳轉(zhuǎn)目錄，把goto修改為任何可用形式。
4. 允許自定義slug樣式。slug是指鏈接后面的小尾巴，你可修改它的樣式，如它的長(zhǎng)度、組成等等，默認(rèn)為4位的數(shù)字和字母組合。
5. 通話(huà)自定義跳轉(zhuǎn)樣式。默認(rèn)情況下使用了301永久轉(zhuǎn)移跳轉(zhuǎn)http狀態(tài)碼，這和你們直接使用一個(gè)鏈接是沒(méi)有任何區(qū)別的，也就是說(shuō)anylink此種情況下只是修改了鏈接的樣式，其它的均未作修改，比如SEO信息等。不過(guò)你可以設(shè)置為307、Javascript等等形式。
插件改造經(jīng)過(guò)
張戈博客的教程中（地址：分享兩種外鏈跳轉(zhuǎn)方法，可避免權(quán)重流失）提出了兩中外鏈美化方式。第一種是：http://www.***.com/go.php?http://www.******.com 的方式；第二種是：http://www.***.com/go/?url=http://www.***.com/ 的方式。
通過(guò)上面對(duì)anylink插件的介紹，大家應(yīng)該知道，anylin轉(zhuǎn)換后的鏈接默認(rèn)為 http://你的域名/goto/ab12 的方式，所以我覺(jué)得張戈博客的第二種美化方式比較適合。
根據(jù)教程說(shuō)的，我在網(wǎng)站根目錄建了一個(gè)/goto/目錄，并上傳了一個(gè)index.php文件進(jìn)去。index.php的內(nèi)容大致都是張戈分享的go.php的代碼，只是將之前的外鏈獲取方式改成了獲取后四位字母的方式，也就是獲取goto/后面生成的小尾巴。
不會(huì)用正則，所以獲取小尾巴的代碼花了先森很長(zhǎng)時(shí)間，但是最后鼓搗出來(lái)之后發(fā)現(xiàn)，這樣的方式點(diǎn)擊外鏈后還是會(huì)直接跳轉(zhuǎn)過(guò)去（先森使用的是307跳轉(zhuǎn)），所以并沒(méi)有什么卵用。
然而在先森快要放棄的時(shí)候，發(fā)現(xiàn)了轉(zhuǎn)機(jī)。
為anylink外鏈添加跳轉(zhuǎn)頁(yè)面
先森在研究張戈的代碼無(wú)果后，轉(zhuǎn)而研究插件本身，在插件的設(shè)置中，嘗試著使用了JavaScript跳轉(zhuǎn)，一看，這就不是跳轉(zhuǎn)頁(yè)面嗎!下面是正式教程。
打開(kāi)插件文件夾中的re.php文件，文件中的代碼是：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
setInterval( function(){top.location = "<?php echo $gotoLink ?>";} , 3000)
</script>
</head>
<body>
正在為您跳轉(zhuǎn)到(Now we're relocating you to)：
<?php echo $gotoLink; ?>
</body>
</html>
代碼非常簡(jiǎn)單，但這就是anylink的跳轉(zhuǎn)頁(yè)面。再來(lái)看張戈提供的go.php跳轉(zhuǎn)頁(yè)面代碼：
<?php
//$t_url=$_GET['url']; //此代碼無(wú)法支持帶請(qǐng)求參數(shù)的目的地址，已棄用！
$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]); //這個(gè)支持
if(!empty($t_url)) {
preg_match('/(http|https):\/\//',$t_url,$matches);
if($matches){
$url=$t_url;
$title='頁(yè)面加載中,請(qǐng)稍候...';
} else {
preg_match('/\./i',$t_url,$matche);
if($matche){
$url='http://'.$t_url;
$title='頁(yè)面加載中,請(qǐng)稍候...';
} else {
$url='https://zhangge.net/';
$title='參數(shù)錯(cuò)誤，正在返回首頁(yè)...';
}
}
} else {
$title='參數(shù)缺失，正在返回首頁(yè)...';
$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">頁(yè)面加載中,請(qǐng)稍候...</span>
<span class="spinner"></span>
</div>
</div>
</body>
</html>
修改起來(lái)也很簡(jiǎn)單，re.php文件中的代碼基本沒(méi)用，只需要將其中的"$gotoLink"轉(zhuǎn)嫁到張戈的go.php代碼中即可，將以下代碼放進(jìn)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>頁(yè)面加載中,請(qǐng)稍候..</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">頁(yè)面加載中,請(qǐng)稍候...</span>
<span class="spinner"></span>
</div>
</div>
</body>
</html>
總結(jié)：1.跳轉(zhuǎn)方式選擇JavaScript跳轉(zhuǎn)；2.修改re.php文件。
下面來(lái)看看效果，外鏈到先森的微博：@成航先森 (希望能關(guān)注一下，謝謝)
轉(zhuǎn)載請(qǐng)注明出處來(lái)自http://www.lzhcjx.cn/wp_wanylinkcjwltztjpldtzym.html
川公網(wǎng)安備 51011202000104號(hào)
很有用。已經(jīng)用上了。
@陽(yáng)光電腦： 你好 你的怎么加上target=”_blank”的 我找半天 找不到
@WordPress： 如果你問(wèn)的是本站的話(huà)，可以參考下另一篇文章的下半部分《解決網(wǎng)頁(yè)搜索框無(wú)法使用手機(jī)輸入法中的“搜索”按鈕的問(wèn)題》
需要看看這個(gè)功能
這個(gè)插件只支持文章內(nèi)容。不支持字段吧