如何在WordPress网站添加带30秒倒计时的Download button

下面给你三种实用的实现方式，按需选择：

方法一：自定义HTML+JavaScript（单篇文章手动添加） #

1. 打开目标文章的编辑页面，切换到「代码编辑器」模式（而非可视化编辑器）
2. 插入以下代码，替换你的实际下载链接为真实地址：

<div class="download-container">
    <button id="countdown-btn" disabled>请等待30秒...</button>
    <a id="download-link" href="你的实际下载链接" style="display:none;">立即下载</a>
</div>

<script>
// 倒计时秒数
const countdownTime = 30;
let remainingTime = countdownTime;

const countdownBtn = document.getElementById('countdown-btn');
const downloadLink = document.getElementById('download-link');

const countdownInterval = setInterval(() => {
    remainingTime--;
    countdownBtn.textContent = `请等待${remainingTime}秒...`;
    
    if (remainingTime <= 0) {
        clearInterval(countdownInterval);
        countdownBtn.style.display = 'none';
        downloadLink.style.display = 'inline-block';
    }
}, 1000);

// 页面加载完成后立即启动倒计时
window.onload = () => {
    countdownBtn.textContent = `请等待${countdownTime}秒...`;
};
</script>

3. 更新或发布文章即可生效。你可以自行添加CSS样式美化按钮和链接的外观。

方法二：使用WordPress插件（无需代码） #

推荐使用Download Manager插件，操作步骤：

• 在WordPress后台「插件」-「添加新插件」搜索并安装Download Manager
• 激活插件后，进入「下载」-「添加新下载」，填写下载文件信息
• 在「高级」选项卡中找到「倒计时」设置，勾选启用并设置倒计时时长为30秒
• 发布下载项后，复制生成的短代码，粘贴到目标文章的合适位置即可

方法三：自定义短代码（全局可用） #

如果需要在多篇文章中复用，可通过短代码实现：

1. 进入WordPress后台「外观」-「主题文件编辑器」，打开functions.php文件
2. 在文件末尾添加以下代码：

function countdown_download_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'link' => '',
            'time' => 30,
        ),
        $atts,
        'countdown_download'
    );

    ob_start();
    ?>
    <div class="countdown-download-wrapper">
        <button class="countdown-btn" disabled>请等待<?php echo $atts['time']; ?>秒...</button>
        <a class="download-link" href="<?php echo esc_url($atts['link']); ?>" style="display:none;">立即下载</a>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const countdownBtns = document.querySelectorAll('.countdown-btn');
            const downloadLinks = document.querySelectorAll('.download-link');
            
            countdownBtns.forEach((btn, index) => {
                let time = <?php echo $atts['time']; ?>;
                const link = downloadLinks[index];
                
                const interval = setInterval(() => {
                    time--;
                    btn.textContent = `请等待${time}秒...`;
                    
                    if (time <= 0) {
                        clearInterval(interval);
                        btn.style.display = 'none';
                        link.style.display = 'inline-block';
                    }
                }, 1000);
            });
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('countdown_download', 'countdown_download_shortcode');

3. 保存文件后，在文章编辑页面插入短代码即可：
   [countdown_download link="你的实际下载链接" time="30"]

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