WordPress添加GO跳转效果详细教程(附跳转代码)

王小优

231
文章

0
评论

2015年7月25日评论 4,251 10647字阅读35分29秒

摘要

经常看到一些博客点击外链跳转到其他网站上的时候都会有一个跳转页面，很是美观。据说既有利于SEO优化，又可保护站点避免权重流失，不过个人只是觉得好看、高逼格便加上了。

王小优博客用的是美化后的知更鸟Begin主题GO跳转，但是别的主题不一定有，所以有些朋友就想移植这个功能，网上相关的源代码很多，只是代码使用的方法不太详细，对于很多新手小白可能并不友好，借着这次博客折腾我将把使用方法尽可能地详细说明，希望能够帮助新人快速地使用上这个跳转功能。

WordPress添加GO跳转效果详细教程(附跳转代码) – WordPress教程

代码部署

1、新建一个go.php文件，放置到WordPress的网站根目录下，在go.php文件中输入以下代码：

这是知更鸟Begin主题集成的go.php代码：

1. <?php
2. // https://www.wangxiaoyou.com

$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]);
if(!emptyempty($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://www.wangxiaoyou.com';
$title='参数错误，正在返回首页...';
}
}
} else {
$title='参数缺失，正在返回首页...';
$url='https://www.wangxiaoyou.com';
}
?>
<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>

这是我用的美化后的go.php代码：

此处为隐藏的内容

发表评论并刷新，方可查看

使用方法

2、将代码复制到go.php文件，保存，则外链跳转形式为： {网站地址}/go.php?url={外链地址}

使用：在添加外链的时候，只要给外链加上统一的跳转前缀：http://网站地址/go.php?url=外链地址即可。

外链方法的使用是需要在手动添加外链的，同时跳转样式可以自行修改。但是这样每次添加外链都手动添加的话太麻烦，使用下面的代码既可以实现外链自动添加http://网站地址/go.php?url=外链地址

文章内外链添加GO跳转

在主题目录下的functions.php文件中新增如下函数，即可将文章中的外链替换为GO跳转的形式：

此处为隐藏的内容

发表评论并刷新，方可查看

评论者链接添加GO跳转

在主题目录下的functions.php文件中新增如下函数，即可将文章中的外链替换为GO跳转的形式：

此处为隐藏的内容

发表评论并刷新，方可查看

只要参考上述代码，修改一下替换后的链接形式即可。部署后，刷新前台文章或评论，就能看到效果了。

此方法博主已测试，如在使用过程中遇到问题请在下方留言联系我解决。

一般情况下我们将站点的这两处链接替换掉就可以了，当然如果你有其他需要只需要想办法将原有外链替换为带有http://网站地址/go.php?url=外链的地址就可以了。为了避免GO页面文件复制粘贴过程中出现错误，下面给大家提供3种源文件的下载。

效果图片

WordPress添加GO跳转效果详细教程(附跳转代码) – WordPress教程

效果链接

https://www.wangxiaoyou.com

WordPress添加GO跳转效果详细教程(附跳转代码) – WordPress教程