スキルアップを始める!

【WordPress】カウントダウンタイマーを表示させたい時に便利なプラグイン|Countdown, Coming Soon, Maintenance – Countdown & Clock

WordPress(ワードプレス)
WordPress(ワードプレス)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

スキルを手に入れた時、人は強くなれる。
Youtubeでスキルアップを始める 電子書籍でスキルアップを始める
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

ワードプレスで「カウントダウンタイマーを表示させたい」と思った時にはいくつかのプラグインがありますが、こちらの「Countdown, Coming Soon, Maintenance – Countdown & Clock」プラグインもオススメです。

カウントダウンビルダー–カスタマイズ可能なカウントダウンタイマーウェブサイトにカウントダウンタイマーを追加するための非常にシンプルなプラグイン。カウントダウンタイマーを使用すると、数分で機能的なカウントダウンタイマーを作成できます。

https://ja.wordpress.org/plugins/countdown-builder/

プラグインをインストールする

まずは、いつものようにプラグインをインストールして有効化します。

そうすると、メニューに設定や機能が表示されます。

[rml_read_more]

とりあえず、何も設定せずDefaultという作られているカウントダウンのショートコードをページに貼ってみます。

ショートコードを貼り付けて公開します。

何も表示されない・・・?

再度、設定をする

カウントダウンも何も表示されなかったので、設定を見直してみます。

「Default」のカウントダウンを編集してみます。

ちょっとパッと見て設定が分からなかったので、いったん新規作成してみます。

Add New(新規作成)

新しいカウントダウンを新規作成してみます。種類が色々と準備されていて、PROプランにすると、カウントダウンの種類が増えるようです。

カウントダウンが表示されました!!

○○までのカウントダウンを変更する

例えば、年末まで(新年まで)のカウントダウンを表示させたい場合は、Due Dateを1/1の0:00に変更します。

まずは、Time ZoneをTokyo(東京)に変更します。

Due Dateを1/1の0:00に変更すると、残りのカウントダウン日数が変わりました!

表示時間部分を変更する

表示時間部分はDays~からStyleの設定部分で変更ができるようになっていました。

秒部分が表示されないようにSecondsをオフにしてみました。秒部分が非表示になります。

font sizeの値を大きくすると、数字が大きくなります。あとは、labelの部分を日や時間という文字に変えると、表示部分の文字も変わりました。

いい感じにカウントダウンが表示されています!!

まとめ

ひとまず「Countdown, Coming Soon, Maintenance – Countdown & Clock」プラグインのインストールから設定を試してみました。また機会があれば他のカウントダウンも試してみます!

「カウントダウン」や「タイマー」をワードプレスで表示したいと思った時には便利なプラグインです。お試しください😃

URLをコピーしました!