WordPressにカウントダウンタイマーを設置する方法

フク郎 — Sun, 17 Jun 2018 21:30:21 +0000

期間限定のイベントなどがある場合「終了まであと○日○時間○分」などのようにカウントダウンタイマーを設置すると注目してもらいやすくなります。

WordPressにもカウントダウンタイマーを表示するプラグインはあるのですが、機能が物足りなかったりデザインがいまいちなプラグインが多いです。

今回はそのようなカウントダウン系のプラグインの中でも使いやすいと思った「Uji Countdown」というプラグインの使い方を紹介します。

Uji Countdownの導入

メニューから「プラグイン」ー＞「新規追加」と進み、プラグイン名で検索すると検索結果に次のようプラグインが表示されるのでインストールしてください。

以下のURLからダウンロードして使うことも可能です。

インストールして有効化すると「設定」ー＞「Uji Countdown」にプラグインの設定画面が追加されます。

Uji Countdownをインストールしたら個別ページやウィジェットでタイマーを設置できるのですが、その前にカウントダウンタイマーのスタイルを追加する必要があります。

まず「設定」ー＞「Uji Countdown」から次のような設定画面を開きます。

スタイルがない状態だと上の画像のように「Add New Style」ボタンが表示されるのでそれを押してください。

するとスタイルの次のようなスタイルの新規作成画面が出てきます。

ここでタイマーのスタイルを設定できます。主な設定項目は次の通りです。

これらの項目を設定して下の方にある「Save Style」をクリックするとスタイルが作成されます。

次にやっておいた方が良いことはDaysやHoursなどのカウントの下に表示されるテキストの翻訳です。

まず設定画面で「Settings」タブを開き、「Quick Translation」という項目があるのでその中で次のようにDaysには日、Hoursには時間など日本語訳を入力してください。

全ての翻訳を入力して「Save Changes」をクリックすると設置するタイマーの時間テキストに翻訳が反映されます。

カウントダウンタイマーを設置するには次の２つの方法があります。

この２つの設置方法について両方紹介します。

Uji Countdownを有効化すると編集画面のビジュアルエディターにタイマーの挿入ボタン(←このようなアイコン)が表示されます。

スタイルを追加した状態でこのボタンを押すと次のようなカウントダウンタイマーの挿入画面が出てきます。

この挿入画面で主に次のような項目を設定します。

このような項目を設定した後に「Insert」を押すと次のようなショートコードが記事内に挿入されます。

表示されるタイマーの見た目はこんな感じ

時間が表示されているパネルの大きさや色などはスタイルの設定から好きなように変えられます。

また画面幅の狭いスマホでは分や秒が折り返して表示されるのでレスポンシブ対応にもなっているようです。

サイドバーやタイトル上などの固定領域に表示するには「外観」ー＞「ウィジェット」に進むと次のような「Uji Countdown」というウィジェットが見つかります。

このウィジェットを次のように固定領域に設置するだけです。

カウントダウンの設定方法や、カウントが０になった後の処理の仕方については記事内での設置とほとんど同じです。

設定が終わったら「保存」を押すとその領域にカウントダウンタイマーが表示されるようになります。

以上WordPressでカウントダウンタイマーを表示するプラグイン「Uji Countdown」の使い方について紹介しました。