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

2025年2月22日 (土曜日)↓における週間月間人気記事トップ３は？↓

• 本日
• 週間
• 月間

1. 

   Windows11 24H2不具合エクスプローラーのツールバー詳細 (…)が下に表示でなく上に表示解決方法 4PV

   Windows11が正式リリースされてから早3年が経過します。毎年10月から11月にはWindows10の頃からメジャーアップデートが繰り返されてきています。今年2024年はWindows11バージョ…

   もっと読む

2. 

   ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 3PV

   過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…

   もっと読む

3. 

   車のキーナンバー確認方法。キーレス紛失や壊れた時 2PV

   初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

   もっと読む

1. 

   カーメイトのエンジンスターターでエラー15表示と対処方法 36PV

   夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

   もっと読む

2. 

   ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 28PV

   本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

   もっと読む

3. 

   車のキーナンバー確認方法。キーレス紛失や壊れた時 27PV

   初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

   もっと読む

1. 

   カーメイトのエンジンスターターでエラー15表示と対処方法 36PV

   夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

   もっと読む

2. 

   ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 28PV

   本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

   もっと読む

3. 

   車のキーナンバー確認方法。キーレス紛失や壊れた時 27PV

   初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

   もっと読む

今日は2025年2月22日です。

目次に行く･戻る

2025年2月22日 (土曜日)本日の人気記事トップ１０

• ワコーズRECSでアイドリング不調と燃費改善効果とレ PV7
• エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ5
• Windows11 24H2不具合エクスプローラーのツールバー詳細 (…)が下に表示でなく上に表示解決方法4
• ECUをリセットする方法。アイドリング不安定だったのでしょうがなく3
• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法3
• エクストレイルT32マイナーチェンジ後ステアリング外し方2
• マウスの左クリックや右クリックが効かないのでマウス分解して直す方法2
• 車のキーナンバー確認方法。キーレス紛失や壊れた時2
• PITWORKエンジンリフレッシュのレ PV効果ありワコーズRECSに似ている2
• エクストレイルリアワイパー交換方法と純正部品番号2

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

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

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

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場