纯代码实现WordPress文章页和评论自动内链跳转

虫子君
虫子君
虫子君
382
文章
166
评论
2019.5. 800:00:33 2 856 10001字阅读33分20秒

记得很久以前在张戈的博客中看到一个可以纯代码实现内链跳转的效果,该效果可以实现文章内的外部链接和评论区的外链都能够自动转换成内链,并可以实现跳转效果。虫子君那时候觉得简直不要太好,不过安装张戈的方式实现了很久都没能够正常的实现出来,再后来就购买了begin主题,用过知更鸟begin主题都知道,这个主题其实很早以前就实现了外链自动转内链的效果,并可以自动增加“go”跳转。为此,虫子君还苦心研究了一段时间,发现最后还不如用插件实现来得简单。

纯代码实现WordPress文章页和评论自动内链跳转
优化知更鸟beginlts主题的go跳转页面更有特效感

鸟叔的知更鸟主题的go跳转页面,使用的是张戈的代码,这个是很久以前我就知道的事情,用的时间久了,总是觉得鸟叔的这个跳转好丑,所幸我自己就做了一个。

点我查看

现在看起来曾经的自己是多么的傻逼,其实花点时间学习一下PHP,也并非是不可能的,毕竟现在自己的前端已经搁浅。

今天在柒比贰群里面的时候,有个大神的网站,虫子君一看就喜欢上了其中的部分内容,虫子君也是觉得有必要学习一下。其中一个非常好看就的内容就是不用插件也能噶实现非常的漂亮的外链跳转,不过具体虫子君自己还没有实验,毕竟虫子君的主题使用的begin,这种事情鸟叔早就已经实现的非常的好,并且现在外链还实现了代码的加密,相比以前具有更加好的隐蔽性。

那么如何使用代码实现这样子的功能呢,相信对于今天来说,这个实现的方法网上也一定有许多了。对于使用PHP来实现的话,还是非常的简单的,不过对于代码的质量咋样虫子君就不得而知了,大家如果喜欢的话,不妨自己本地测试一下对PHP的影响如何。

这个跳转的效果一共有两个方法,第一个是现在比较流行的一种,会自动的播报时间,在许多的网站都可以看到。该效果有着一些可自定义的地方,比如这一些文本,各位也可以自己发挥足够大的脑洞来自己有创作,相信一句好的梗能够让你的跳转更出色!

比如4秒,页面加载中,请稍等这些文本您都可以自定义,如果虫子君觉得就可以写成,大爷稍安,奴才即刻为您起航!

跳转效果1代码如下:(将以下代码,新建一个go.php文件粘贴进去保存即可)。

展开

<?php 
// wordpress页面跳转效果一

$cars = array(
    array("qcloud",'http://www.qcloud.com/redirect.php?redirect=1001&cps_key=8558139aea55e95d71f488081ba44577'),
    array("upyun",'https://www.upyun.com/league'),
    array("trustutn",'http://c.trustutn.org/s/aeink.com'),
    array("gfvps",'https://www.gfvps.cn/page.aspx?c=referral&u=9023'),
    array("360scan",'http://webscan.360.cn/index/checkwebsite/url/www.aeink.com')
 );

if(strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64")) {
    @header("HTTP/1.1 414 Request-URI Too Long");
    @header("Status: 414 Request-URI Too Long");
    @header("Connection: Close");
    @exit;
}
//通过QUERY_STRING取得完整的传入数据,然后取得url=之后的所有值,兼容性更好
$t_url = htmlspecialchars(preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]));

//此处可以自定义一些特别的外链,不需要可以删除以下5行
foreach($cars as $k=>$val){
    if($t_url==$val[0] ) {
        $t_url = $val[1];
        $t_vip = 1;
    }
}
 
//数据处理
if(!empty($t_url)) {
    //判断取值是否加密
    if ($t_url == base64_encode(base64_decode($t_url))) {
        $t_url = base64_decode($t_url);
    }
 //对取值进行网址校验和判断
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i',$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 = 'http://'.$_SERVER['HTTP_HOST'];
        $title='参数错误,正在返回首页...';
    }
}
} else {
    $title = '参数缺失,正在返回首页...';
    $url = 'http://'.$_SERVER['HTTP_HOST'];
}
?>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta name="robots" content="noindex, nofollow" />
    <noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
    <meta charset="UTF-8">
<!--[if IE 8]>
    <style>
        .ie8 .alert-circle,.ie8 .alert-footer{display:none}.ie8 .alert-box{padding-top:75px}.ie8 .alert-sec-text{top:45px}
    </style>
