A Sitewide External-Link Interstitial That Isn’t Tied to WordPress

I didn’t plan to spend time on this, but eventually gave in. While working on map and friend-circle pages, I had meant to handle external-link redirects at the same time. Most WordPress solutions only catch links inside posts; websites left in comments often stay untouched. A few attempts were not satisfying, and I almost dropped the idea. Then I found a JavaScript-based approach for routing sitewide external links through an interstitial, asked the author some questions, and gradually worked out a setup that fit. Its main advantage is that it is not tied to WordPress: WordPress, ZBlog, Discuz, and similar systems can all use it.

The result covers two common cases: links inside posts go through the interstitial, and website URLs left in comments do too. Friend links are deliberately left alone because they are controlled links. I put the HTML, JavaScript, CSS, and image in a /mygo folder at the site root to keep everything together.

Create go.js with the following code. The comment is translated; the rest is unchanged.

function checkParent(element, classNames) {
    while (element) {
        if (element.classList && classNames.some(cn => element.classList.contains(cn))) {
            return true;
        }
        element = element.parentElement;
    }
    return false;
}
var excludedClasses = ['card-link', 'friend-item', 'contact-item', 'footer-item']; // Add the class names of <a> tags to exclude
window.addEventListener('load', (event) => {
    document.body.addEventListener('click', function(e) {
        let target = e.target;
        while (target && target.nodeName !== 'A') {
            target = target.parentNode;
        }
        if (target && target.nodeName === 'A' &&
            !checkParent(target, excludedClasses) &&
            !target.href.includes('pwsz.com') &&
            !target.href.includes('shefu.cn') &&
            !target.href.includes('zswp.com') &&
            !target.href.includes('m80.cn') &&
            !target.href.includes('bksy.org') &&
            !target.href.includes('beian.miit.gov.cn') &&
            target.hostname !== window.location.hostname) {
            e.preventDefault();
            let encodedUrl = btoa(target.href); // Base64 encode the URL
            let url = '/mygo/go.html?target=' + encodedUrl;
            window.open(url, '_blank');
        }
    });
});

Create go.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="go.css">
    <title>即将离开品味苏州</title>
</head>
<body>
<div class="tiaozhuan-all">
    <div class="tiaozhuan-nrong">
        <div class="tiaozhuan-title">您即将离开 『 品味苏州博客 』 ，跳转到以下外部链接</div>
        <div id="tiaozhuan-link"></div>
        <div class="tiaozhuan-info">请自行识别该链接是否安全，并保管好个人信息。</div>
        <div class="tiaozhuan-button"><a href='' id='direct-link'>继续访问</a></div>
    </div>
</div>
<script>
    const params = new URLSearchParams(window.location.search);
    const encodedTarget = params.get('target');
    const target = atob(encodedTarget); // Decode the Base64 string with atob
    if (target) {
        document.getElementById('direct-link').href = target;
        document.getElementById('tiaozhuan-link').textContent = '' + target; // Show the target address directly
    } else {
        console.error('未指定重定向目标。');
    }
</script>
</body>
</html>

The CSS goes in go.css:

body {
    background: #ececec;
}
.tiaozhuan-all {
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -10px;
    border-radius: 10px;
    background-image: url('go.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #666;
    word-break: break-all;
    max-width: 700px;
    height: 350px;
    text-align: center;
    font-size: 0.85rem;
    overflow: hidden;
    margin: 100px auto 0;
    @include breakpoint('small') {
        aspect-ratio: 2 / 1;
        height: auto;
    }
}
.tiaozhuan-nrong {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 30px 20px;
}
.tiaozhuan-title {
    font-size: 1.3rem;
    color: #222;
    line-height: 1.4;
    margin-bottom: 4px;
}
.tiaozhuan-info {
    margin-top: 6px;
}
.tiaozhuan-button {
    margin-top: 20px;
}
.tiaozhuan-button a {
    color: #fc9151;
    border-radius: 4px;
    padding: 10px 30px;
    font-size: .85rem;
    border: 0.5px solid #fc9151;
    display: inline-block;
    text-decoration: none;
}

Put the background image go.png in the same folder. The Chinese strings in the sample are interstitial copy; replace them with your own wording. Add the script near the top of the theme’s head.php:

<script src="/mygo/go.js"></script>

The directory and file names can be changed. During setup, I ran into one issue: on mobile, buttons and comment emoji were also being routed to the interstitial. The fix was to add their <a> tag class names to excludedClasses.