WordPressでカウントダウンタイマーウィジェットを追加する方法（3つの方法）

WordPressでマイルストーンのカウントダウンを追加したいですか？

カウントダウンタイマーを使えば、重要な業績や記念日、今後のイベントなどをアピールできます。

この投稿では、WordPressサイトにカウントダウンタイマーウィジェットを簡単に追加する方法を紹介します。

節目のカウントダウン・ウィジェットをいつ、なぜ使うのか？

マイルストーンカウントダウンウィジェットは、今後のイベント、製品発表、販売イベントなど、ビジネスの重要な節目をオーディエンスに思い出させるのに便利なツールです。

カウントダウンは、カスタマイザーの期待感を高め、ユーザーエンゲージメントを向上させるのに役立ちます。

ここでは、マイルストーンカウントダウンウィジェットを使用する一般的なシナリオをいくつか紹介します：

• 近日公開のページでサイトを立ち上げる前に。
• サイトメンテナンスの際、サイト訪問者にいつサイトが利用できるようになるかをお知らせします。
• オンラインストアに新商品を導入する前に。
• イベントやカンファレンスをホスティングする場合。
• あなたのオンライン・ビジネスの誕生日に。
• ブラックフライデーのような祝日やセールイベントには、商品やサービスの大幅割引を提供しましょう。

投稿、ページ、サイドバーウィジェットエリアにマイルストーンカウントダウンタイマーを表示できます。

カウントダウンタイマーは、ライトボックスポップアップ、フローティングバー、スクロールボックス、その他のデザイン要素に追加することもできます。

カウントダウンタイマーの使用例は非常に多いので、WordPressでマイルストーンのカウントダウンウィジェットを追加するための3つの異なる方法をリストアップしました：

WordPressでマイルストーンのカウントダウンウィジェットを簡単に追加する方法を見てみましょう。

動画チュートリアル

Subscribe to WPBeginner

文章での説明がお望みなら、このまま読み進めてほしい。

方法1：Countdown Timer Ultimateプラグインを使用してマイルストーンカウントダウンウィジェットを追加する

Countdown Timer Ultimateは、あなたのサイトに基本的なカウントダウンタイマーを追加できるシンプルな無料プラグインです。

最初に行う必要があるのは、Countdown Timer Ultimateプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、WordPress管理エリアのカウントダウンタイマー ” タイマーの追加ページにアクセスする必要があります。

このページでは、新しいカウントダウンタイマーのタイトルとしてマイルストーン名を追加することから始める必要があります。

注意：このタイマーはWordPressサイトの設定で設定されたタイムゾーンを使用します。このカウントダウンタイマーのタイムゾーンを変更したい場合は、設定 ” 一般に移動し、WordPressサイトのタイムゾーン設定を更新する必要があります。

その後、下にスクロールしてマイルストーンカウントダウンタイマーの有効期限、曜日、時間を設定することができます。

カウントダウンタイマーの有効期限を選択してください。

次に、ドロップダウンからアニメーションのスタイルを選択する必要があります。

円や背景の幅も簡単に調整できる。

カウントダウン幅フィールドでは、カウントダウンウィジェットの全表示幅を定義することができます。このフィールドを空白のままにしておくと、初期設定でタイマーが表示されます。

その後、カウントダウンタイマーの背景色と前景色を追加することができます。日、時間、分、秒の色を個別に変更できます。また、日、時間などの要素のラベルを変更することもできます。

残念ながら、プラグインは複数形や単数形のラベルを調整しないので、’1 Hour’ではなく’1 Hours’と表示されます。

設定に満足したら、「公開する」ボタンをクリックしてください。

WordPressでマイルストーンカウントダウンウィジェットを表示する

マイルストーンカウントダウンウィジェットを作成したので、サイトに追加してみましょう。

まず、カウントダウンタイマーメニューをクリックしてください。作成したタイマーがWP Countdown Timerのページに表示されます。

カウントダウンタイマーの隣に、コピーする必要があるショートコードが表示されます。

このショートコードを投稿やページのコンテンツエリアにコピー＆ペーストする必要があります。

その後、更新または公開ボタンをクリックして変更を保存してください。

あなたのサイトにアクセスして、マイルストーンのカウントダウン・ウィジェットの動きを見ることができます。

WordPressサイトのサイドバーにこのカウントダウンタイマーを追加することもできます。外観 ” ウィジェットページに行き、サイドバーにショートコードウィジェットを追加するだけです。

ウィジェットの設定で、カウントダウンタイマーのショートコードを貼り付ける必要があります。

完了したら、更新ボタンをクリックしてウィジェット設定を保存することを忘れないでください。

サイドバーやウィジェット対応エリアにカウントダウンタイマーが表示されるようになりました。

方法2：OptinMonsterを使用してマイルストーンカウントダウンウィジェットを追加する

OptinMonsterは、市場で最高のWordPressポップアッププラグインですが、ポップアップだけではありません。それはあなたが放棄サイト訪問者を購読者やカスタマイザーに変換するのに役立ちます。

OptinMonsterのカウントダウンタイマー機能を使用すると、ライトボックスポップアップ、サイドバーウィジェット、フローティングバー、またはその他のOptinMonsterキャンペーンタイプにマイルストーンカウントダウンタイマーを統合することができます。

下記はカウントダウンタイマーキャンペーンの一例ですが、ドラッグ＆ドロップビルダーを使って完全にカスタマイズされたカウントダウンタイマーを作成することができます。

OptinMonsterは、カウントダウンタイマーを非常に注目を集めるデザイン要素で表示するスマートな方法です。WordPressでエバーグリーンのカウントダウンタイマーを作成することもできます。

