カウントダウンタイマープラグイン「Countdown Block 」の使い方【WordPress無料プラグイン】

テーマ切り替えに関するFAQ
初心者

サイトに数字がカウントダウン式で減っていくタイマーを設置したい
無料で簡単に使えるプラグインってないの?

そんな疑問に答えます。

WordPress無料プラグインの「Countdown Block」が使いやすく割とおすすです。

この記事では初心者向けにCountdown BlockプラグインでWordPressサイトにカウントダウンタイマーを設定する手順を解説します。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

WordPressにカウントダウンタイマーを設置できるプラグイン

WordPressにカウントダウンタイマーを設置できるプラグイン

Countdown Blockはページの好きな場所にカウントダウンタイマーをマウス操作で設置できるWordPress専用プラグインです。いろんなカウントダウンプラグインを試した中で、このプラグインが一番のお気に入りです!

【サンプル】どんな感じのカウントダウンタイマーか?

初心者

どんな感じなの?
サンプルを見てみたい。

かんた

Countdown Blockプラグインを使ってサンプルを作ってみました。

デモサイトその1はページ中央のNEXT EVENT部分にカウンターを設置しています。デモサイトその2はページ上部の時計がCountdown Blockプラグインで作成したパーツです。

デモサイトはWordPressテーマのSWELLを使っています。

【概要】Countdown Blockプラグインって何?

Countdown BlockはWordPress公式ディレクトリーに登録済されているプラグインです。

かんた

誰でも無料で使えます。

Countdown Block
プラグインの読み方カウントダウンブロック
開発者WPDeveloper
有効インストール数1,000+
検証済み最新バージョンWordPress 5.6.4
ダウンロードCountdown Block公式ページ
Countdown Blockプラグインの基礎知識

※2021年6月21日のデータです

Countdown Blockプラグインのインストール方法

Countdown BlockプラグインはWordPress公式プラグインディレクトリーに公開されています。以下いずれかの方法でプラグインをインストールし有効化しましょう。

  1. ダッシュボード上「プラグイン」→「新規追加」、「Countdown Block」で検索
  2. 公式サイトからプラグインファイルをダウンロードしサイトにアップロード
かんた

どちらでもOK。
やりやすい方法でプラグインをインストールし、有効化しましょう。

Countdown Blockプラグインの使い方

Countdown Blockプラグイン

Countdown Blockプラグインを有効化すると、ブロックエディター上で専用のブロックが利用できるようになります。

かんた

Count」と入力すると見つかります!

Countdown Blockを使うザックリした流れ

  1. 固定ページ、投稿ページを開く
  2. Countdownブロックを挿入する
  3. カウントダウン対象に日時を指定する
  4. フォントサイズ、色などをブロックオプションから設定する

Countdown Blockの設定オプションはかなり充実しています。基本ノーコードで設定できるので初心者でも問題なく扱えるプラグインです

カウントダウンタイマーはサイトにいくつでも設定できます。1つの投稿内に異なる複数のタイマーを設置できます。イベント系のサイトで複数のイベントを同じページで通知をしたいといったケースでも使えます。

Countdown Blockプラグインの設定オプション

必須の設定

Timer Setting

Countdown Blockを挿入したら必須なのが「Timer Setting」です。

Timer Settingはカウントダウンの目標日です。例えば「2021年3月1日午後7時」までのカウントダウンを表示する設定です。ブロックオプションにカーソルをあわせるとカレンダーが表示されますので日程を必ず選択しましょう。

任意の設定オプション

フォントのサイズ、色などの設定がブロックオプションから行えます。

Context Setting説明
Display Days日付を表示するかどうかです。
この設定がオンの場合、カウントダウンは
○○日まで20日18時間30分14秒といった形式で表示されます。
設定をオフにすると「20日」部分が表示されず、18時間30分14秒と表示されます。
Display Hours「Display Days」と同じ用途です。
こちらは「時間」部分。
Display Minutes「Display Days」と同じ用途です。
こちらは「分」部分。
Display Seconds「Display Days」と同じ用途です。
こちらは「秒」部分。
Context Settingの説明
かんた

時間が過ぎていく間で訴求力を出したい場合は「Display Seconds」をオンにするのがおすすめです。秒が刻々と過ぎ去っていく感じをアピールできます。

Context Setting説明
Custom Label For Daysカウントダウンの数字に下に表示されるラベル部分です。
デフォルトでは英語で「Days」と表示されます。日本ユーザー向けなら「日」に設定しましょう。
Custom Label For Hours日本人ユーザー向けなら「時間」に設定しましょう。
Custom Label For Minutes日本人ユーザー向けなら「分」に設定しましょう。
Custom Label For Seconds日本人ユーザー向けなら「秒」に設定しましょう。
Context Settingの説明
かんた