<![endif]-->

    <title><?php echo $title;?></title>
    <style>
        body{margin:0;padding:0;background:#E6EAEB;font-family:Arial,'微软雅黑','宋体',sans-serif}.main{position:absolute;left:calc(50% - 200px);top:calc(50% - 13em)}.alert-box{display:none;position:relative;margin:auto;padding:180px 85px 22px;border-radius:10px 10px 0 0;background:#FFF;box-shadow:5px 9px 17px rgba(102,102,102,.75);width:286px;color:#FFF;text-align:center}.alert-box p{margin:0}.alert-circle{position:absolute;top:-50px;left:111px}.alert-sec-circle{stroke-dashoffset:0;stroke-dasharray:735;transition:stroke-dashoffset 1s linear}.alert-sec-text{position:absolute;top:11px;left:190px;width:76px;color:#000;font-size:68px}.alert-sec-unit{font-size:34px}.alert-body{margin:35px 0}.alert-head{color:#242424;font-size:28px}.alert-concent{margin:25px 0 14px;color:#7B7B7B;font-size:18px}.alert-concent p{line-height:27px}.alert-btn{display:block;border-radius:10px;background-color:#4AB0F7;height:55px;line-height:55px;width:286px;color:#FFF;font-size:20px;text-decoration:none;letter-spacing:2px}.alert-btn:hover{background-color:#6BC2FF}.alert-footer{margin:0 auto;height:42px;width:120px}.alert-footer-icon{float:left}.alert-footer-text{float:left;border-left:2px solid #EEE;padding:3px 0 0 5px;height:40px;color:#0B85CC;font-size:12px;text-align:left}.alert-footer-text p{color:#7A7A7A;font-size:22px;line-height:18px}
    </style>
</head>
<body class="ie8" style="">
<div class="main">
    <div id="js-alert-box" class="alert-box" style="display:block">
        <svg class="alert-circle" width="234" height="234"><circle cx="117" cy="117" r="108" fill="#FFF" stroke="#43AEFA" stroke-width="17"></circle><circle id="js-sec-circle" class="alert-sec-circle" cx="117" cy="117" r="108" fill="transparent" stroke="#F4F1F1" stroke-width="18" transform="rotate(-90 117 117)" style="stroke-dashoffset:-514px"></circle><text class="alert-sec-unit" x="100" y="172" fill="#BDBDBD">秒</text></svg>
        <div id="js-sec-text" class="alert-sec-text">
        3
        </div>
        <div class="alert-body">
            <div id="js-alert-head" class="alert-head">
            <?php echo $title;?>
            </div>
            <div class="alert-concent">
            <p>一万年太久,只争朝夕</p>
            </div>
            <a id="js-alert-btn" class="alert-btn" href="<?php echo $url;?>">立即前往</a>
        </div>
        <div class="alert-footer clearfix">
            <svg width="46px" height="42px" class="alert-footer-icon"><circle fill-rule="evenodd" clip-rule="evenodd" fill="#7B7B7B" stroke="#DEDFE0" stroke-width="2" stroke-miterlimit="10" cx="21.917" cy="21.25" r="17"></circle><path fill="#FFF" d="M22.907,27.83h-1.98l0.3-2.92c-0.37-0.22-0.61-0.63-0.61-1.1c0-0.71,0.58-1.29,1.3-1.29s1.3,0.58,1.3,1.29 c0,0.47-0.24,0.88-0.61,1.1L22.907,27.83z M18.327,17.51c0-1.98,1.61-3.59,3.59-3.59s3.59,1.61,3.59,3.59v2.59h-7.18V17.51z M27.687,20.1v-2.59c0-3.18-2.59-5.76-5.77-5.76s-5.76,2.58-5.76,5.76v2.59h-1.24v10.65h14V20.1H27.687z"></path><circle fill-rule="evenodd" clip-rule="evenodd" fill="#FEFEFE" cx="35.417" cy="10.75" r="6.5"></circle><polygon fill="#7B7B7B" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="35.417,12.16 32.797,9.03 31.917,10.07 35.417,14.25 42.917,5.29 42.037,4.25 "></polygon></svg>
            <div class="alert-footer-text">
                <p>secure</p>安全加密
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
function alertSet(e) {
    document.getElementById("js-alert-box").style.display = "block", document.getElementById("js-alert-head").innerHTML = e;
    var t = 5,
        n = document.getElementById("js-sec-circle");
    document.getElementById("js-sec-text").innerHTML = t, setInterval(function() {
        //禁止其他网站调用此跳转
        //var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
        //if (!MyHOST.test(document.referrer)) {
        // location.rel="external nofollow" target="_blank" href="https://chonzi.com/wp-content/themes/begin/go.php?url=aHR0cDovLw==" + MyHOST;
        //}
        if (0 == t) location.href = "<?php echo $url;?>";
        else {
            t -= 1, document.getElementById("js-sec-text").innerHTML = t;
            var e = Math.round(t / 5 * 735);
            n.style.strokeDashoffset = e - 735
        }
    }, 970)
}
</script>
<script>alertSet("<?php echo $title;?>");</script>
</body>
</html>

相比效果1,效果2就显得简单的多了,一个蓝色的背景,然后简洁的就是一个圆圈。记得以前虫子君的博客就是这个样式的跳转,不过经过这么长时间的发酵,鸟叔早就已经更换了不少的地方。自然曾经的许多鸟叔认为不好的地方也都是统统撤换。

跳转效果2代码如下:(将以下代码,新建一个go.php文件粘贴进去保存即可)。

展开

<?php 
// wordpress页面跳转效果二
$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 {
		$title='加载中...';
		echo "<script>setTimeout(function(){window.opener=null;window.close();}, 3000);</script>";
	}
}
?>

