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

WordPressサイトにカウントダウンタイマーを追加すると、より魅力的なものになります。製品の発売を強調する場合でも、重要な日付をマークする場合でも、イベントへの期待感を高める場合でも、カウントダウンタイマーは効果的にその役割を果たします。

例えば、私たちはウェブサイトでカウントダウンを使用して、製品セール、ブラックフライデーセールなどを強調しました。

数ステップで、この目を引くウィジェットをウェブサイトに設定できます。注意を引くだけでなく、オーディエンスに情報を提供し続けます。

この記事では、WordPressサイトにカウントダウンタイマーを追加する3つの簡単な方法を学びます。技術に詳しくなくても大丈夫です。

カウントダウンタイマーウィジェットはいつ、なぜ使用するのか？

カウントダウンタイマーは多用途であり、さまざまなシナリオで使用できます。それらは興奮と緊急性を加え、訪問者の行動を促します。

新しいウェブサイトを立ち上げますか？カウントダウンタイマーは期待感を高め、話題を呼ぶことができます。タイマーを美しい公開準備完了ページに表示して、訪問者に最新情報をチェックするように促します。

カウントダウンタイマーを使用するのに最適なもう一つの機会は、オンラインストアの今後のセールやプロモーションです。タイマーを表示することで、顧客に期間限定のオファーを知らせ、売上とエンゲージメントを向上させることができます。

カウントダウンタイマーはイベント主催者にとっても役立ちます。それがウェビナーであれ、カンファレンスであれ、社交的な集まりであれ、タイマーを設定することで参加者はイベントがいつ始まるかを正確に把握できます。

ウェブサイトのメンテナンス中にも、カウントダウンタイマーは役立ちます。訪問者にウェブサイトがいつ利用可能になるかを知らせることができるため、情報を伝え、フラストレーションを軽減できます。

個人の記念日やアニバーサリーをマークするなど、小規模な用途では、カウントダウンタイマーはWordPressサイトに華やかさを加えます。

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

カウントダウンタイマーは、ライトボックスポップアップ、フローティングバー、スクロールボックス、その他のデザイン要素に追加して、サイト訪問者のエンゲージメントを高め、ウェブサイトに戻ってもらうこともできます。

カウントダウンタイマーには多くのユースケースがあるため、WordPressにカウントダウンタイマーウィジェットを追加する3つの異なる方法を以下に示します。

• 方法1：Countdown Timer Ultimateプラグイン（無料）を使用してカウントダウンタイマーウィジェットを追加する
• 方法2：OptinMonsterを使用してカウントダウンタイマーウィジェットを追加する（推奨）
• 方法3：SeedProdを使用してカウントダウンタイマーウィジェットを追加する

動画チュートリアル

WPBeginnerを購読する

文章での説明をご希望の場合は、そのまま読み進めてください。

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

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

このチュートリアルでは、無料プラグインを使用します。これは、カウントダウンタイマーを作成するために必要なすべてのツールを備えているためです。

開始するには、まずCountdown Timer Ultimateプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、WordPress管理画面からカウントダウンタイマー » タイマーを追加に移動します。

次の画面で、タイマーにタイトルを付けることができます。「新しいタイマーを追加」フィールドに任意のタイトルを入力するだけです。

その後、「カウントダウンタイマー – 設定」エリアまでスクロールダウンして、カウントダウンタイマーの有効期限と時刻を設定できます。

「有効期限の日時」フィールドを見つけたら、日付ピッカーから日付を選択します。次に、「時」、「分」、「秒」のスライダーをドラッグして有効期限の時刻を調整できます。

次のステップに進むには、「完了」をクリックするだけです。

次のステップは、タイマーラベルを定義することです。

カウントダウンタイマーの「タイマーラベル」フィールドで、日数、時間、分、秒のインジケーターを表示するには、すべてのボックスにチェックを入れます。

さて、ページを下にスクロールして「デザイン」タブに切り替えて、カウントダウンタイマーをスタイル設定しましょう。

最初のセクション「デザイン設定」では、デザインを選択し、タイマーのサイズを設定できます。

残念ながら、無料ユーザーは「円スタイル 1」のタイマーデザインしか選択できません。ただし、「タイマー幅」でタイマーの幅を定義できます。ここでは 850 px に設定しました。

「タイマー幅」の下に、「円スタイル設定」セクションがあります。

最初に行うことは、アニメーションを選択することです。「スムーズ」と「ティック」の2つのオプションがあります。

