You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在WordPress中实现定时更新数字?求插件推荐或自定义PHP方案

WordPress 定时自动变化数字展示方案

推荐插件

1. Countdown Timer Ultimate

  • 支持设置数字定时递增/递减,自定义更新间隔(秒、分钟、小时均可)
  • 直接通过短代码插入文章、页面或侧边栏,无需复杂配置
  • 可自定义数字的字体、颜色、动画效果,适配不同主题风格

2. Dynamic Numbers for WordPress

  • 专门针对动态数字展示设计,支持按固定时间间隔更新数值
  • 可设置初始值、步长、上限/下限,避免数字无限制变化
  • 提供可视化编辑器,无需代码即可完成配置,适合新手操作

3. WP Count Up Timer

  • 除基础定时数字变化功能外,还支持倒计时、计数两种模式
  • 可设置触发条件(页面加载后启动,或指定具体时间点启动)
  • 支持短代码参数自定义,能灵活调整更新频率和数值变化规则

自定义PHP+JS实现方案(无合适插件时)

如果上述插件不符合需求,可通过PHP结合JavaScript实现核心功能:

  1. 在主题的functions.php中添加后端逻辑,用于存储和计算数值:
// 获取并计算动态数字
function get_dynamic_number() {
    // 读取存储的初始值、更新间隔、最后更新时间(可改为数据库存储更稳定)
    $initial_value = get_option('dynamic_number_initial', 100);
    $interval = get_option('dynamic_number_interval', 3600); // 默认间隔1小时(秒)
    $last_update = get_option('dynamic_number_last_update', time());
    
    // 计算过去的间隔周期数,更新当前数值
    $elapsed_cycles = floor((time() - $last_update) / $interval);
    $current_value = $initial_value + ($elapsed_cycles * 5); // 每个周期加5,可自定义
    
    // 若已过至少一个周期,更新存储的初始值和最后更新时间
    if ($elapsed_cycles > 0) {
        update_option('dynamic_number_initial', $current_value);
        update_option('dynamic_number_last_update', time());
    }
    
    return $current_value;
}
// 注册短代码,方便在页面中调用
add_shortcode('dynamic_number', 'get_dynamic_number');
  1. 在文章/页面中插入短代码[dynamic_number],并添加以下JS实现前端实时更新(无需刷新页面):
// 每小时更新一次数字(单位毫秒,3600000=1小时)
setInterval(function() {
    fetch('/wp-admin/admin-ajax.php?action=get_dynamic_number')
        .then(response => response.text())
        .then(data => {
            // 替换页面中class为dynamic-number的元素内容
            document.querySelector('.dynamic-number').textContent = data;
        });
}, 3600000);

内容的提问来源于stack exchange,提问作者Neelkamal

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.04 00:40:41