現在の接続環境は
です

記事内にプロモーションが含まれています。

Windows10サポート終了まで
¥1,650 (2024/11/30 16:49時点 | Amazon調べ)

プロモーションを含みます

WordPress カスタマイズ カスタマイズ メンテナンス 伝えたいこと 備忘録

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

所要時間目安:11

This session is using  IPv4  is established in

2024年12月11日 (水曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. キーレスリモコン破損

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

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

    もっと読む

  2. マウス分解清掃前

    マウスの左クリックや右クリックが効かないのでマウス分解して直す方法 6PV

    マウスは今やパソコンなどにはなくてはならない入力装置です。入力機器。昔のキーボードのみでの操作には戻れませんね。そこで長年使ってきたマウスの右クリックではなく左クリックが効かなかったりジャダー(チャタ…

    もっと読む

  3. エンジンスターターリモコン

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

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

    もっと読む

  1. エンジンスターターリモコン

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

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

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

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

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

    もっと読む

  3. つぶつぶ入りのスクラブ洗顔料

    マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も 99PV

    画像出典元:5 Gyres今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック(もしくは、マイクロビーズ)というものがあります。このマイクロプラ…

    もっと読む

  1. エンジンスターターリモコン

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

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

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

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

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

    もっと読む

  3. つぶつぶ入りのスクラブ洗顔料

    マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も 99PV

    画像出典元:5 Gyres今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック(もしくは、マイクロビーズ)というものがあります。このマイクロプラ…

    もっと読む

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

目次に行く・戻る

メルカリ招待コード:

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

上記ショートコードの使用方法

  1. functions.phpに追加:
    上記のコードをテーマのfunctions.phpファイルに追加します。
  2. ショートコードの利用:
    投稿やページ内で以下のようにショートコードを使用します。
   [countdown_timer end_date="2024-12-31 23:59:59"]
  • end_date属性にはカウントダウン終了日時を YYYY-MM-DD HH:MM:SS の形式で指定します。

カスタマイズ

  • デフォルトの終了日時:
    functions.php内の'end_date' => '2024-12-31 23:59:59'を変更することで、デフォルトの終了日時を設定できます。
  • スタイルの変更:
    必要に応じて、HTML内のstyle属性を調整してカウントダウンタイマーの外観をカスタマイズできます。

注意点

  • タイムゾーン設定:
    timezone属性を変更することで、タイムゾーンを調整できます。デフォルトではAsia/Tokyoに設定されています。
  • ユニークなID:
    複数のカウントダウンタイマーを同じページ内に配置する場合、各タイマーにユニークなIDが割り当てられるため、衝突を避けることができます。

このショートコードを使用することで、簡単にWordPressサイトにカウントダウンタイマーを追加し、イベントやキャンペーンの締め切りを視覚的に表示できます。

さらに他にもシンプルなカウントダウンタイマーのショートコード作成するコードはいくつかの方法があります。以下のショートコードなどもシンプルなカウントダウンタイマーを作成するコードになります。

// カウントダウンタイマーのショートコードを作成
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');

使い方

  1. コードの追加:
  • 上記のコードを使用して、WordPressテーマのfunctions.phpファイルに追加します。子テーマを使用している場合は、子テーマのfunctions.phpに追加することをおすすめします。
  1. ショートコードの挿入:
  • 投稿やページの編集画面で、以下のようにショートコードを挿入します。 [countdown_timer end_date="2024-12-31T23:59:59" timezone="Asia/Tokyo"]([]は半角英数字に変換しなおしてください。)
  • パラメータ:
    • end_date: カウントダウンの終了日時を指定します。フォーマットは YYYY-MM-DDTHH:MM:SS です。
    • timezone: タイムゾーンを指定します(例: Asia/Tokyo, UTC, America/New_York など)。
  • :
    [countdown_timer end_date="2025-01-01T00:00:00" timezone="Asia/Tokyo"]

[]は半角英数字に変換しなおしてください。

これは、指定した日時までのカウントダウンを表示します。カウントダウンが終了すると「カウントダウン終了」と表示されます。

注意点

  • タイムゾーン: 正確なカウントダウンを行うために、適切なタイムゾーンを指定してください。
    タイムゾーンの一覧は こちら を参照してください。
  • 日付フォーマット: end_date の値は正しいISO 8601形式(例: 2024-12-31T23:59:59)で指定してください。

このショートコードを使用することで、簡単にカウントダウンタイマーをサイト内に表示することができます。

phpテンプレートに直接ショートコードを記載する際には、以下のようにショートコードを追記します。

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

というように、本文中やウィジェットエリア内以外で直接テンプレートに追記しシンプルなカウントダウンタイマーを表示させるには、<?php echo do_shortcode( '[ショートコード名]' ); ?>というようにして出力させることができます。

最後にプラグインを使ってのカウントアップタイマーの設置が可能なプラグイン一覧を記載しておきます。

WordPressのベストカウントダウン・タイマー・プラグイン
あなたのサイトにカウントダウンタイマーを簡単に追加できるWordPressプラグインがいくつかあります。以下にベストなWordPressカウントダウンタイマープラグインを見てみましょう。

  1. シードプロ
  2. オプチンモンスター
  3. スライブ・アルティメイタム
  4. 究極のカウントダウンタイマー
  5. カウントダウンビルダー
  6. エバーグリーンカウントダウンタイマー
  7. ハリータイマー
  8. WooCommerce クーポンカウントダウン
  9. カウントダウンタイマー
  10. 売上カウントダウンタイマー
  11. 11.イージータイマー

クリスマスまであと…プレゼントは用意されましたか?

おすすめ!!

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

おすすめ2

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

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

0

カウントダウンタイマー

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

🎉 Counting Up! 🎉
Loading...
大山式ボディメイクパット趾

伝えたいこと 備忘録

足、膝、腰の痛みにオススメ大山式ボディメイクパット

 今日、楽天メルマガにて紹介されていた大山式足指(趾)間のゴム製のもので、 姿勢の矯正と足の外側に向いてしまった重心の内側化そして、骨盤矯正にまで影響するというものです。早速、 ここ数年左足…

もっと読む

インフィード広告アドセンス

ページ表示速度高速化

Stinger6 Stinger7 WordPress インターネット カスタマイズ テーマ 伝えたいこと 備忘録

ページ表示速度高速化レンダリングブロック解決方法ができた!!

ふぅ~ε=(・ρ・*) フゥ、やっとできた!! ここ数日なんとかサイトのページ表示速度をできるだけ速く高速化したいなぁ。とずぅ~っと考えていました。今日も昨日も記事にしていますが^^;)(汗)…。おそ…

もっと読む

インフィード広告アドセンス

FFFTP

PC 伝えたいこと 備忘録 時事ネタ

FFFTP1.99最新バージョン正式版がリリースされました

FTPソフトと言えば?Windows98の頃からある(昔)からあるffftp(FFFTP)だと思います。IBMホームページビルダーなど有償アプリケーションなどには基本的にメーカーが作成したFTPソフト…

もっと読む

インフィード広告アドセンス

スマホでのピンチアウト操作方法

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

スマホでピンチアウトできないStinger6、Stinger7、StingerPLUS+でのピンチアウト方法

WordPressでのテーマとして超有名でかつ、カスタマイズ性に優れたStingerシリーズがあります。 そのStingerシリーズ(micataシリーズとAFFINGERシリーズ)では、最近(昨今流…

もっと読む

インフィード広告アドセンス

記事上に人気記事表示

AdSense Stinger6 WordPress カスタマイズ

Stinger6トップページ記事間にアドセンス広告を表示・入れる方法

ここのところ WordPressにハマっている私です。 特にまだ始めたばかりなのでカスタマイズに没頭中です。(汗) トップページの記事一覧にダッシュボードのStinger管理よりいくつの記事を表示する…

もっと読む

インフィード広告アドセンス

市川海老蔵妻小林麻央さんの病状について

伝えたいこと 備忘録 時事ネタ 治療

小林麻央さんの病状も気になるが北斗晶さんの病状も気になる…。

私の従兄弟のお嫁さんが数年前に片方の乳房、そして今年両方の乳房を全摘手術…。再従兄弟も2年前に乳がんが発覚し片方の乳房を全摘手術したこともあり・・・・・・。先日、夫の市川海老蔵さんが会見を開いて、 妻…

もっと読む

あなたが訪問してから

0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告

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

Multiplex 広告

Total68


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-WordPress, カスタマイズ, カスタマイズ, メンテナンス, 伝えたいこと, 備忘録

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

あと5秒で記事が閲覧できます。