<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 type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline
}

body {
	background: #3498db;
}

#loader-container {
	width: 188px;
	height: 188px;
	color: white;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	border: 5px solid #3498db;
	border-radius: 50%;
	-webkit-animation: borderScale 1s infinite ease-in-out;
	animation: borderScale 1s infinite ease-in-out;
}

#loadingText {
	font-family: 'Raleway', sans-serif;
	font-size: 1.4em;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}

@-webkit-keyframes borderScale {
	0% {
		border: 5px solid white;
	}

	50% {
		border: 25px solid #3498db;
	}

	100% {
		border: 5px solid white;
	}
}

@keyframes borderScale {
	0% {
		border: 5px solid white;
	}

	50% {
		border: 25px solid #3498db;
	}

	100% {
		border: 5px solid white;
	}
}
</style>
</head>
<body>
<div id="loader-container"><p id="loadingText">页面加载中...</p></div>

</body>
</html>

教程:将上面的两个效果的其中一个,您复制到本地,然后新建一个go.php文件,将代码粘贴进入之后,直接将“go.php”文件丢到你主题的根目录。如虫子君主题文件夹名称是begin,那么就是将go.php文件直接丢到这个文件夹里面就好,不要放到其他文件夹。

既然已经添加了实际的操作代码了,那余下的自然是给自己的WordPress主题,增加这样的功能。打开你主题的function.php文件,给您的wordpress增加对应的功能。

直接将以下代码放入到主题函数文件(function.php)最后面即可。

展开

function loper_content_nofollow($content){
preg_match_all('/<a(.*?)href="(.*?)"(.*?)>/',$content,$matches);
if($matches){
foreach($matches[2] as $val){
if(strpos($val,'://')!==false && strpos($val,home_url())===false && !preg_match('/\.(jpg|jepg|png|ico|bmp|gif|tiff)/i',$val)){
$content=str_replace("href=\"$val\"", "href=\"".get_stylesheet_directory_uri()."/go.php?url=$val\" ",$content);   //根据go文件的位置调整
}
}
}
return $content;
}
add_filter('the_content','loper_content_nofollow',999);

以上给主题添加的功能就是可以将文章以及页面的外链都自动转换为内链,并添加跳转的效果。不过或许您会意犹未尽,毕竟还有评论区的外部链接呢,很多好朋友的博客都是有着许多志同道合的好朋友在一起互踩的,所以不由的会添加上自己网站的链接。

就需要再在function.php文件(函数模板)增加一个针对评论区的的外部链接跳转的功能。毕竟网站死了一茬又一茬的,所以免不了会存在许多的死链,所以也是有必要优化一下这些死链。而且针对神奇的“SEO”来说,也是一个污点(毕竟不代表每一家搜索引擎都会遵守,ren=“nofollow”)的。

展开

function loper_redirect_comment_link($text = ''){
$text = str_replace('href="', 'href="' . get_stylesheet_directory_uri() . '/go.php?url=', $text);  //根据go文件的位置调整
$text = str_replace("href='", "href='" . get_stylesheet_directory_uri() . "/go.php?url=", $text);  //根据go文件的位置调整
return $text;
}
add_filter('get_comment_author_link', 'loper_redirect_comment_link', 5);
add_filter('comment_text', 'loper_redirect_comment_link', 99);

以上还是有一部分地方是可以修改的,比如go.php这个文件的路径,当然如果你不喜欢放在主题根目录的话,也是可以存放其他的位置的,不过需要您有一定的动手能力,还是推荐您按照虫子君设定好的方案来操作哈,这一波非常的漂亮。

我是虫子君,每天一更是否原创无所谓的文章,关键是自己能吹牛。。。。。。。。

展开全文
虫子君
  • 版权声明: 发表于 2019.5. 800:00:33
  • 转载注明:https://chonzi.com/7657.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  1   博主  1
    • avatar 虫子君 Admin @回复

      文字折叠还有bug卧槽,@知更鸟,这个折叠功能不好用哇