カウントダウンタイマーをプラグインなしで作成方法

カウントダウンタイマーというともうインターネットが普及したばかりの頃からあるように思います。ホームページの時から始まりブログなどでも使用され今ではCMSなどでも良く使われます。企業やイベントのカウントダウンに良く使用されていますね。年末年始の新年あけましておめでとうなどのカウントダウンなどにもよくあります。プラグインを使用すれば簡単にカウントダウンタイマーが作成できますが、余計な機能やサイト自体が重くなってしまったり頻繁にプラグインの更新などもあります。そこまでの機能はいらないけれどシンプルなカウントダウンタイマーが作成したいと思われる方もいらっしゃるのではないでしょうか。

そのような場合には、HTMLでも作成可能ですがショートコードを作成し簡単にシンプルなカウントダウンタイマーを表示されるようなコードにしたいと思います。

以下はプラグインなしでカウントダウンタイマーを作成する方法です。

function.phpに追記する形になるので、必ずfunction.phpはバックアップしてから行ってください。何か不具合やバグなどで表示されなくなった時でもバックアップファイルをFTPなどでアップロードし直すことで元に戻ります。

以下は簡単にカウントダウンタイマーをショートコードにて出力するコードになります。

// カウントダウンタイマーショートコードの登録
function custom_countdown_shortcode($atts) {
    // デフォルトの属性値
    $atts = shortcode_atts(
        array(
            'end_date' => '2024-12-31 23:59:59', // デフォルトの終了日時
            'format'   => 'Y/m/d H:i:s',          // 日時のフォーマット
            'label'    => 'イベントまで',           // ラベルテキスト
        ),
        $atts,
        'countdown'
    );

    // 終了日時をJavaScriptで使用できる形式に変換
    $end_date = strtotime($atts['end_date']) * 1000; // ミリ秒に変換

    // ショートコードの出力HTML
    ob_start();
    ?>
    <div class="custom-countdown">
        <span class="countdown-label"><?php echo esc_html($atts['label']); ?></span>
        <div id="countdown-timer"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var endDate = <?php echo $end_date; ?>;
            var countdownElement = document.getElementById('countdown-timer');

            var updateCountdown = function() {
                var now = new Date().getTime();
                var distance = endDate - now;

                if (distance < 0) {
                    countdownElement.innerHTML = "終了しました";
                    clearInterval(interval);
                    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);

                countdownElement.innerHTML = days + "日 " + hours + "時間 "
                    + minutes + "分 " + seconds + "秒 ";
            };

            updateCountdown(); // 初回呼び出し
            var interval = setInterval(updateCountdown, 1000);
        });
    </script>

    <style>
        .custom-countdown {
            text-align: center;
            font-family: Arial, sans-serif;
            margin: 20px 0;
        }
        .countdown-label {
            display: block;
            font-size: 1.5em;
            margin-bottom: 10px;
            color: #333;
        }
        #countdown-timer {
            font-size: 2em;
            color: #ff0000;
        }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('countdown', 'custom_countdown_shortcode');

使い方は、簡単でショートコードとしてサイト内に以下のショートコードを追記すれば追記した場所（位置）へのカウントダウンタイマーが出力されます。

例

[countdown end_date="2024-12-31 23:59:59" label="2024年終了まで"]

ショートコードとしては

[countdown]

ですが、属性としてlabelと終了日時を指定可能です。

その他にもシンプルなカウントダウンタイマーとしては以下のショートコード用のコードなども使用可能です。

function.php内に追記するコードは以下になります。

// Add Countdown Timer Shortcode
function countdown_timer_shortcode($atts) {
    // Set default attributes
    $atts = shortcode_atts(
        array(
            'date' => '2025-12-25 00:00:00', // Default countdown date
            'timezone' => 'UTC',              // Default timezone
            'message' => 'Time is up!',       // Message when countdown ends
        ),
        $atts,
        'countdown_timer'
    );

    // Prepare data attributes
    $date = esc_attr($atts['date']);
    $timezone = esc_attr($atts['timezone']);
    $message = esc_html($atts['message']);

    // Generate unique ID for the timer
    $timer_id = 'countdown_timer_' . uniqid();

    // Output the countdown timer HTML and JavaScript
    $output = '
    <div id="' . $timer_id . '" style="font-family: Arial, sans-serif; text-align: center; padding: 20px; border: 2px solid #f0f0f0; border-radius: 10px;">
        <h2>クリスマスまであと…プレゼントは用意されましたか？</h2>
        <div id="' . $timer_id . '_display" style="font-size: 2em; margin-top: 10px;"></div>
        <div id="' . $timer_id . '_message" style="font-size: 1.5em; color: #ff0000; margin-top: 10px;"></div>
    </div>
    <script>
        (function() {
            var countdownDate = new Date("' . $date . ' UTC").getTime();

            var timer = setInterval(function() {
                var now = new Date().getTime();
                var distance = countdownDate - now;

                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);

                document.getElementById("' . $timer_id . '_display").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

                if (distance < 0) {
                    clearInterval(timer);
                    document.getElementById("' . $timer_id . '_display").style.display = "none";
                    document.getElementById("' . $timer_id . '_message").innerHTML = "' . $message . '";
                }
            }, 1000);
        })();
    </script>
    ';

    return $output;
}
add_shortcode('countdown_timer', 'countdown_timer_shortcode');

