使用function和php实现外链跳转

前言

之前外链跳转使用的是果核的插件,现在不想用插件了,于是自己弄了个代码

教程

首先在子主题的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="https://www.xrbk.cn/favicon.png" type="image/x-icon"/><!--favicon图片地址-->
    <title>新锐博客 - 安全中心</title><!--修改文字-->
</head>

<body>
  <div class="go-wild-box">
    <div class="go-wild-container">
     <a href="https://www.xrbk.cn/">
     <img alt="新锐博客" src="/wp-content/uploads/f4a9f982d722de858fd133baf4ff14b7.webp" 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