如何在WordPress文章中实现带倒计时的下载链接生成功能

步骤1：创建自定义跳转页面模板 #

在你的WordPress主题目录（比如wp-content/themes/你的主题名/）下新建一个名为template-redirect.php的文件，写入以下代码：

<?php
/*
Template Name: 跳转倒计时页面
*/
get_header();

// 获取URL哈希中的目标链接，去除#号
$target_url = isset($_SERVER['REQUEST_URI']) ? str_replace('/go/#', '', $_SERVER['REQUEST_URI']) : '';
// 安全过滤链接
$target_url = esc_url($target_url);
?>

<div class="redirect-container" style="text-align: center; padding: 50px 0;">
    <h3>请稍候，正在准备跳转...</h3>
    <p id="countdown">倒计时：<span>5</span> 秒</p>
    <a id="open-button" href="<?php echo $target_url; ?>" class="button" style="display: none; padding: 10px 20px; background: #0073aa; color: white; text-decoration: none; border-radius: 4px;">OPEN</a>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let countdown = 5;
    const countdownEl = document.getElementById('countdown').querySelector('span');
    const openButton = document.getElementById('open-button');

    const timer = setInterval(function() {
        countdown--;
        countdownEl.textContent = countdown;
        
        if (countdown <= 0) {
            clearInterval(timer);
            countdownEl.parentElement.textContent = '准备就绪，点击下方按钮跳转';
            openButton.style.display = 'inline-block';
        }
    }, 1000);
});
</script>

<?php get_footer(); ?>

步骤2：创建跳转页面 #

在WordPress后台的「页面」→「新建页面」，标题设为「跳转中转页」（或自定义名称），页面模板选择刚才创建的「跳转倒计时页面」，发布该页面。

确保这个页面的固定链接为https://你的域名/go/（和你示例中的路径对应）。

步骤3：在文章中添加下载按钮 #

在需要添加下载链接的文章里，插入以下HTML代码作为下载按钮：

<a href="https://你的域名/go/#https://karunya.edu" rel="nofollow noreferrer" class="button" style="padding: 10px 20px; background: #2271b1; color: white; text-decoration: none; border-radius: 4px;">点击下载</a>

注意事项 #

• 替换代码中的https://你的域名/为你实际的WordPress站点域名
• 可根据主题风格调整按钮和容器的CSS样式，保持站点视觉统一
• 代码中已通过esc_url()过滤目标链接，避免恶意URL注入风险

内容的提问来源于stack exchange，提问作者Siva Gangadhar