博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化

爱资源网
爱资源网
管理员
594
文章
0
粉丝
WordPress美化1 206阅读模式

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

博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化-图片1

有些朋友就想移植这个功能,网上相关的源代码很多,只是代码使用的方法不太详细,对于很多新手小白可能并不友好,借着这次博客折腾我将把使用方法尽可能地详细说明,希望能够帮助新人快速地使用上这个跳转功能。

实现 Go 页面跳转的简单原理是:以往我们跳转到其他网站是直接访问该网站的链接;使用 Go 页面跳转后,我们先访问本地的 Go 页面(也就是下面 go 文件夹下的 index.php 或直接 go.php文件)然后再跳转到相应的外链网站。

 

部署代码

①新建一个go.php文件,放置到wordpress的根目录下,在go.php里面输入以下代码

<?php 
$url = $_GET['url'];
$a = '';
if( $a==$url ) {
	$b = "";
// echo 'true';
} else {
	$b = $url;
	$b = base64_decode($b);
}
?> 
<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?url={外链地址}

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

 

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

A、文章内外链添加go跳转

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

此处为隐藏的内容
注册登录后,方可查看

B、评论者链接添加go跳转

在主题目录下的functions.php查找是否存在修改评论链接为新窗口commentauthor函数,如果存在则如下修改第8行,将$url修改为/go.php/?url=$url,其实就是在前面新增一个go跳转即可,相同的道理!

此处为隐藏的内容
发表评论并刷新,方可查看
发表评论

Ps:如果functions里面没有这个评论新窗口的函数,请自己找到评论列表输出的代码位置(可能在comments.php),然后参考修改即可(国内主题一般都会有个评论新窗口函数,自己仔细找找看)!

只要参考上述代码,修改一下替换后的链接形式即可。部署后,刷新前台文章或评论,就能看到效果了。如在使用过程中遇到问题请在下方留言。

 

跳转效果

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

效果01

博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化-图片2

效果02

博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化-图片3

效果03

博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化-图片4

效果04

博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化-图片5

效果05

博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化-图片6

效果06

博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化-图片7

效果07

博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化-图片8

效果08

博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化-图片9

如果看到其他样式的效果,可以评论区留下网站,我去试试能不能搬过来

 

相关插件

有些插件也能实现这个外链跳转

1. Simple URLs插件

设置简单,只需要要后台设置好后缀和目标页面即可

2. Link-Hopper插件

跳转链接的基础地址可以随意设置

3. Pretty Link Lite插件

后台功能十分强大的,还有Pro版本,不过要money的。用它完全可以做一个短网址,像t.cn和bit.ly一样。

4. Affiliate Link Cloaking插件

推广链接转换工具,用来推广你的淘宝客等要隐藏的链接,可以使用它,附带统计功能。

5. WP No External Links插件

这个一款可以自动将博客内的外部链接转成内部链接,如http://www.baidu.com,则显示为http://www.orwei.com/goto/http://www.baidu.com,可以尝试使用这个插件防权重丢失的。

6. Go Codes插件

和前面的wordpress外链跳转链接插件设置一样简单,带统计功能。

 

插件具体使用与否可以自己尝试,这里不做太多解释,也不对插件对错负责。

 

下载信息 资源名称博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化 应用平台WordPress
最近更新2023-5-7
下载地址

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!欢迎打赏!

 
  • 版权声明 1、本网站名称:爱资源网
    本站永久网址:https://www.izywang.com
    2、如果您喜欢本站,点击这儿 不花一分钱捐赠本站

    这些信息可能会帮助到你: 下载帮助 | 报毒说明 | 进站必看

    3、本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
    附:二00二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
    4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
    6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

  • 转载请务必保留本文链接:博客添加go跳转效果的详细教程(附跳转代码)—— WordPress美化https://www.izywang.com/181.html

    • sm0073
      sm0073 0

      我来看看

    匿名

    发表评论

    匿名网友

    拖动滑块以完成验证