エバーグリーンのカウントダウンタイマーは、個々の訪問者ごとにカウントダウンを開始します。タイマーはその人があなたのサイトに到着した時に始まります。ダイナミックカウントダウンタイマーとも呼ばれます。

まず、OptinMonsterのサイトにアクセスし、あなたのニーズに合ったプランにサインアップする必要があります。

その後、WordPressサイトにOptinMonsterプラグインをインストールする必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

このプラグインは、WordPressサイトとOptinMonsterアプリ間のコネクタとして動作します。

有効化した後、WordPressの管理メニューからOptinMonster ” 設定に移動し、アカウントを接続する必要があります。

既存のアカウントに接続する」ボタンをクリックすると開始できます。

その後、ポップアップウィンドウが表示されます。

OptinMonsterアカウントに登録する際に使用したメールアドレスを選択し、「WordPressに接続」ボタンをクリックするだけです。

プラグインはWordPressサイトをOptinMonsterアカウントに接続します。

接続が完了したら、OptinMonsterのダッシュボードから新規キャンペーンの作成を開始することができます。OptinMonster ” キャンペーンに移動し、’最初のキャンペーンを作成’ボタンをクリックします。

このプラグインでは、さまざまなキャンペーンタイプとテンプレートから選択できます。

どんなキャンペーンタイプでも、カウントダウンタイマーを組み込むことができます。

詳しくは、OptinMonsterでカウントダウンタイマーキャンペーンを作成する方法についてのステップバイステップのチュートリアルをご覧ください。

方法3：SeedProdを使用してマイルストーンカウントダウンウィジェットを追加する

SeedProdは WordPressのための最高のテーマとランディングページビルダーです。ドラッグアンドドロップでランディングページを作成し、カウントダウンタイマーを追加して訪問者の注意を引くことができます。

カウントダウンタイマー機能を使用するには、SeedProd Proバージョンが必要です。プロプランでは、様々なテンプレート、カスタマイザーのためのページブロック、メールマーケティング統合、その他へのアクセスも可能です。

最初に行う必要があるのは、WordPressサイトにSeedProd Proプラグインをインストールし、有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化すると、WordPress管理エリアのSeedProdにリダイレクトされます。SeedProdアカウントから取得できるライセンスキーの入力を求められます。ライセンスキーを入力した後、’Verify key’ボタンをクリックしてください。

次に、SeedProd ” ページで新しいランディングページを作成します。

SeedProdでは、近日公開ページ、ログインページ、お買い物カゴカスタムページ、404ページなど、さまざまなタイプのページを設定することができます。

また、「新規ランディングページの追加」ボタンをクリックすれば、サンキューページやウェビナーの申し込みページなど、他のランディングページを作成することもできます。

このチュートリアルでは、カウントダウンタイマーを追加し、オーディエンスに近日発売の製品やイベントを思い出させるのに最適な場所であるComing Soonページを使用します。

その後、ランディングページのテンプレートを選択することができます。空白のテンプレートを使ってゼロからページを作成するオプションもあります。

しかし、時間を節約し、思い通りにデザインを編集するのに役立つので、テンプレートの使用をお勧めします。

次の画面では、デザインタブの下にあるSeedProdドラッグアンドドロップページビルダーに移動します。

ここでは、さまざまなセクションやページブロックを追加したり削除したり、ページのレイアウトをフォーマットしたりすることで、ランディングページをカスタマイズできます。

カウントダウンタイマーを追加するには、左のメニューから高度なページブロックセクションに移動し、「カウントダウン」ブロックをページの任意の場所に配置するだけです。

また、近日公開ページのさまざまなセクションを編集することもできます。セクションをクリックすると、左メニューにオプションが表示されます。

例えば、フィールド内のテキストを編集したり、フォントや色を変更したり、コンテンツを整列させたりすることができます。

ランディングページのデザイン編集が終わったら、[接続]タブでメールマーケティングサービスを統合することができます。

SeedProdは、Drip、Constant Contact、Brevo、ConvertKitなどの一般的なサービスをサポートしています。

その後、ページ設定タブをクリックして、カウントダウンタイマー付きのランディングページを公開してください。

一般設定で「ページの状態」を下書きから公開に変更すれば、ページが公開されます。

次に、ページ設定タブの「アクセスコントロール」設定で、ランディングページを表示できる人を管理できます。

この機能は、特定の人々に近日公開のページを回避してもらい、あなたのサイトの開発に取り組んでもらいたい場合に本当に便利です。

SeedProdはまた、近日公開ページを表示するURLを含めたり除外したりすることもできます。初期設定では、ページはサイト全体に表示されます。しかし、ホームページのみ、または特定のURLのみに表示するように変更することもできます。

その後、SEO設定からページを検索エンジンに最適化することができる。

SeedProdは、SEOタイトル、説明、ファビコン、ソーシャルメディアのサムネイルを追加することができます。

ランディングページにコードスニペットを追加したい場合は、ページ設定の「スクリプト」セクションにアクセスしてください。ここでは、ページのヘッダー、本文、フッターにスクリプトを追加することができます。

例えば、ヘッダースクリプトにGoogleアナリティクスのトラッキングコードを追加することで、ランディングページの利用状況を確認することができます。

本当に〜してもよいですか？ランディングページをプレビューして、デザインを変更することもできます。

次に、SeedProd ” ページに行き、カミングスーンページの状態を「有効化」に変更する必要があります。

これで完了です。カウントダウンタイマー付きのランディングページが公開されます。

これで、あなたのサイトを訪問して、カミングスーン・カウンターが動作しているのを見ることができます。

この投稿が、WordPressでマイルストーンカウントダウンウィジェットを追加する方法を学ぶのにお役に立てば幸いです。WordPressでオンラインブログでお金を稼ぐ実証済みの方法に関するガイド、またはメールマガジンの作成方法に関する完全ガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.