タイマーアニメーションを決定したら、スライダーをドラッグして円の前景色と背景色を設定できます。

その後、カウントダウンタイマーの色をカスタマイズできます。

「時計の背景色設定」では、背景色を調整したり、日、時、分、秒の色を個別に変更したりできます。

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

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

カウントダウンタイマーウィジェットの設定が完了したので、ウェブサイトに追加する時間です。

まず、WordPress ウェブサイトの「カウントダウンタイマー」メニュー項目をクリックします。作成したタイマーが「カウントダウンタイマー」テーブルに一覧表示されます。

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

ショートコードをコピーした後、カウントダウンタイマーを表示したい投稿またはページを開きます。

ここから、「+」ボタンをクリックしてショートコードブロックを追加できます。次に、このショートコードをWordPressの投稿またはページのコンテンツエリアに貼り付けるだけです。

次に、「更新」または「公開」ボタンをクリックして変更を保存します。

これで、ウェブサイトにアクセスしてカウントダウンタイマーウィジェットが機能していることを確認できます。

クラシックテーマを使用している場合、このカウントダウンタイマーをサイトのサイドバーに追加することもできます。

単純に 外観 » ウィジェット ページに移動します。次に、「メインサイドバー」セクションの「+」ボタンをクリックして、ショートコードブロックを検索します。

表示されたら、それをクリックしてカウントダウンタイマーのショートコードを貼り付けるだけです。

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

これで、サイトにアクセスして、サイドバーまたはウィジェット対応エリアにカウントダウンタイマーが表示されていることを確認できます。

方法2：OptinMonsterを使用してカウントダウンタイマーウィジェットを追加する（推奨）

OptinMonsterは市場で最高のWordPressポップアッププラグインですが、ポップアップ以上のことができます。離脱するサイト訪問者を購読者や顧客に転換するのに役立ちます。

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

このツールは、美しいデザインでカウントダウンタイマーを表示するスマートな方法を提供します。WordPressで常緑のカウントダウンタイマーを作成することもできます。

エバーグリーンカウントダウンタイマーは、個々の訪問者ごとにカウントダウンを開始します。タイマーは、その人がサイトにアクセスしたときに開始されます。動的カウントダウンタイマーとも呼ばれます。

まず、OptinMonster のウェブサイトにアクセスし、ニーズに合ったプランにサインアップしてください。

完了したら、WordPressサイトにOptinMonsterプラグインをインストールできます。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

このプラグインは、WordPressサイトをOptinMonsterアプリに接続します。有効化後、「既存のアカウントを接続」ボタンをクリックし、プロンプトに従って統合プロセスを開始できます。

その後、ポップアップウィンドウが表示されます。OptinMonsterアカウントにサインアップするために使用したメールアドレスを選択し、「WordPressに接続」ボタンをクリックするだけです。

これで、プラグインがWordPressサイトをOptinMonsterアカウントに接続します。

接続したら、OptinMonster ダッシュボードから新しいキャンペーンの作成を開始できます。単に OptinMonster » Campaigns に移動し、「最初のキャンペーンを作成」ボタンをクリックしてください。

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

キャンペーンタイプはどれでも使用でき、カウントダウンタイマーを追加できます。このチュートリアルでは、「ポップアップ」キャンペーンタイプを使用します。次に、「割引コードを取得」テンプレートを使用します。

テンプレートに名前を付ける必要があるポップアップウィンドウが表示されます。この名前は参照用ですので、好きな名前を使用できます。

例えば、キャンペーン名を「カウントダウンタイマー」としました。

それが完了したら、「ビルドを開始」をクリックしてください。OptinMonster がビルダーインターフェースにリダイレクトします。

ここから、左側のパネルにある「ブロック」セクションを確認しましょう。次に、「カウントダウン」ブロックを右側のプレビューパネルにドラッグ＆ドロップします。

次に、サイドバーパネルのドロップダウンフィールドから「カウントダウンタイプ」を選択できます。「静的」と「動的」の2つのオプションがあります。

さて、どちらのタイプを選択するかは、完全にあなたの目標次第です。静的タイマーは、その名前が示すように、単一の終了日時で固定されるため、製品ローンチやウェビナーのような単発イベントに最適です。

しかし、緊急性を繰り返し感じさせたい場合はどうでしょうか？そこでダイナミックタイマーが役立ちます。

例えば、あなたのオンラインストアが毎週フラッシュセールを行っているとしましょう。ダイナミックタイマーは、各セール期間後に自動的にリセットされるため、非常に役立ちます。

