カウントダウンタイマーというともうインターネットが普及したばかりの頃からあるように思います。ホームページの時から始まりブログなどでも使用され今では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 {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (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 {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (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 {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (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');上記ショートコードの使用方法
functions.phpに追加:
上記のコードをテーマのfunctions.phpファイルに追加します。- ショートコードの利用:
投稿やページ内で以下のようにショートコードを使用します。
[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 {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance {cef5aed0a4ddd38fb4a46370c0420b24042e11e5ea48583343b33cad007100cc} (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');使い方
- コードの追加:
- 上記のコードを使用して、WordPressテーマの
functions.phpファイルに追加します。子テーマを使用している場合は、子テーマのfunctions.phpに追加することをおすすめします。
- ショートコードの挿入:
- 投稿やページの編集画面で、以下のようにショートコードを挿入します。
［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カウントダウンタイマープラグインを見てみましょう。
- シードプロ
- オプチンモンスター
- スライブ・アルティメイタム
- 究極のカウントダウンタイマー
- カウントダウンビルダー
- エバーグリーンカウントダウンタイマー
- ハリータイマー
- WooCommerce クーポンカウントダウン
- カウントダウンタイマー
- 売上カウントダウンタイマー
- 11.イージータイマー
あなたにおすすめ
関連記事
-
-
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…
-
-
日産ディーラーオプションナビMM316D-WからMM518D-L交換（換装）NISSAN純正ナビリモコン
ある程度、年式がたった車においてはディーラーオプションナビ（DOP）やメーカーオプションナビ（MOP）の地図データが古くなったり、ナビのモニタインチ数が大きくなったりします。地図データが古くなるのはも…
-
-
車のキーナンバー確認方法。キーレス紛失や壊れた時
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
ポチップ 
ポチップ 入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ１０
- カーメイトのエンジンスターターでエラー15表示と対処方法
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
- アルミテープチューン貼る場所で燃費向上と走行性能アップTOYOTAの特許を試してみた
- 車のキーナンバー確認方法。キーレス紛失や壊れた時
- TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
- エクストレイルT32マイナーチェンジ後ステアリング外し方
- 日産ディーラーオプションナビMM316D-WからMM518D-L交換（換装）NISSAN純正ナビリモコン
- アイドリングストップシステム異常警告灯表示対処方法
- キーIDが正しくありません。エクストレイルT32インテリジェントキー電池交換CR2032
おすすめの記事一部広告
- カーメイトのエンジンスターターでエラー15表示と対処方法141
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法135
- 車のキーナンバー確認方法。キーレス紛失や壊れた時121
- 日産ディーラーオプションナビMM316D-WからMM518D-L交換（換装）NISSAN純正ナビリモコン99
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく92
- TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）89
- キーIDが正しくありません。エクストレイルT32インテリジェントキー電池交換CR203283
- アルミテープチューン貼る場所で燃費向上と走行性能アップTOYOTAの特許を試してみた78
- エクストレイルT32マイナーチェンジ後ステアリング外し方72
- アイドリングストップシステム異常警告灯表示対処方法67
新着コメント