上記コードの使用方法例としては以下のショートコードのように記載します。

[countdown_timer date="2024-12-25 12:00:00" timezone="Asia/Tokyo" message="クリスマスプレゼント"]

属性としてmessage=""のダブルクォーテーション内にご自分の使用したい言葉やメッセージを出力することができます。その他タイムゾーンも指定可能になっています。

他のカウントダウンタイマーのシンプルなカウントダウンタイマー用のショートコード作成するコードは以下になります。

// カウントダウンタイマーのショートコードを登録
function custom_countdown_timer_shortcode($atts) {
    // ショートコードの属性を設定し、デフォルト値を指定
    $atts = shortcode_atts(
        array(
            'end_date' => '2024-12-31 23:59:59', // デフォルトの終了日時
            'timezone' => 'Asia/Tokyo',           // タイムゾーン
        ),
        $atts,
        'countdown_timer'
    );

    // 終了日時をJavaScriptで使用できる形式に変換
    $end_date_iso = gmdate('c', strtotime($atts['end_date']) - get_option('gmt_offset') * 3600);

    // カウントダウンタイマーのHTMLとスクリプトを返す
    return '
    <div class="countdown-timer" style="text-align: center; font-family: Arial, sans-serif;">
        <div id="countdown-' . uniqid() . '" style="font-size: 2em; color: #333;"></div>
    </div>
    <script>
        (function() {
            var endDate = new Date("' . $end_date_iso . '").getTime();
            var countdownElement = document.getElementById("countdown-' . uniqid() . '");
            
            var interval = setInterval(function() {
                var now = new Date().getTime();
                var distance = endDate - now;

                if (distance < 0) {
                    clearInterval(interval);
                    countdownElement.innerHTML = "カウントダウン終了🎉";
                    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);

                countdownElement.innerHTML = "⏰ " + days + "日 " + hours + "時間 "
                    + minutes + "分 " + seconds + "秒 ";
            }, 1000);
        })();
    </script>
    ';
}
// ショートコードを [countdown_timer end_date="2024-12-31 23:59:59"] のように使用できます
add_shortcode('countdown_timer', 'custom_countdown_timer_shortcode');

   [countdown_timer end_date="2024-12-31 23:59:59"]

// カウントダウンタイマーのショートコードを作成
function custom_countdown_timer_shortcode($atts) {
    // デフォルトの属性値
    $atts = shortcode_atts(
        array(
            'end_date' => '2024-12-31T23:59:59', // デフォルトの終了日時
            'timezone' => 'UTC', // タイムゾーン
        ),
        $atts,
        'countdown_timer'
    );

    // HTML出力
    ob_start();
    ?>
    <div class="countdown-timer" data-end-date="<?php echo esc_attr($atts['end_date']); ?>" data-timezone="<?php echo esc_attr($atts['timezone']); ?>">
        <span class="countdown-item days">0</span>日
        <span class="countdown-item hours">0</span>時間
        <span class="countdown-item minutes">0</span>分
        <span class="countdown-item seconds">0</span>秒
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function initializeCountdown(element) {
                const endDate = new Date(element.getAttribute('data-end-date'));
                const timezone = element.getAttribute('data-timezone');
                
                function updateCountdown() {
                    const now = new Date().toLocaleString("en-US", { timeZone: timezone });
                    const current = new Date(now);
                    const distance = endDate - current;

                    if (distance < 0) {
                        element.innerHTML = "カウントダウン終了";
                        clearInterval(interval);
                        return;
                    }

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

                    element.querySelector('.days').textContent = days;
                    element.querySelector('.hours').textContent = hours;
                    element.querySelector('.minutes').textContent = minutes;
                    element.querySelector('.seconds').textContent = seconds;
                }

                updateCountdown();
                const interval = setInterval(updateCountdown, 1000);
            }

            const countdownElements = document.querySelectorAll('.countdown-timer');
            countdownElements.forEach(initializeCountdown);
        });
    </script>
    <style>
        .countdown-timer {
            font-family: Arial, sans-serif;
            font-size: 1.2em;
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }
        .countdown-item {
            font-weight: bold;
            color: #ff0000;
        }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('countdown_timer', 'custom_countdown_timer_shortcode');

<?php echo do_shortcode( '[countdown_timer]' ); ?>

あなたにおすすめな関連記事

【AmazonタイムセールSALE車＆バイク】！

人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

年金倍増で日本経済は大復活する!デフレの終わり、第二の「高度成長」の始まり

¥2,749 （2025/05/08 05:43時点 | Amazon調べ）

Amazon

楽天市場

Yahooショッピング

メルカリ

ポチップ

エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー

すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイ

📅 2020.11.14 | 📂 メンテナンス, 車

バッテリー交換後の廃バッテリー処分方法3つ

バッテリー交換は、どの車においてもいずれは発生する事象です。新車で購入して3年で乗り換えなんて言う方は今ではそんなに多くはないと思います。（中に入ると思いますが、多くの方々はそれ

📅 2023.08.06 | 📂 メンテナンス, 車

あなたが訪問してから

⏰ 0 秒経過 🎉

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。