banner
Feng

Feng's xLog

我在xLog上的窝

在WordPress中添加一个跳转中间页

看到好多人的博客都有這麼一個「神奇」的功能,作為一個備案過的網站我認為確實有需要,畢竟要小心對待嘛,但如果是部署是在那啥且也沒有那啥的,個人感覺有或沒有其實也沒那麼重要,管它跳轉到哪裡跟我又有何關係,不過既然人家有了,我沒有,是不是感覺會缺少點啥(這個心理呀,真是要不得,不過倒是又給了自己一個折騰的理由)。

本人作為一個資深的小老白,讓我自己寫完代碼那是萬萬不可能的,但現在有 ChatGpt 呀,這玩意已經幫了我不知道多少次忙了,在此我非常正式的感謝一下 OpenAI 公司,你們太牛了!好了廢話不多說這就開幹吧。要實現所有鏈接(文章、評論)都要強制跳轉到中間頁(這裡以 go.php),也不是很難,在主題的 functions.php 中加入相應的代碼:

/*鏈接跳轉*/
function redirect_external_links($content) {
    $home_url = home_url(); // 獲取WordPress站點的主URL
    // 使用正則表達式匹配所有鏈接
    return preg_replace_callback('#<a\s+[^>]*href=["\'](.*?)["\'][^>]*>#is', function($matches) use ($home_url) {
        $url = $matches[1]; // 提取URL
        // 檢查是否為外部鏈接
        if (strpos($url, $home_url) === false && filter_var($url, FILTER_VALIDATE_URL)) {
            // 修改URL,通過go.php進行重定向
            $new_url = '/go.php?url=' . urlencode($url);
            return str_replace($matches[1], $new_url, $matches[0]);
        } else {
            // 內部鏈接不修改
            return $matches[0];
        }
    }, $content);
}
// 添加過濾器,處理文章內容中的鏈接
add_filter('the_content', 'redirect_external_links');
// 處理評論中的鏈接
add_filter('comment_text', 'redirect_external_links');
// 處理評論作者鏈接
function filter_comment_author_link($author_link) {
    $home_url = get_option('home');
    return redirect_external_links($author_link);
}
add_filter('get_comment_author_link', 'filter_comment_author_link');

然後在 WordPress 根目錄下創建一個 go.php 文件,具體參考代碼如下:

<?php
// 加載WordPress環境和模板
require_once('wp-load.php');
// 安全檢查,確保傳遞的URL是有效的,防止重定向攻擊
$raw_url = isset($_GET['url']) ? $_GET['url'] : 'http://057000.xyz';
$url = filter_var($raw_url, FILTER_VALIDATE_URL) ? $raw_url : 'http://057000.xyz';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頁面跳轉--Feng's Blog</title>
<style>
    body {
        padding: 0;
        margin: 0;
        font-family: Arial, sans-serif;
        background: #f1f1f1;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .container {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .url, .countdown {
        margin: 10px 0;
    }
    a.button {
    background: #3498db;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    }
    a.button:hover {
    background: #2980b9;
   }
</style>
<script>
    var countdown = 10; // Countdown in seconds
    var url = '';
    function redirectToUrl() {
        window.location.href = url;
    }
    function updateCountdown() {
        var countdownElement = document.getElementById('countdown');
        countdownElement.innerHTML = `將於 ${countdown} 秒後自動打開...`;
        if(countdown === 0) {
            redirectToUrl();
        } else {
            countdown--;
            setTimeout(updateCountdown, 2000);
        }
    }
    window.onload = function() {
        const params = new URLSearchParams(window.location.search);
        url = params.get('url') || 'http://057000.xyz'; // Default URL if none provided
        var urlElement = document.getElementById('url');
        urlElement.innerHTML = `<strong>即將訪問:</strong> ${url}`;
        setTimeout(updateCountdown, 2000); // Start countdown
    };
</script>
</head>
<body>
<div class="container">
    <h1>即將離開Feng's Blog...</h1>
    <p class="url" id="url"></p>
    <p>您即將進行頁面跳轉,請注意您的帳號和財產安全。</p>
    <p class="countdown" id="countdown"></p>
     <a href="#" onclick="redirectToUrl();" class="button">繼續訪問</a>
</div>
</body>
</html>

記得將上述代碼中的 057000.xyz 改成自己的博客地址就可以了,大概的效果圖如下:
image
好了,咱們自己的跳轉頁也就有了,哈哈。

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。