英語でオシャレな感じにしたい場合はデフォルトのままでもOKです。

Container Margin & Padding説明
Marginカウントダウンタイマーブロックの外側の余白です。
余白は「数値+px,em,%」で指定できます。
パディングカウントダウンタイマーブロック内側余白の設定オプションです。
余白は「数値+px,em,%」で指定できます。
Container Margin & Paddingの説明
かんた

基本何も設定しなくてOK。
「日」「時間」など、個別の数字を囲んでいるボックスじゃないので注意しましょう。

サイドバーやフッターにカウンタータイマーを設置する方法

一部のテーマは「ブログパーツ」「テンプレート」「ブロックパターン」と呼ばれる投稿機能があり、それらの機能を使うとブロックエディター上で作成したカウトダウンタイマーをサイドバーやフッターに設置できます。

対応しているテーマ

テーマ機能公式サイト
SWELLブログパーツダウンロード
Cocoonテンプレートダウンロード
かんた

SWELLを例にサイドバーにカウントダウンタイマーを設置する方法を紹介します。

サイドバーに設置する流れ

  1. ブログパーツ上で「CountdonwBlock」ブロックを挿入する
  2. カウントダウンタイマーを作成する
  3. ウイジェットにブログパーツを設置する
かんた

SWELL以外でも同じ方法でサイドバーやフッターウィジェット上にカウントダウンタイマーを設置できます。

Cooonなら「テンプレート機能」。Nishiki Proなら「ブロックパターン機能」でカウントダウンタイマーを作成し、ウィジェットに呼び出しコードを設置しましょう。

【プラグイン無し】カウンター自作のサンプルコード

カウントダウンタイマーをプラグイン無しでWordPressサイト上に設置する方法を紹介します。

かんた

次のような人向けです。

  • プラグインは減らしたい
  • CountdownBlockプラグインが動作しなかった

カウントダウンタイマーのサンプルコード

カウントダウンタイマーを設置したい任意の場所に次のコードを設置ましょう。

設置場所の例

  • 固定ページ・投稿ページのエディター上(カスタムHTMLブロック)
  • テーマ内のテンプレートファイル(例:header.php、foote.php)
  • ウィジェット

サンプルコード

<div id="Timer"></div>
<script language="JavaScript" type="text/javascript">
function Count(elm,tl,mes){
 this.initialize.apply(this,arguments);
}
Count.prototype={
 initialize:function(elm,tl,mes) {
  this.elem = document.getElementById(elm);
  this.tl = tl;
  this.mes = mes;
 },countDown:function(){
  var timer='';
  var today=new Date();
  var day=Math.floor((this.tl-today)/(24*60*60*1000));
  var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
  var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
  var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
  var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
  var me=this;

  if( ( this.tl - today ) > 0 ){
   if (day) timer += '<span class="c-day">'+day+'日</span>';
   if (hour) timer += '<span class="c-hour">'+hour+'時間</span>';
   timer += '<span class="c-min">'+this.addZero(min)+'分</span><span class="sec">'+this.addZero(sec)+'秒</span>';
   this.elem.innerHTML = timer;
   tid = setTimeout( function(){me.countDown();},10 );
  }else{
   this.elem.innerHTML = this.mes;
   return;
  }
 },addZero:function(num){ return ('0'+num).slice(-2); }
}
function CTIMER(){
 var tl = new Date('2021/1/1 00:00:00');
 var timer = new Count('CTIMER',tl,'終了!');
 timer.countDown();
}
window.onload=function(){
 CTIMER();
}
</script>

var tl = new Date(‘2021/1/1 00:00:00’);」部分に、カウントダウン対象の日時を指定して使ってください。

例えば2021年12月20日を指定する場合は「var tl = new Date(‘2021/12/20 00:00:00’);」といった感じです。「何時から」と時間を指定する場合は「00:00:00」部分を変更しましょう。

まとめ

WordPressサイトにカウントダウンタイマーを設置できる無料プラグイン「Countdown Block」を紹介しました。

イベント情報やアフィリエイトサイトなどの訴求力アップといったケースで使えそうなプラグインです。

日本語には対応していませんが、それほど難しい設定ではありません。ぜひカウントダウンタイマーの設置にチャレンジしてみてください!

よかったらシェアしてね!
  • URLをコピーしました!
目次