新WordPressテーマ「THE THOR(ザ・トール)」へ改装完了!
T(-) Countdownキャプチャー

【WordPressプラグイン】T(-) Countdownの設定方法と使い方を解説!

今回は、ちょっとカッコ良いカウントダウンタイマーを設置することができるWordPressプラグイン「T(-) Countdown」の紹介をします。

jqueryなどのプログラム言語を使ってカウントダウンを表示させる方法もあるのですが、素人にはかなり敷居が高い手法なので、ここは簡単にプラグインを頼っちゃいましょう!

タケ坊
タケ坊
購買行動の後押しにも効果的なカウントダウンタイマーです。
柚子
柚子
セール期間の告知には最適なカウントダウンタイマーは積極的に活用しましょー!

WordPressプラグイン「T(-) Countdown」とは?

T(-) Countdownとは?

T(-) Countdownは、ブログサイトに簡単にカウントダウンタイマーを設置するプラグインです。

前回、WordPressでカウントダウンタイマーを設置できるプラグイン「Easy CountDowner」の紹介をしました。

⇒⇒Easy CountDownerの使い方と設定方法の記事はコチラ

このプラグインは、見た目がちょっとシンプル過ぎて物足りない感じがしたので、もっとデザインがカッコいいタイマーはないかと探して発見しました。

  • widgetエリアにカウントダウンタイマーを設置
  • 複数のスタイルが選べる
  • 投稿・固定ページにはショートコードでタイマーを設置(HTML・CSSの知識が必要)
  • 有料版の拡張機能でより細かな設定が可能

 

どのような動作をするかデモサイトで試してみたので参考にしてください。

デモサイトへGO!

T(-) Countdownには様々なスタイルが用意されていて、サイトデザインに合ったスタイルを選ぶことができます。

参考までに各スタイルをまとめてみました。

Style:c-3po

デモ1

Style:c-3po-mini

デモ2

Style:carbonite

デモ3

Style:carbonite-responsive

デモ4

Style:carbonlite

デモ5

Style:circle

デモ6

Style:cloud-city

デモ7

Style:darth

デモ8

Style:hoth

デモ9

Style:jedi

デモ10

Style:naboo

デモ11

Style:sith

デモ12

Style:TIE-fighter

デモ13

T(-) Countdownのインストール

それでは、「T(-) Countdown」のインストールです。

管理メニュー画面のプラグイン新規追加から「T(-) Countdown」を検索してインストールします。

プラグイン新規追加からインストール

または公式サイトからダウンロードしてインストールします。

【公式サイト】T(-) Countdown

公式サイトからダウンロードしてインストール

柚子
柚子
プラグインのインストール方法はこちらを参照してね!
関連記事

タケ坊 今回はWordPressの基本の1つ、プラグインのインストール方法について話しましょうか。 柚子 そーだね!ところで、そもそもプラグインが分からないって人はいないかな? タケ坊 […]

WordPressプラグインのインストール方法
柚子
柚子
プラグインをインストールしたら有効化を忘れないでね!

T(-) Countdownの設定方法

次はT(-) Countdownの設定方法ですが、それぞれのスタイルをカスタマイズする為のCSSを設定します。

管理メニュー画面の設定から「T(-) Countdown」をクリックします。

管理メニュー画面の設定からT(-) Countdownをクリック

設定画面が開きますので、カスタムCSSを設定します。

カスタムCSSを設定

こちらの設定は、HTMLやCSSの知識がないと難しいので、自信がない場合は触らない方が良いでしょう。

タケ坊
タケ坊
色々いじってみたけど、表示が崩れたりして難しかったです。
勉強しなきゃ!

T(-) Countdownの使い方

T(-) Countdownの使い方は2通りあります。

1つは、専用のウィジェットを使用してサイドバーなどにカウントダウンを表示させる方法と、ショートコードを使用して投稿・固定ページに表示させる方法です。

widgetを使用する方法

