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

2024年11月21日 (木曜日)本日の人気記事トップ１０

• マイナ保険証なくても資格確認書で受診可能保険証は最長1年有効168
• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法71
• エクストレイルフォグランプが下を向きすぎている光軸調整方法26
• カーメイトのエンジンスターターでエラー15表示と対処方法23
• Windows10で動かないアプリを動かす方法216
• ECUをリセットする方法。アイドリング不安定だったのでしょうがなく11
• ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に10
• エクストレイルT32オルタネーターB端子からプラシングとアーシング10
• エクストレイルリアワイパー交換方法と純正部品番号9
• Windows10起動しない使えないアプリを起動する方法(筆ぐるめなど)8

今日は2024年11月21日です。

目次に行く･戻る

2024年11月21日 (木曜日)↓における週間月間人気記事トップ３は？↓

• 本日
• 週間
• 月間

1. 

   エクストレイルフォグランプが下を向きすぎている光軸調整方法 39PV

   人気車種のSUVで日産エクストレイルT32型のフォグランプは、光軸が下を向きすぎているためせっかくLEDフォグランプにしたりHIDにしたりしてもその恩恵をあまりかんじられません。要は、ボンネットが少し…

   もっと読む

2. 

   Windows10で動かないアプリを動かす方法2 16PV

   先日も書きましたWindows10の不具合？に関することです。 不具合と言うのか仕様と言えば良いのかわかりませんが、とにかくWindows10にアップグレードしたりWindows10に若干古めのアプリ…

   もっと読む

3. 

   ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に 9PV

   NISSANエクストレイルは日産の中でも人気のSUV車です。そのエクストレイルは今年の6月8日にT32型の後期型がマイナーチェンジして発売されました。新しい後期型にはメーカーオプションで話題の半分自動…

   もっと読む

1. 

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

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

   もっと読む

2. 

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

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

   もっと読む

3. 

   ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

   ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

   もっと読む

1. 

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

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

   もっと読む

2. 

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

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

   もっと読む

3. 

   ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

   ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

   もっと読む

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

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

ブログサービスが始まってから:

0

カウントダウンタイマー

Windows11システム要件を満たさないPCでアップグレードインストール方法

もう約1年程度でWindows10のサポート期間が終了してしまいます。早いものでWindows10が出てから約10年が経とうとしています。現在ではWindows11が2021年後

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

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

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

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

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

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告

お小遣い稼ぎにアンケート。