WordPressでアラートバーを作成する方法（簡単な3つの方法）

WordPressサイトにアラートバーを追加したいですか？

アラートバーまたは通知バーは、訪問者に重要なアップデート、特別オファー、新製品の発売などについて知らせるのに最適な方法です。

この記事では、3つの簡単な方法で WordPress にアラートバーを作成する方法を紹介します。

WordPressでアラートバーを作成する理由

アラートバーは、ウェブサイトの重要な情報（開催中のセールイベント、営業時間変更、サービス変更など）を訪問者に知らせるのに最適な方法です。

アラートバーを使用して、1つ買うともう1つ無料のような特別オファーについて訪問者に通知することもできます。オンラインストアを運営している場合は、これは素晴らしい選択肢です。

アラートバーを使用することは、単にホームページにアナウンスを掲載するよりも優れています。アラートバーは、サイト全体すべてのページの先頭に目立つように表示できます。

WordPressでアラートバーを作成するのは簡単です。ここでは、最高の通知バープラグインを使用した方法と、HTMLおよびCSSコードを使用した手動の方法を見ていきます。各オプションに直接移動するには、下のリンクをクリックしてください。

方法1：OptinMonsterを使用してアラートバーを作成する

OptinMonsterは、市場で最高のコンバージョン最適化およびリードジェネレーションソフトウェアです。ウェブサイトの訪問者を購読者や顧客にさらに多く転換するのに役立ちます。

OptinMonsterは、ドラッグアンドドロップ式のキャンペーンビルダーを提供しています。美しいライトボックスポップアップ、ウェルカムマット、カウントダウンタイマー、およびウェブサイトでの購読者と売上を増やすのに役立つその他のダイナミックオーバーレイが付属しています。

OptinMonsterを使用してウェブサイトのアラートバーを作成することもできます。あらかじめ作成されたテンプレートにより、数分で素晴らしい見た目のアラートバーを簡単に作成できます。

まず、OptinMonsterのウェブサイトにアクセスしてアカウントにサインアップする必要があります。フローティングバーキャンペーンタイプが含まれているため、少なくともベーシックプランが必要です。

次に、OptinMonster WordPressプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

このプラグインを使用すると、WordPressサイトをOptinMonsterソフトウェアに接続できます。

アクティベートすると、ウェルカム画面とセットアップウィザードが表示されます。「既存のアカウントを接続」ボタンをクリックしてください。

次に、新しいウィンドウが開き、WordPressサイトをOptinMonsterに接続する必要があります。

「WordPressに接続」ボタンをクリックするだけで、先に進むことができます。

オンラインの指示に従って、OptinMonsterアカウントを接続できるようになりました。

次に、WordPressダッシュボードのOptinMonster » Campaignsにアクセスします。「最初のキャンペーンを作成」ボタンをクリックしてください。

これにより、OptinMonsterキャンペーンビルダーが開きます。

ここから、アラートバーを作成するために「フローティングバー」をキャンペーンタイプとして選択する必要があります。

次に、キャンペーンテンプレートの選択肢が表示されます。使用したいテンプレートを選択してください。

マウスを重ねて「テンプレートを使用」ボタンをクリックするだけで選択できます。今回は、アラートバーにクーポンコードプロモテンプレートを使用します。

次に、テンプレートに名前を付けるように求められます。キャンペーンに名前を付けたら、「ビルドを開始」ボタンをクリックするだけです。

これで、キャンペーンエディタが表示されます。ここでアラートバーをデザインできます。

OptinMonsterは、テンプレートにドラッグアンドドロップするだけで追加できるさまざまなブロックを提供しています。たとえば、アラートバーに画像、テキスト、ボタンなどを追加できます。

デフォルトでは、アラートバーが画面の下部に表示されることがわかります。

画面の上部に移動するには、左側にある「フローティングバー設定」をクリックする必要があります。次に、スライダーをクリックしてフローティングバーをページの上部に移動します。

フローティングバーのテキストを変更するには、変更したい領域をクリックして、任意のテキストを入力するだけです。

フォント、テキストのサイズや色なども変更できます。

カウントダウン設定を変更するには、タイマーを選択するだけです。

次に、希望する終了日時を入力します。OptinMonsterでは、カウントダウンのタイプを選択することもできます。指定した終了日時で標準タイマーを表示したい場合は、「静的」タイプを選択できます。

一方、「ダイナミック」カウントダウンタイプがあります。タイマーは、サイトでの各ユーザーの行動に基づいて機能します。カウントダウンは、ウェブサイトへの各訪問者に対して個別に設定されます。

アラートバーのデザインに満足したら、画面上部にある「保存」ボタンをクリックするのを忘れないでください。

次に、「表示ルール」タブに移動して、サイトのどこでアラートバーを表示するかを選択する必要があります。デフォルトのルールでは、訪問者がページに5秒間滞在した後にアラートバーが表示されます。