このガイドでは、毎週のフラッシュセールを宣伝するための動的なカウントダウンタイマーを作成します。

ドロップダウンメニューから「動的」を選択し、有効期限と時刻を設定します。次に、キャンペーンのインサイトを収集するために「コンバージョン追跡？」オプションをオンにすることもできます。

必要であれば、カウントダウンタイマーの外観をカスタマイズできます。

「詳細設定」タブに切り替えるだけで、タイマーの背景色、フォント、影などを変更するためのカスタマイズオプションが見つかります。

すべての設定が完了したら、「表示ルール」タブに移動します。

ここで、ポップアップが表示されるタイミングとページを正確に制御します。デフォルト設定は5秒後にすべてのページに表示されますが、必要に応じて簡単にカスタマイズできます。

または、OptinMonster の MonsterLink を利用することもできます。

この機能を使用すると、ユーザーがサイト上のリンクまたはボタンをクリックしたときにポップアップが表示されるようにトリガーできます。これにより、訪問者はオファーやメッセージを見たいタイミングを直接制御できます。

MonsterLinkを使用するには、まず「ページ上の時間」ドロップダウンをクリックする必要があります。次に、「いつ（トリガー）」を選択し、「MonsterLink（クリック時）」を選択します。

追加したら、「MonsterLinkコードをコピー」をクリックできます。これは埋め込みプロセスで必要になります。

次に、ゴミ箱アイコンをクリックして、他の表示ルールを削除できます。

さて、カウントダウンタイマーを使用してキャンペーンを公開する時間です。これを行うには、「公開」タブに移動しましょう。

ここで、ステータスを「下書き」から「公開」に変更できます。その後、「保存」ボタンをクリックしてエディターを終了します。

次に、キャンペーンのステータスを確認するために OptinMonster のページにリダイレクトされます。

「表示設定とステータス」セクションで、「保留中」ステータスを「公開済み」に変更してください。

変更が保存されるように、緑色の「変更を保存」ボタンをクリックすることを忘れないでください。

今残っているのは、MonsterLinkコードをWordPressウェブサイトに追加することだけです。

まず、キャンペーンをカウントダウンタイマー付きで表示したい投稿またはページを開きます。

例えば、デモの写真サイトの「ギャラリー」ページに私たちのものを追加します。それでは、Pages » All Pages に移動し、「ギャラリー」ページで「編集」をクリックしましょう。

ページエディターで、「+」ボタンをクリックし、「カスタムHTML」ブロックを検索します。クリックするだけでページに追加できます。

「カスタムHTML」ブロックに、先ほどコピーしたMonsterLinkコードを貼り付けるだけです。

ページのエディタブロックでは、このようになります：

さて、「今すぐ登録！」という行動喚起は、キャンペーンの目的に合わないかもしれません。

それでは、「限定プロモコードを入手」、「限定割引をアンロック」など、文脈に合ったものに変更しましょう。完了したら、「更新」または「公開」をクリックできます。

これで、ページにアクセスすると、MonsterLinkが機能しているのがわかります。

クリックするだけで、カウントダウンタイマーが表示されたキャンペーンポップアップが表示されます。

デモの「ギャラリー」ページでは、このようになります。

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

SeedProdは、WordPress向けの最高のテーマおよびランディングページビルダーです。

ドラッグ＆ドロップビルダーを使用すると、素晴らしいランディングページを作成し、カウントダウンタイマーを追加して訪問者の注意を引くことができます。

カウントダウンタイマー機能を使用するには、SeedProd Proが必要です。Proプランでは、さまざまなテンプレート、カスタマイズ用のページブロック、メールマーケティング統合などにアクセスすることもできます。

まず、SeedProd Pro プラグインを WordPress ウェブサイトにインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、WordPressダッシュボードからSeedProd » 設定に移動して、ライセンスキーを追加および検証できます。このキーはSeedProdアカウントで取得できます。

ライセンスキーを入力した後、「キーの検証」ボタンをクリックできます。

SeedProd Pro を手動でインストールすることもできます。その前に、SeedProd アカウントから SeedProd Pro .zip ファイルをダウンロードしたことを確認してください。

次に、**プラグイン** » **プラグインを追加** に移動し、「プラグインをアップロード」ボタンをクリックすると、「ファイルを選択」オプションが表示されます。SeedProd Pro .zip ファイルをアップロードしてください。

