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

公開: 2023-02-12

WordPress サイトを作成するとき、イベントやその他の時間に敏感なサービスを宣伝するのに役立つツール、デザイン、および機能を組み込む必要がある場合があります。 カウントダウン タイマー ウィジェットまたはプラグインを使用すると、それがはるかに簡単になります。

WordPress カウントダウン タイマー ウィジェットを使用すると、サイトの所有者や訪問者が特定の日時を簡単に追跡できます。 さらに、サイトに簡単に追加できるカウントダウン プラグインがいくつかあります。

この投稿では、カウントダウン タイマーを使用するタイミングと、WordPress カウントダウン タイマー ウィジェットとは何かについて説明します。 次に、プラグインを使用して WordPress にカウントダウン タイマーを追加するための 3 つの最適なオプションについて説明します。 始めましょう!

目次
1.カウントダウンを使用するタイミング
2.カウントダウン タイマー ウィジェットとは
3. WordPress にカウントダウンタイマーを追加するためのオプション
3.1. オプション 1: T(-) カウントダウン ウィジェットを使用してカウントダウン タイマーを追加する
3.2. オプション 2: Countdown Timer Ultimate を使用してカウントダウン タイマーを追加する
3.3. オプション 3: POWr を使用してカウンター タイマーを追加する
4. WP Engine からさらに役立つリソースを見つける

カウントダウンを使用する場合

カウントダウン タイマーは、ビジネスの記念日など、さまざまなマイルストーンを示すために使用できます。 また、これを使用して、今後のイベント (新製品の発売など) に対する期待を高めたり、セールの開始を宣伝したり、サイトのメンテナンス モードが終了する時期を訪問者に通知したりすることもできます。

カウントダウン タイマー ウィジェットとは

カウントダウン タイマー ウィジェットは、WordPress サイトに追加できる拡張機能で、製品やイベントに関する興奮や緊急性を高めます。 WordPress のカウントダウン タイマー ウィジェットを使用して、残り時間をカウントダウンする時計を表示することで、何かを期待する時期を顧客に通知または思い出させることができます。

カウントダウン タイマーが使用される最も一般的なシナリオには、次のようなものがあります。

  • WordPress サイトがメンテナンス中であることと、いつオンラインに戻るかを訪問者に知らせる
  • 製品発表会、懇親会、会議などの今後のイベントの促進と期待の構築
  • 記念日などの重要なマイルストーンを認識する
  • 特別な販売イベント、プロモーション、近日公開ページの興奮を生み出す

WordPress にカウントダウンタイマーを追加するためのオプション

WordPress サイトにカウントダウン タイマーを追加するには、複数のオプションがあります。 コードで行うこともできますが、WordPress カウントダウン プラグインを使用するのが最も簡単な方法です。 おすすめの 3 つのカウントダウン タイマー プラグインと、それらを使い始める方法を見てみましょう。

オプション 1: T(-) カウントダウン ウィジェットを使用してカウントダウン タイマーを追加する

(T-) Countdown Widget は、利用可能な最も人気のある WordPress カウントダウン プラグインの 1 つです。 WordPress サイトの任意のページまたは投稿に、ショートコードを介して非常に柔軟でカスタマイズ可能な HTML5 タイマーを表示できます。

ただし、プラグインの機能を最大限に活用するには、HTML と CSS の知識が少し必要です。 したがって、初心者には最適なオプションではない可能性があります。

プラグインをインストールして有効にすると、 [設定] > [T(-) カウントダウン]で見つけることができます。

この画面では、カウントダウンを秒、週、月、年から選択できます。 表示されるラベルをカスタマイズし、独自の CSS を追加することもできます。

プラグインをダウンロードして有効にすると、WordPress エディターにT(-) カウントダウンブロックが追加されます。 使用するには、カウントダウン タイマーを追加するページまたは投稿に移動します。 プラス アイコンをクリックし、 T(-) カウントダウンオプションのブロックを検索します。

このブロックは、標準のカウントダウン タイマーをページまたは投稿に追加します。 右側のパネルでカスタマイズおよび構成できます。

開始時刻と日付を選択し、タイマーの表示方法を 13 のスタイルから 1 つ選択できます。 T(-) カウントダウン設定ページにもある同じ設定 (ラベルやカスタム CSS を含む) を微調整するためのセクションもあります。

必要な場合は、このプラグインで利用できる無料のサポートと、使用できるショートコード オプションの完全なリストがあります。 これは、古い jQuery T(-) Countdown Widget プラグインの積極的に開発されたバージョンであることも注目に値します。

