成航先森 成航先森

成都航院计算机系一个学生的个人博客

成都航空学院官网- 计算机工程系官网
 

WordPress技巧

最新文章

WordPress技巧
当前位置： 首页 » 建站分享 » WordPress技巧 » WordPress为anylink插件外链跳转添加漂亮的跳转页面

WordPress为anylink插件外链跳转添加漂亮的跳转页面

编辑：狂族晨曦 来源：WordPress技巧 日期：2016-01-23 阅读： 6,822 次 6 条评论 » 百度已收录

最后更新时间：2016-03-08

接触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文件，文件中的代码是：

<!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>

总结：1.跳转方式选择JavaScript跳转；2.修改re.php文件。

下面来看看效果，外链到先森的微博：@成航先森 (希望能关注一下，谢谢)

赞 (7)
标签：
除特别注明外，本站所有文章均为成航先森 www.capjsj.cn 原创，本文共6368个字
转载请注明出处来自https://www.capjsj.cn/wp_wanylinkcjwltztjpldtzym.html
上一篇:
下一篇:

相关文章

网站http转为https之始，从七牛到腾讯云
网站http转为https之始，从七牛到腾讯云
WordPress上传文件提示“文件是空的。请上传有内容的文件。这个错误…”
WordPress上传文件提示“文件是空的。请上传有内容的文件。这个错误…”
给WordPress版UEditor编辑器增加四个彩色美化框自定义按钮
给WordPress版UEditor编辑器增加四个彩色美化框自定义按钮
WordPress相关文章调取方式变为同标签文章随机显示
WordPress相关文章调取方式变为同标签文章随机显示
Linux开启telnet远程登录服务
Linux开启telnet远程登录服务
已有 6 位"计工"发布了激烈的评论，还有N多人围观笑而不语评论
的头像
欢迎发表评论
取消评论

表情
疑问调皮伤心抠鼻黑线微笑可爱奸笑震惊吓到了撇嘴大兵忍不住笑笑狂骂狂怒噢？鼓掌酷⊙﹏⊙b汗鄙视大哭嘿嘿

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 的头像
    阳光电脑：

    很有用。已经用上了。

    2017-03-10 12:15 回复
  2. 的头像
    绿软库：

    需要看看这个功能

    2017-11-28 05:54 回复
  3. 的头像
    清哥：

    这个插件只支持文章内容。不支持字段吧

    2023-06-05 20:45 回复
官方微信
发表评论 返回顶部