ワードプレスで作成した投稿ページや固定ページにカウントダウンタイマーを表示させるプラグイン

本日はワードプレスサイトに簡単導入できるカウントダウンタイマーをご紹介いたします。カウントダウンタイマーがあれば販売を目的としたセールスページやランディングページへ設置することで閲覧者へ「デッドライン（申し込み期限）」を表示させられます。終了期限を明示するとユーザーに対して「締め切り効果」を与えられますのでぜひご活用くださいませ。

では、インストール画面から進めていきましょう。まずはいつも通り、「プラグイン > 新規追加」からプラグインを入れていきます。

次に右上にある検索ボックスへ「Countdown」とキーワードを入力しましょう。すると下側の一覧画面に「Countdown Timer Ultimate」というプラグインが表示されますので「今すぐインストール」ボタンをクリックしてください。

今すぐインストールをクリックすると「インストール中」と表示されます。

インストールが完了したら「有効化」をクリック。

有効化が完了すると以下の画面が表示されます。「Skip」をクリック。

一覧画面に移動しますので「Add Timer」をクリックして一つタイマーを作っていきましょう。

作成画面は以下の通りです。

一番上にある項目は「テストカウントダウンタイマー」などで構いませんので名前を付けましょう。次にExpiry Dateの項目で終了期日を設定してください。今回は「2018年11月30日23時59分59秒」と設定しました。

そして、最下部にある「Foreground Color」で表記文字を変更しておきましょう。

一通り入力が完了したら右上にある「公開」ボタンをクリックします。

以下のメッセージが表示されると事前設定の作成が完了となります。

では次にページ側に表示させる「ショートコード」をコピーしておきます。管理画面の左メニューに追加されている「Countdown Timer > Countdown Timer」をクリックして、作成済みカウントダウンタイマーの一覧ページへ移動しましょう。

Countdown Timerをクリックすると以下のページが表示されます。

右側にあるShortcodeをマウスでなぞってコピーしてください。

そして、コピーしたショートコードを「投稿ページや固定ページ」の表示させたい箇所へ貼り付けましょう。その後にページのプレビュー画面を開くとさきほど「2018年11月30日23時59分59秒」で設定したカウントダウンタイマーが表示されています。

賢威テーマの場合、見出しのh4タグ（日・時・分・秒）に下線が表示されてしまっていますのでCSSで消していきたいと思います。

画面上部にある黒いバーのメニューから「カスタマイズ」をクリック。

次に「追加CSS」を選択して、CSSの入力ボックスを開きます。

追加CSSの入力ボックスが開いたら、以下コードを追記してください。

.wpcdt-countdown-timer h4 {
	border: none;
}

追記した状態が以下となります。右側のプレビュー画面でもh4部分に表示されていたボーダー（点線）が非表示になったことが確認できますね。

入力が完了したら上側にある「公開」ボタンをクリックしましょう。

そして、「公開」ボタンを押し終えたら、「×」ボタンで画面を閉じます。

以上で設定が完了となります。

カウントダウンタイマーは終了段階で別ページにリダイレクトさせるとより効果的です。タイマーが終了しているのにずっと同じページが表示されていると何のためのカウントダウンなのかよく解らない状態となってしまい逆に閲覧者を迷わせる場合があります。

先日に紹介した記事の「Future Post Switch」と併用するとより効果的です。ぜひご活用ください。