オプション 2: Countdown Timer Ultimate を使用してカウントダウン タイマーを追加する

Countdown Timer Ultimate はショートコードを使用して、WordPress サイトにカウントダウン タイマーを表示します。 Gutenberg エディターとうまく連携し、完全にレスポンシブで、無制限のカウントダウンを作成できます。

プラグインをインストールしてアクティブ化すると、ウェルカム メッセージが表示されます。 [スキップ]または[許可して続行]を選択します。

次に、 Countdown Timer > Add Timerに移動します。

この画面では、カウントダウン タイマーに名前を付けて、その表示をカスタマイズできます。 有効期限を選択したら、スムーズまたはティックの2 つのアニメーション スタイルから選択できます。

次に、円の幅と色を選択します。 定義しないものはすべてデフォルトのスタイルに設定されます。 完了したら、 [公開]をクリックします。

次に、WordPress の投稿またはページにカウントダウン タイマー ウィジェットを追加できます。 これを行うには、カウントダウン タイマーのショートコード ( WP カウントダウン タイマーページのショートコード列の下にあります) をコピーします。

次に、タイマーを追加するページまたは投稿に移動します。 ブロック エディターでプラス アイコンをクリックし、ショートコードウィジェットを選択します。

ショートコードをテキスト フィールドに貼り付け、ページをプレビューして、見た目に問題がないことを確認します。 問題がなければ、 Publishをクリックします。

代わりにサイトのサイドバーにカウントダウン ウィジェットを追加したい場合は、 [外観] > [ウィジェット]に移動し、テキストウィジェットをサイドバーに追加します。 ウィジェットの設定の下に、カウントダウン タイマーのショートコードを貼り付けるだけです。

前述したように、このプラグインの無料版をダウンロードして使用すると、無制限のタイマーを作成できます。 追加のデザインや高度な機能へのアクセスを解除するために、プレミアム バージョンにアップグレードすることもできます。 最初にプラグインをテストしたい場合は、無料のデモにサインアップすることもできます.

オプション 3: POWr を使用してカウンター タイマーを追加する

最後になりましたが、POWr はクラウドベースのカウントダウン タイマー プラグインです。 したがって、それを使用するには、まず無料のアカウントにサインアップする必要があります。

POWr の利点の 1 つは、完全にレスポンシブでカスタマイズ可能であることです。 ただし、通常のカウントダウン タイマーを作成するだけでなく、時間の経過に伴うイベントの追跡にも使用できるという点でユニークです。

開始するには、まず POWr WordPress カウントダウン プラグインをサイトにダウンロードして有効にします。 フォームやソーシャル フィードの作成に使用できるその他のさまざまな機能を備えたパッケージとして提供されます。

次に、POWr の Web サイトにアクセスし、 [Get Started]ボタンをクリックして無料アカウントにサインアップします。 アカウントを作成すると、 My Pluginsページが表示されます。 ここで、左側のナビゲーション メニューで [カウントダウン タイマー] を選択して、「独自のプラグインを作成」できます。

次に、WordPress サイトのカウントダウン タイマー ウィジェットを作成およびカスタマイズできる画面が表示されます。

使用するカウントダウンの種類には、さまざまなオプションがあります。 また、 [コンテンツ]タブと[デザイン]タブでは、ターゲットの日付を設定したり、タイマーのラベルをカスタマイズしたり、カスタム メッセージを作成したり、アニメーションを追加したりできます。

カウントダウン タイマーに満足したら、画面の下部にある[サイトに追加]ボタンをクリックします。

次に、サイトに追加するためのいくつかのオプションが表示されます。 たとえば、WordPress アイコンをクリックして、カウントダウン タイマーのショートコードを生成できます。

次に、このショートコードをコピーして、WordPress エディターのショートコードブロックに貼り付けます (前のセクションを参照)。 [コードを埋め込む]オプションを選択して、コードをコピーしてサイトの HTML 要素に貼り付けることもできます。

WP Engine からさらに役立つリソースを探す

ウェブサイトにカウントダウン タイマーを追加することは、興奮を高め、訪問者をやる気にさせる優れた方法です。 もちろん、サイトに追加しようとしている機能が何であれ、私たちはお手伝いします.

WP Engine は、ユーザーと開発者に最高のリソースを提供し、信じられないほどのデジタル エクスペリエンスを提供するために必要な情報とツールを提供します。 今日から最高の WordPress ホスティングを始めましょう!