アラートバーが即座に表示されるように、これを 0 秒に変更します。これを行うには、「sec」の値を 0 に変更するだけです。

さらに、アラートバーが表示される場所を選択することもできます。「現在のURLパスがいずれかのページ」というデフォルト設定を使用できます。これにより、アラートバーはWordPressウェブサイトのすべてのページに表示されます。

次に、「次のステップ」ボタンをクリックして、アクション設定を変更します。「キャンペーンビューを表示する」設定はOptinのままにして、アラートバーが表示されたときに効果音を再生するかどうかを選択できます。

変更が完了したら、「次のステップ」ボタンをもう一度クリックしてください。

ここに、表示ルールの概要が表示されます。アラートバーキャンペーンの最終的な編集や変更を行うことができます。

満足したら、画面上部の「保存」ボタンをクリックするだけです。

その後、一番上の [公開] タブに移動し、[公開ステータス] を「公開」に変更できます。それが完了したら、「保存」ボタンをクリックしてキャンペーンビルダーを閉じます。

次に、キャンペーン出力設定が表示されます。

最後のステップは、ウェブサイト自体でキャンペーンを有効にすることです。ステータスを「保留中」から「公開済み」に変更するだけです。

完了したら、「変更を保存」ボタンをクリックすることを忘れないでください。

次に、ウェブサイトのいずれかのページにアクセスすると、キャンペーンが動作しているのがわかります。

方法2：Thrive Leadsを使用してアラートバーを作成する

WordPressウェブサイトにアラートバーを追加する別の方法は、Thrive Leadsを使用することです。これはThrive Themesスイートの一部であり、アラートバー、ライトボックス、スライドインポップアップなどを介してリードを生成するのに役立ちます。

まず、Thrive Themesのウェブサイトにアクセスし、アカウントにサインアップする必要があります。「今すぐ開始」ボタンをクリックするだけで始められます。

次に、ウェブサイトにThrive Product Managerプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドを参照してください。

Thrive Product Managerプラグインは、アカウントエリアで見つけることができます。

プラグインをインストールしたら、WordPress管理エリアから製品マネージャーページにアクセスするだけです。

ここから、「アカウントにログイン」ボタンをクリックしてください。

アカウントにログインすると、Thrive Themes が提供するさまざまなプラグインとツールが表示されます。

Thrive Leadsプラグインを選択し、下部にある「選択した製品をインストール」ボタンをクリックするだけです。

Thrive Leads の準備が整うと、成功メッセージが表示されます。

次に、「Thrive Themesダッシュボードに移動」ボタンをクリックします。

次に、WordPress管理パネルから Thrive Dashboard » Thrive Leads に移動する必要があります。

「リードグループ」の見出しの隣にある「新規追加」ボタンをクリックするだけです。

その後、ポップアップウィンドウが開きます。

新しいリードグループの名前を入力し、「リードグループを追加」ボタンをクリックできます。

次に、新しいオプトインフォームを作成する必要があります。

「新しいオプトインフォームの種類を追加」ボタンをクリックしてください。

その後、Thrive Leads はフォームの種類を選択するように求めます。

ウェブサイトにアラートバーを追加するには、「リボン」タイプを選択できます。

リボンオプトインフォームタイプを追加した後、フォームを追加する必要があります。

リードグループの下にある「フォームを追加」オプションをクリックするだけです。

次の画面で、既存のフォームからいずれかを選択できます。

フォームを作成するのは初めてなので、「フォームを作成」ボタンをクリックしてください。

これで、画面にポップアップウィンドウが表示されます。

フォームの名前を入力し、「フォームを作成」ボタンをクリックできます。

フォームはリボンリードグループに追加されます。

フォームのデザインを編集するには、鉛筆アイコンをクリックするだけです。

次に、Thrive Leads は複数のテンプレートを選択肢として表示します。

テンプレートを選択し、下部にある「テンプレートを選択」ボタンをクリックするだけです。

これにより、ライブプレビュー付きのビジュアルビルダーが起動し、アラートバーをカスタマイズできます。

たとえば、テンプレート内のテキストを選択してニーズに合わせて変更できます。または、アラートバー内の画像をクリックして変更することもできます。

編集が完了したら、下部にある「作業を保存」ボタンをクリックしてください。

これでビジュアルエディタを閉じ、フォーム設定に戻ることができます。ここでは、アラートバーのトリガー、表示頻度、位置を設定するオプションが表示されます。

デフォルトでは、ページが読み込まれるとアラートバーが一番上に表示されます。ただし、これらの設定を変更することもできます。

例えば、「トリガー」オプションをクリックすると、一定時間後にアラートバーを表示する、ユーザーが一定量スクロールダウンしたときに表示する、またはユーザーがページの最下部に到達したときに表示するなど、さらに多くのオプションが表示されます。

それに加えて、表示頻度を変更することもできます。デフォルトでは、アラートバーは常にすべてのユーザーに表示されます。

