接触WordPress以来,经常在各路童鞋的网站上学习经验,无意间在七赞云逛的时候看到,七赞云跳转到外链时,有个感觉非常漂亮的跳转中转页:

Anylink外链包装美化插件是一款自动将外链转换为内链、将较长、较复杂的外链转换为样式统一的内链的Wordpress插件。同时它还提供了链接自定义功能,允许你根据个人喜好设置链接的样式。例如我们的网站有时候会需要插进一些链接如成都航院计算机工程系的官网http://www.7zan.com/campusXXX/xywmbysXXX/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等等形式。

通过上面对anylink插件的介绍,大家应该知道,anylin转换后的链接默认为 http://你的域名/goto/ab12 的方式,

给自己网站增加这样一个外链转内链页面,从用户角度来说,感觉到网站的关心,可以增加信任感;从网站优化角度来说,把外链转内链,降低了网站跳出率,有助于稳固网站权重,提升网站搜索引擎排名。

在研究七赞云的代码后发现,在插件的设置中,尝试着使用了JavaScript跳转,一看,这就不是跳转页面吗!下面是正式教程。

打开anylink插件文件夹中的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跳转页面代码:

<html lang="zh-CN"><head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>七赞云 - 安全中心</title>
    <link rel="shortcut icon" href="https://w7zanqd.oss-cn-qingdao.aliyuncs.com/wp-content/uploads/7zancom/2024/05/zanf.png" type="image/x-icon">
    <style>
        body,
        h1,
        p {
            margin: 0;
            padding: 0;
        }
        .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
        	}
        }
        a {
            text-decoration: none;
        }

        button {
            padding: 0;
            font-family: inherit;
            background: none;
            border: none;
            outline: none;
            cursor: pointer;
        }

        html {
            width: 100%;
            height: 100%;
            background-color: #eff2f5;
        }

        body {
            padding-top: 100px;
            color: #222;
            font-size: 13px;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            line-height: 1.5;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        @media (max-width: 620px) {
            body {
                font-size: 15px;
            }
        }

        .button {
            display: inline-block;
            padding: 10px 16px;
            color: #fff;
            font-size: 14px;
            line-height: 1;
            background-color: #0077d9;
            border-radius: 3px;
        }

        @media (max-width: 620px) {
            .button {
                font-size: 16px;
            }
        }

        .button:hover {
            background-color: #0070cd;
        }

        .button:active {
            background-color: #0077d9;
        }

        .link-button {
            color: #105cb6;
            font-size: 13px;
        }

        @media (max-width: 620px) {
            .link-button {
                font-size: 15px;
            }
        }

        .logo,
        .wrapper {
            margin: auto;
            padding-left: 30px;
            padding-right: 30px;
            max-width: 540px;
        }

        .wrapper {
            padding-top: 25px;
            padding-bottom: 25px;
            background-color: #f7f7f7;
            border: 0.5px ridge #babbbc;
            border-radius: 10px;
        }

        @media (max-width: 620px) {
            .logo,
            .wrapper {
                margin: 0 10px;
            }
        }

        h1 {
            margin-bottom: 12px;
            font-size: 16px;
            font-weight: 700;
            line-height: 1;
        }

        @media (max-width: 620px) {
            h1 {
                font-size: 18px;
            }
        }

        .warning {
            color: #c33;
        }

        .link {
            margin-top: 12px;
            word-wrap: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }

        .link.is-expanded {
            word-wrap: break-word;
            white-space: normal;
        }

        .actions {
            margin-top: 15px;
            padding-top: 30px;
            text-align: right;
            border-top: 1px solid #d8d8d8;
        }

        .actions .link-button + .link-button {
            margin-left: 30px;
        }

        .tip {
            position: relative;
            display: none;
            margin-top: 30px;
            padding-top: 18px;
            color: #999;
            text-align: left;
            background: #f7f7f7;
            border-top: 1px solid #d8d8d8;
            opacity: 0;
            transition: opacity .2s ease-out;
        }

        .tip.is-visible {
            opacity: 1;
        }

        .tip:after, .tip:before {
            position: absolute;
            bottom: 100%;
            right: 5em;
            content: " ";
            height: 0;
            width: 0;
            border: solid transparent;
            pointer-events: none;
        }

        .tip:after {
            margin-right: -6px;
            border-color: rgba(247, 247, 247, 0);
            border-bottom-color: #f7f7f7;
            border-width: 6px;
        }

        .tip:before {
            margin-right: -7px;
            border-color: rgba(216, 216, 216, 0);
            border-bottom-color: #d2d2d2;
            border-width: 7px;
        }
    </style>
</head>
<body>
<div class="loading">
    <div class="logo">
        <a href="https://www.7zan.com">
            <img src="https://w7zanqd.oss-cn-qingdao.aliyuncs.com/wp-content/uploads/7zancom/2024/05/an.png" width="200"  alt="七赞云">
        </a>
    </div>
    <div class="wrapper">
        <div class="content">
            <h1 style="color:#177e9e;">提示Prompt:正准备离开七赞云(7zan.com)... ...</h1>
            <p class="info">你即将访问的网站可能包含未知的安全因素,如需继续访问,请手动复制链接访问,该操作将跳转到第三方网站,请注意保护帐号和隐私信息。。</p>
            <p class="link">跳转至:<?php echo $gotoLink ?></p>
        </div>
        <div class="actions">
            <a class="button" href="javascript:history.back()">返回上页</a>
            <a class="button" style="background:red;" href="<?php echo $gotoLink ?>">继续前往</a>
        </div>
    </div>
</div>
<script>
    var showTipButton = document.querySelector('.js-show-tip');
    var tipEl = document.querySelector('.tip');
    var showTip = function () {
        tipEl.style.display = 'block';
        tipEl.offsetWidth; // force reflow
        tipEl.className = 'tip is-visible';
        return false;
    };

    var linkEl = document.querySelector('.link');
    var selectLink = function () {
        linkEl.className = 'link is-expanded';
        if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(linkEl);
            range.select();
        } else if (window.getSelection) {
            selection = window.getSelection();
            range = document.createRange();
            range.selectNodeContents(linkEl);
            selection.removeAllRanges();
            selection.addRange(range);
        }
        ;
    };

    if (window.addEventListener) {
        if (showTipButton) {
            showTipButton.addEventListener('click', showTip);
        }
        if (linkEl) {
            linkEl.addEventListener('click', selectLink);
        }
    } else {
        if (showTipButton) {
            showTipButton.attachEvent('onclick', showTip);
        }
        if (linkEl) {
            linkEl.attachEvent('onclick', selectLink);
        }
    }
</script>

</body></html>

总结两个关键点:1.跳转方式选择JavaScript跳转;2.修改re.php文件。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。