その後、「今すぐインストール」ボタンをクリックします。

さて、新しいランディングページを作成する準備ができました。開始するには、SeedProd » ランディングページに移動してください。

SeedProdを使用すると、近日公開ページ、カスタムWooCommerceカートページ、ログインページ、404ページなど、さまざまな種類のページを設定できます。「新しいランディングページを追加」ボタンをクリックすると、お礼ページやウェビナー登録ページなどの他のランディングページを作成することもできます。

このチュートリアルでは、「近日公開」ページを使用します。カウントダウンタイマーを追加して、今後の製品やイベントについてオーディエンスにリマインドするのに最適な場所です。

「近日公開ページを設定する」ボタンをクリックしましょう。

次に、ランディングページのテンプレートを選択します。

空のテンプレートを使用してゼロからページを作成するオプションがありますが、テンプレートを使用することをお勧めします。これにより時間が節約され、必要に応じてデザインを編集できます。

完璧なテンプレートを見つけたら、それにカーソルを合わせて「チェック」ボタンをクリックして使用できます。

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

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

カウントダウンタイマーを追加するには、左側のパネルを下にスクロールして「高度なブロック」セクションに移動します。次に、「カウントダウン」ブロックをランディングページのどこにでもドラッグアンドドロップします。

カウントダウンブロックを追加したら、カスタマイズしましょう。ブロックをクリックするだけで、左側のパネルにカスタマイズオプションが表示されます。

確認できるタブは、「コンテンツ」、「テンプレート」、「詳細設定」の3つです。それぞれ順番に確認しましょう。

「コンテンツ」タブでは、カウントダウンタイプを選択し、終了日時を設定し、タイムゾーンを選択し、タイマーの配置を調整するなどを行うことができます。

さて、「テンプレート」に進みましょう。

ここで、SeedProd は 5 つのカウントダウンタイマー スタイルから選択できます。

最後に、「詳細設定」タブにはいくつかのセクションがあります。

「スタイル」セクションでは、タイマーのタイポグラフィ設定、色、境界線を変更できます。

次に、「詳細設定」タブを下にスクロールして「アニメーション効果」セクションに移動します。

ここで、訪問者がカウントダウンタイマーを見たときにそれを強調するためにアニメーションを適用できます。ドロップダウンメニューをクリックして、「点滅」、「脈動」、「スイング」、「ぐらつき」など、利用可能なエフェクトから選択するだけです。

テキストやソーシャルメディアボタンなどの他のランディングページ要素を調整したい場合は、それらをクリックしてください。すると、SeedProd がカスタマイズオプションを開きます。

すべての設定が完了したら、「ページ設定」タブをクリックして、カウントダウンタイマー付きのランディングページを公開してください。

まず、ランディングページにタイトルを付けたいと思います。例えば、私たちのランディングページは「Coming Soon」と名付けました。

次に、「ページステータス」を「下書き」から「公開」に変更できます。「Powered by SeedProd」リンクを表示または非表示にするオプションもあります。

次に、「ページ設定」タブの「アクセス制御」を確認し、ランディングページを表示できるユーザーを管理しましょう。

特定の人々が「近日公開」ページをバイパスしてウェブサイトの開発作業を行えるようにしたい場合に、この機能は非常に役立ちます。SeedProd では、「近日公開」ページが表示される URL を含めたり除外したりすることもできます。

デフォルトでは、ページはウェブサイト全体で表示されます。ただし、ホームページのみ、または特定のURLのみに表示するように変更できます。

その後、SEO設定に移動して、ページを検索エンジン向けに最適化できます。

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

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

例えば、「ヘッダースクリプト」フィールドにGoogle Analyticsのトラッキングコードを追加して、人々がランディングページをどのように利用しているかを確認できます。

完了したら、「保存」ボタンをクリックしてください。ランディングページをプレビューして、すべてが正しく設定されていることを確認することもできます。

その後、単に「X」ボタンをクリックして SeedProd エディターを閉じます。

次に、SeedProd » ランディングページ に移動し、「近日公開」ページのステータスを「アクティブ」に変更します。

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

これで、あなたのウェブサイトにアクセスして、カウントダウンタイマーが機能していることを確認できます。

この記事でWordPressにカウントダウンタイマーウィジェットを追加する方法を学べたことを願っています。次に、スクロールするニュースティッカーを追加する方法や回転するお客様の声を追加する方法など、ウェブサイトデザインのクールなトリックをさらにチェックしたいかもしれません。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。