ただし、これを編集して、一定の日数後に同じ訪問者にアラートバーを表示することができます。

次に、WordPressダッシュボードからThrive Leadsページに戻ることができます。

その後、歯車アイコンをクリックして表示設定を開くだけです。

ここから、アラートバーを表示する投稿やページを選択できます。

例えば、フロントページのみに表示したり、すべての投稿とページを選択したりできます。アラートメッセージの表示を除外するページや投稿を選択するオプションもあります。

完了したら、「保存して閉じる」ボタンをクリックするだけです。

最後のステップは、トグルをクリックして、デスクトップおよびモバイルデバイスにアラートバーを表示することです。

それが完了すると、アラートバーはユーザーのメールアドレスを収集し、メールリストを構築する準備が整います。

それが実際に動作している様子は、ウェブサイトでご覧いただけます。

詳細については、完全な Thrive Themes レビューをご覧ください。

方法3：カスタムHTML/CSSを使用してアラートバーを手動で作成する

OptinMonsterまたはThrive Leadsを使用したくない場合はどうなりますか？この方法では、HTMLおよびCSSコードを使用して通知バーを作成する方法を示します。

まず、アラートバーの次のカスタムCSSコードをコピーする必要があります。

<pre class="wp-block-syntaxhighlighter-code">
.alertbar {
    background-color: #ff0000;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 100%;
    z-index: 100;
}
</pre>

ウェブサイトにCSSコードを追加する簡単な方法は、WPCodeを使用することです。これは、カスタムコードをウェブサイトに追加するのに役立つ、WordPress向けの最高のコードスニペットプラグインです。

注意: WPCode は WPBeginner が提供するプラグインの1つです。ウェブサイトのページにスクリプト、HTMLコードなどを簡単に追加できるように作成しました。組み込みのコードスニペットライブラリ、条件付きロジック、コンバージョンピクセルなどの機能が備わっています。

まず、無料のWPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化したら、WordPressダッシュボードからコードスニペット » + スニペットを追加に移動し、「カスタムコードを追加（新規スニペット）」オプションを選択する必要があります。

その後、一番上のスニペットのタイトルを入力し、CSS コードをコードプレビュー領域に貼り付けます。

コードの種類を「CSS スニペット」オプションに変更する必要もあります。

次に、[挿入] セクションまで下にスクロールできます。ここでコードを実行する場所を選択できます。

アラートバーをウェブサイト全体に表示したいので、「自動挿入」メソッドを使用できます。「すべてで実行」設定を維持することもできます。

それが完了したら、一番上にある「スニペットを保存」ボタンをクリックできます。

コードを有効にするには、トグルをオンにする必要もあります。

その後、WordPress管理ダッシュボードのコードスニペット » ヘッダーとフッターに移動します。

次の HTML コードの行をコピーして、「ヘッダー」ボックスに貼り付けるだけです。

<div class="alertbar">We are currently closed due to Covid-10.</div>

WPCode の「ヘッダー」ボックスで、そのコードは次のようになります。

アラートテキストは好きなように変更できます。完了したら、ページ上部の「変更を保存」ボタンをクリックするのを忘れないでください。

これで、WordPressブログにアクセスしてアラートバーを確認できます。次のように、すべてのページの先頭に表示されるはずです。

ヒント: 一部のWordPressテーマでは、アラートバーがメニューと重なる場合があります。バーの高さを40pxまたは30pxに変更して、これを回避できます。また、テキストがバー内で垂直方向に中央揃えになるように、行の高さを調整する必要があります。

ボーナス: WordPressページにカスタムアラートメッセージを追加する

商品ページ、チェックアウトページ、ショップページなど、ウェブサイトのさまざまな部分にカスタムアラートメッセージを追加したい場合は、SeedProdを使用できます。これは、WordPress向けの最高のウェブサイトビルダーおよびランディングページビルダーです。

このプラグインは、コードを編集せずにカスタムテーマやウェブサイトページを作成するためのドラッグアンドドロップビルダーを提供します。また、サイトのどこにでも配置できるアラートブロックも提供しています。

このアラートブロックは、在庫が少なくなっていること、特定の商品がセールになっていること、またはその他の時間制限のある警告を顧客に通知できます。

ページにアラートブロックを追加し、タイトルと説明を追加するだけです。このプラグインでは、日付やその他のクエリパラメータを挿入できる動的コンテンツを追加することもできます。

アラートブロックには、さらに多くのカスタマイズオプションがあります。たとえば、配置を変更したり、フォントサイズを調整したり、アイコンを編集したりできます。

SeedProdの使用方法の詳細については、WordPressでカスタムページを作成する方法に関するガイドをご覧ください。

この記事がWordPressでアラートバーを作成する方法を学ぶのに役立ったことを願っています。また、サイトをさらにカスタマイズするための最高のWordPressドラッグアンドドロップページビルダーや、ストアの売上を伸ばすための最高のWooCommerceプラグインに関するガイドもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。