Wordpress'de geri sayım sayacı

05-01-2024, 23:34:50

Merhabalar Wordpress'de Astra tema kullanıyorum nişamlıma bir sürpriz yapıp web siteme nikah tarihimizin geri sayacını eklemek istiyorum. Nasıl yapabilirim yardımcı olabilir misiniz ?

05-01-2024, 23:40:22

#2

volkanwp

Düzenleyip kullanabilirsiniz.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geri Sayım Sayacı</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
            margin: 50px;
        }

        #countdown {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>

    <h1>Geri Sayım Sayacı</h1>
    <div id="countdown"></div>

    <script>
        // Hedef tarih
        var targetDate = new Date("August 5, 2024 00:00:00").getTime();

        // Geri sayımın her saniyede bir güncellenmesi için bir fonksiyon
        var countdownFunction = setInterval(function() {

            // Şu anki tarih ve saat
            var currentDate = new Date().getTime();

            // Kalan zamanı hesapla
            var remainingTime = targetDate - currentDate;

            // Zamanı gün, saat, dakika ve saniye olarak böl
            var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
            var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

            // HTML'e yazdır
            document.getElementById("countdown").innerHTML = days + " gün " + hours + " saat " + minutes + " dakika " + seconds + " saniye ";

            // Hedef tarih geçmişse geri sayımı durdur
            if (remainingTime < 0) {
                clearInterval(countdownFunction);
                document.getElementById("countdown").innerHTML = "Süre doldu!";
            }
        }, 1000); // Her 1000 milisaniyede bir güncelle (1 saniye)
    </script>

</body>
</html>

05-01-2024, 23:40:37

#3

eratalay

Hocam eklentilerde "countdown" olarak aratabilirsiniz. Birçok eklenti var işinizi görebilecek. Destek lazım olursa ücretsiz yardımcı olurum.

05-01-2024, 23:41:59

#4

Anglo

 function custom_countdown_shortcode($atts) {
    // Varsayılan ayarlar
    $atts = shortcode_atts(
        array(
            'year' => date('Y'),
            'month' => '1',
            'day' => '1',
            'hour' => '0',
            'minute' => '0',
            'second' => '0',
        ),
        $atts,
        'countdown'
    );

    // Hedef tarihi oluşturma
    $target_date = mktime(
        $atts['hour'],
        $atts['minute'],
        $atts['second'],
        $atts['month'],
        $atts['day'],
        $atts['year']
    );

    // Şu anki zamanı al
    $current_date = time();

    // Geri sayım süresi
    $diff = $target_date - $current_date;

    if ($diff > 0) {
        // Geri sayımı formatlama
        $days = floor($diff / (60 * 60 * 24));
        $hours = floor(($diff - $days * 60 * 60 * 24) / (60 * 60));
        $minutes = floor(($diff - $days * 60 * 60 * 24 - $hours * 60 * 60) / 60);
        $seconds = $diff - $days * 60 * 60 * 24 - $hours * 60 * 60 - $minutes * 60;

        return "$days gün, $hours saat, $minutes dakika, $seconds saniye";
    } else {
        return "KUTLU OLSUN";
    }
}

add_shortcode('countdown', 'custom_countdown_shortcode');

Bu kodu functions.php'ye ekleyebilirsiniz. Kısa kod ile şu şekilde çalıştırabilirsiniz=

[countdown year="2024" month="4" day="1" hour="0" minute="0" second="0"]

Bu kısa kodda istediğiniz düzenlemeyi yapabilirsiniz. Girdiğiniz değerlerden geri sayım yapacaktır.
Geri sayım bittiği zaman da "KUTLU OLSUN" yazacaktır.

05-01-2024, 23:43:37

#5

therodor01

Hocam öncelikle dönüşünüz için teşekkürler denedim bir tane eklenti https://prnt.sc/mAcY-FucEEqD bunu buldum Gutenberg editör diyor bende bu editör mevcut değil bunu da mı eklemem gerekir ?

05-01-2024, 23:46:34

#6

eratalay

therodor01 adlı üyeden alıntı: mesajı görüntüle

Hocam öncelikle dönüşünüz için teşekkürler denedim bir tane eklenti https://prnt.sc/mAcY-FucEEqD bunu buldum Gutenberg editör diyor bende bu editör mevcut değil bunu da mı eklemem gerekir ?

Hocam Wordpress sürümünüz güncelse Gutenberg editör kendiliğinden vardır yüksek ihtimalle. Yeni sayfa oluşturup sayfa içerisinde + butonuna tıklayın ve bloklar arasından countdown'u seçin. Tarihi vs. ayarlayıp sayfayı yayınlayabilirsiniz.

06-01-2024, 00:03:35

#7

therodor01

Teşekkürler kullanmaya başladım tıkır tıkır çalışıyor.

volkanwp adlı üyeden alıntı: mesajı görüntüle

Düzenleyip kullanabilirsiniz.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geri Sayım Sayacı</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
            margin: 50px;
        }

        #countdown {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>

    <h1>Geri Sayım Sayacı</h1>
    <div id="countdown"></div>

    <script>
        // Hedef tarih
        var targetDate = new Date("August 5, 2024 00:00:00").getTime();

        // Geri sayımın her saniyede bir güncellenmesi için bir fonksiyon
        var countdownFunction = setInterval(function() {

            // Şu anki tarih ve saat
            var currentDate = new Date().getTime();

            // Kalan zamanı hesapla
            var remainingTime = targetDate - currentDate;

            // Zamanı gün, saat, dakika ve saniye olarak böl
            var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
            var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

            // HTML'e yazdır
            document.getElementById("countdown").innerHTML = days + " gün " + hours + " saat " + minutes + " dakika " + seconds + " saniye ";

            // Hedef tarih geçmişse geri sayımı durdur
            if (remainingTime < 0) {
                clearInterval(countdownFunction);
                document.getElementById("countdown").innerHTML = "Süre doldu!";
            }
        }, 1000); // Her 1000 milisaniyede bir güncelle (1 saniye)
    </script>

</body>
</html>