Adaugă Countdown în WordPress

Află cum să adaugi un countdown în WordPress pentru a anunța lansarea site-ului tău. Cod PHP și JavaScript simplu pentru un efect profesional!

---

Dacă îți pregătești site-ul pentru lansare, o numărătoarea inversă poate fi o modalitate excelentă de a menține vizitatorii informați și entuziasmați. În acest ghid, îți voi arăta cum să adaugi un countdown automat în WordPress folosind PHP și JavaScript.

1: Adăugarea Countdown-ului în functions.php

Pentru a afișa numărătoarea inversă până la lansarea site-ului, adaugă acest cod în fișierul functions.php al temei tale active:

function show_countdown_or_content() {
    $launch_date = "2025-03-20 00:00:00";
    $current_time = current_time('timestamp');
    $launch_timestamp = strtotime($launch_date);

    if ($current_time < $launch_timestamp) {
        ?>
        <div id="countdown-container">
            <h2>Oficial andreiflorin.ro se lansează în:</h2>
            <div id="countdown"></div>
        </div>

        <script>
            function startCountdown() {
                var launchDate = new Date("<?php echo $launch_date; ?>").getTime();

                var x = setInterval(function () {
                    var now = new Date().getTime();
                    var distance = launchDate - now;

                    if (distance < 0) {
                        clearInterval(x);
                        document.getElementById("countdown-container").innerHTML = "<h2>Site-ul este acum live!</h2>";
                        return;
                    }

                    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                    hours = hours < 10 ? "0" + hours : hours;
                    minutes = minutes < 10 ? "0" + minutes : minutes;
                    seconds = seconds < 10 ? "0" + seconds : seconds;

                    document.getElementById("countdown").innerHTML =
                        days + " zile " + hours + ":" + minutes + ":" + seconds;
                }, 1000);
            }
            document.addEventListener("DOMContentLoaded", startCountdown);
        </script>

        <style>
            #countdown-container {
                text-align: center;
                font-size: 24px;
                padding: 50px;
                background: #000;
                color: #fff;
                font-family: Arial, sans-serif;
            }
            #countdown {
                font-size: 30px;
                font-weight: bold;
                margin-top: 10px;
            }
        </style>
        <?php
    } else {
        echo "<h2>Bine ai venit pe andreiflorin.ro!</h2>";
    }
}
add_action('wp_footer', 'show_countdown_or_content');

2: Explicația Codului

• PHP: Verifică dacă data curentă este mai mică decât data lansării. Dacă da, afișează countdown-ul, altfel afișează mesajul „Site-ul este acum live!”
• JavaScript: Creează și actualizează timer-ul în timp real.
• CSS: Stilizează contorul pentru a arăta profesional.

3: Verificare și Testare

Salvează modificările și verifică pagina principală a site-ului. Dacă data lansării este în viitor, vei vedea countdown-ul; dacă nu, va apărea mesajul de bun venit.

Concluzie

Acest script simplu îți permite să creezi un efect profesional pentru lansarea site-ului tău. Dacă ai întrebări, lasă un comentariu mai jos! 🚀

📩 Ai întrebări sau sugestii? Lasă un comentariu sau contactează-ne!