管理メニュー画面の外観⇒ウィジェットをクリックします。

外観⇒ウィジェットをクリック

T(-) Countdownのwidgetボックスが追加されているので、これを任意の場所にドラッグ&ドロップします。

ウィジェットBOXを任意の場所にドラッグ&ドロップ

T(-) Countdownのボックスを開くと詳細設定画面が開きます。

使用方法

①Title: タイマーのタイトルを入力します。タイマーの左上に表示されます。
②Target: タイマーの終了日と時刻を指定します。
③Style: タイマーのスタイルを13種の中から指定します。
④Omit weeks from timer. タイマー表示に「週」を含めるか指定します。チェックを入れると「週」を省きます。
⑤Inject JavaScript Inline. JavaScriptをHTMLソースに含めるかを指定します。
⑥Top HTML: タイマー上部のHTMLを入力します。
タイマー下部のHTMLを入力します。
⑧Launch Event HTML: タイマーのカウントが「0」になった時のHTMLを入力します。
⑨Launch Target: カウント終了後の表示を指定します。
Above Countdown:タイマーの上部にHTMLを表示
Below Countdown:タイマーの上部にHTMLを表示
Entire Countdown:タイマーの表示を消してHTMLを表示
Count Up:HTMLを表示せずにタイマーをカウントアップに切り替え
⑩How do you spell “weeks”?: 「週」表示のテキストを変更します。デフォルトは「weeks」
⑪How do you spell “days”?: 「日」表示のテキストを変更します。デフォルトは「days」
⑫How do you spell “hours”?: 「時」表示のテキストを変更します。デフォルトは「hours」
⑬How do you spell “minutes”?: 「分」表示のテキストを変更します。デフォルトは「minutes」
⑭And “seconds” are spelled: 「秒」表示のテキストを変更します。デフォルトは「seconds」
柚子
柚子
サイドバーとかサイト全体でカウントダウンタイマーを表示させたい場合はウィジェットで表示させます!

ショートコードを使用する方法

次はショートコードを使用して、投稿ページや固定ページの任意の場所に表示させる方法です。

ショートコードのテンプレートを用意したので、参考に使ってください。

[tminus t= “DD-MM-YYYY HH:MM:SS” style=”c-3po“]Text that is displayed when timer reaches zero[/tminus]

ショートコードの説明です。

赤文字の部分を任意の値に変更します。

「DD-MM-YYYY(半角スペース)HH:MM:SS」は「日-月-年 時-分-秒」となります。

なので、例えば2020年1月1日の9時20分30秒にタイマーを設定する場合は

[aside type=”boader”]”01-01-2020 09:20:30″[/aside]

という感じになります。

「style=”c-3po“」は上記で紹介したスタイルのスタイル名を入力します。

なので、「c-3po」のスタイルを使って、2020年1月1日の9時20分30秒にタイマーをセットする場合のショートコードは

[tminus t= "01-01-2020 09:20:30" style="c-3po"]Text that is displayed when timer reaches zero[/tminus]

となります。

柚子
柚子
コピペして使ってね!

WordPressプラグイン「T(-) Countdown」のまとめ

まとめ

いかがでしたか?

今回はWordPressプラグイン「T(-) Countdown」のインストールから使い方までを紹介しました。

ちょっとカッコいいカウントダウンタイマーを表示させたい人はぜひ試してみてください。

タケ坊
タケ坊
プラグインで簡単にタイマーが表示できるなんて便利ですね
柚子
柚子
いろいろな用途に使えるプラグインだから使ってみてね!

コチラのカウントダウンタイマープラグインも紹介しています。

関連記事

大手通販サイトなどでセール期間の終了をカウントダウンで表示されているのをよく見ませんか? ただの文字だけで「〇月〇日〇時〇分で終了します。」 より 「あと〇日〇時間〇分で終了します」 とカウントダウン方式で表示されて[…]

Easy CountDowner
T(-) Countdownキャプチャー
最新情報をチェックしよう!