ساخت شمارنده معکوس در وردپرس؛ راهنمای 2026

javascript
// شمارنده آماری انیمیشنی بدون افزونه
// این اسکریپت را در بلاک «HTML سفارشی» بگذارید و شمارنده را این‌طور صدا بزنید:
// <span class="wd-counter" data-target="1200">0</span>
document.querySelectorAll('.wd-counter').forEach(function (el) {
  var target = parseInt(el.dataset.target, 10) || 0;
  var duration = 2000; // مدت انیمیشن به میلی‌ثانیه
  var started = false;
  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting && !started) {
        started = true;
        var startTime = performance.now();
        (function step(now) {
          var progress = Math.min((now - startTime) / duration, 1);
          el.textContent = Math.floor(progress * target).toLocaleString('fa-IR');
          if (progress < 1) requestAnimationFrame(step);
        })(startTime);
      }
    });
  }, { threshold: 0.4 });
  io.observe(el);
});

php
// ساخت شورت‌کد شمارنده معکوس ساده در وردپرس
// این کد را در functions.php قالب فرزند یا یک افزونه‌ی اسنیپت قرار دهید
// استفاده در نوشته/برگه:  [wd_countdown date="2026-12-21 20:00"]
add_shortcode( 'wd_countdown', 'webdade_countdown_shortcode' );
function webdade_countdown_shortcode( $atts ) {
    $a = shortcode_atts( array( 'date' => '' ), $atts );
    $target = strtotime( $a['date'] );
    if ( ! $target ) {
        return '<p>لطفاً یک تاریخ معتبر وارد کنید.</p>';
    }
    $id = 'wd-cd-' . wp_rand( 1000, 9999 );
    ob_start(); ?>
    <div id="<?php echo esc_attr( $id ); ?>" class="wd-countdown"></div>
    <script>
    (function () {
        var el = document.getElementById('<?php echo esc_js( $id ); ?>');
        var target = <?php echo (int) $target; ?> * 1000;
        function render() {
            var diff = Math.max(target - Date.now(), 0);
            var day  = Math.floor(diff / 86400000);
            var hour = Math.floor(diff % 86400000 / 3600000);
            var min  = Math.floor(diff % 3600000 / 60000);
            var sec  = Math.floor(diff % 60000 / 1000);
            el.textContent = day + ' روز و ' + hour + ':' + min + ':' + sec;
            if (diff > 0) { setTimeout(render, 1000); }
        }
        render();
    })();
    </script>
    <?php
    return ob_get_clean();
}