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

今日は2025年4月1日です。

カウントダウンタイマーというともうインターネットが普及したばかりの頃からあるように思います。ホームページの時から始まりブログなどでも使用され今では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】！

3/28(金)9時から4月1日（火）23時59分まで、「AmazonスマイルSALE」開催予定

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

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

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

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

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

あなたが訪問してから

⏰ 0 秒経過 🎉

「WordPress, カスタマイズ, カスタマイズ, メンテナンス, 伝えたいこと, 備忘録」の人気記事

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

おすすめ！！

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！

詳細ページへ

No.1シェアAmazon

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

詳細ページへ

楽天市場