WordPress外链跳转外部链接，打开以后提示是否外站跳转
前言
之前一直使用果核剥壳的插件，今天看到新锐博客有无插件实现方法，遂更新记录。本文方法转自新锐博客。
效果图
实现方法
使用function和php实现外链跳转
教程
此教程仅适用于Corenext主题！
首先在子主题的function.php中添加如下代码
//外链跳转
function convert_external_links_to_base64($content) {
// 使用正则表达式找到所有外部链接
$pattern = '/<a\s+href=["\'](http[s]?:\/\/[^"\']+)["\']/i';
$content = preg_replace_callback($pattern, function($matches) {
$url = $matches[1];
// 对 URL 进行 Base64 编码
$base64_url = base64_encode($url);
// 返回新的链接，指向中间页
return str_replace($url, site_url('/redirect.php?url=' . $base64_url), $matches[0]);
}, $content);
return $content;
}
// 将函数应用于文章和页面内容
add_filter('the_content', 'convert_external_links_to_base64');
再在网站根目录新建一个php文件命名为redirect.php ，并且添加如下代码
<?php
if (isset($_GET['url'])) {
$link = base64_decode($_GET['url']);
}
?>
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="icon" href="图片地址" type="image/x-icon"/><!--favicon图片地址-->
<title>极客指北 - 安全中心</title><!--修改文字-->
</head>
<body>
<div class="go-wild-box">
<div class="go-wild-container">
<a href="https://www.90svip.cn/">
<img alt="极客指北" src="图片地址g" class="logo-img" /><!--修改Logo地址-->
</a>
<div class="tips-title">您即将离开极客指北，跳转到第三方链接</div><!--修改文字-->
<div class="address"><?php echo htmlspecialchars($link); ?></div>
<div class="tips-subtitle">请注意您的账号和财产安全</div>
<div class="btn-groups">
<button onclick="try { window.close(); } catch(e) { alert('请手动关闭此页面'); }" type="button" class="ant-btn ant-btn-default">取消访问</button>
<a href="<?php echo htmlspecialchars($link); ?>" rel="nofollow">
<button type="button" class="ant-btn ant-btn-primary">继续访问</button>
</a>
</div>
</div>
</div>
</body>
</html>
<style>
body {
margin: 0; font-family: 'PingFangSC', sans-serif; background-color: #EFF4FA; }
.go-wild-box { display: flex; justify-content: center; align-items: center; height: 100vh; }
.go-wild-container { width: 770px; height: 330px; max-width: 90%; padding: 90px 15px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); text-align: center; }
.logo-img { width: 120px; height: auto; }
.tips-title { margin: 20px 0; font-size: 22px; color: #2a3c59; font-weight: 500; }
.address { margin-bottom: 20px; padding: 15px; background-color: #EFF4FA; border-radius: 8px; color: #2a3c59; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 80%; max-width: 600px; margin: 0 auto; }
.tips-subtitle { font-size: 14px; color: #2a3c59; margin-bottom: 30px;margin-top: 20px; }
.btn-groups { display: flex; justify-content: center; gap: 10px; margin-top: 60px; }
.ant-btn { width: 152px; height: 44px; line-height: 44px; border-radius: 20px; border: none; cursor: pointer; font-size: 14px; transition: all 0.3s ease; }
.ant-btn-primary { background: linear-gradient(152deg, #07C160 0%, #07c183 100%); color: #fff; }
.ant-btn-default { background-color: #fff; color: #2a3c59; border: 1px solid #ccc; }
.ant-btn-default:hover { background-color: #fff; border-color: #07C160; color: #07C160; }
</style>这样访问文章和页面中的外部链接就可以跳转到中间页了。
THE END
