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

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

アラートバーや通知バーは、重要な更新や特別オファー、新製品の発売などを訪問者に知らせるのに最適な方法です。

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

なぜWordPressにアラートバーを作るのか？

アラートバーは、サイト訪問者に何か重要なお知らせをするのに最適な方法です。現在開催中の販売イベント、営業時間の更新、サービスの変更などが考えられます。

また、アラートバーを使用して、1つ買うと1つ無料になるキャンペーンなど、特別な取引について訪問者に伝えることもできます。オンラインストアを運営している場合、この設定は最適です。

アラートバーの使用は、ホームページにお知らせを掲載するよりも優れています。アラートバーは、サイト全体の各ページの上部に目立つように表示することができます。

WordPressでアラートバーを作成するのは簡単です。ここでは、最高の通知バー・プラグインを使う方法と、HTMLとCSSコードを使う手動の方法を見ていきます。以下のリンクをクリックすると、各設定にジャンプします：

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

OptinMonsterは、市場で最高のコンバージョン最適化およびリード生成ソフトウェアです。より多くのサイト訪問者を購読者やカスタマに変換することができます。

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

また、OptinMonsterを使用してサイト用のアラートバーを作成することもできます。ビルトインされたテンプレートを使えば、数分で素晴らしいアラートバーを作成することができます。

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

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

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

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

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

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

画面の指示に従ってOptinMonsterアカウントに接続します。

次に、WordPressダッシュボードのOptinMonster ” キャンペーンにアクセスします。最初のキャンペーンを作成」ボタンをクリックします。

OptinMonsterキャンペーンビルダーが開きます。

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

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

マウスをその上に持っていき、「Use Template」ボタンをクリックして選択するだけです。ここでは、クーポン・コード・プロモ・テンプレートをアラート・バーに使用します。

次に、テンプレートの名前を入力します。キャンペーンに名前を付けたら、「ビルド開始」ボタンをクリックしてください。

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

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

初期設定では、画面の下部にアラートバーが表示されることがわかります。

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

フローティング・バーのテキストを変更するには、変更したいエリアをクリックし、好きなテキストを入力するだけです。

フォントや文字の大きさ、色なども変更できる。

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

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

一方、「ダイナミック」カウントダウンタイプもあります。このタイマーはあなたのサイトでの各ユーザーの行動に基づいて動作します。カウントダウンはサイト訪問者ごとに区切り設定されます。

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

次に、「Display Rules」タブで、サイト上のいつ、どこにアラートバーを表示するかを選択する必要があります。初期設定では、訪問者がページに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の管理エリアからProduct Managerのページにアクセスするだけです。

ここから「アカウントにログイン」ボタンをクリックする。

あなたのアカウントにログインした後、あなたはThriveテーマによって提供されるさまざまなプラグインやツールが表示されます。

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

Thrive Leadsが使用可能になると、成功のメッセージが表示されます。

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

次に、WordPress管理画面からThriveダッシュボード ” Thrive Leadsに移動します。

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

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

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

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

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

その後、Thrive Leadsはフォームタイプを選択するように尋ねます。

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

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

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

次の画面では、既存のフォームから選択することができます。

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

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

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

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

フォームのデザインを編集するには、鉛筆のアイコンをクリックしてください。

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

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

ビジュアルビルダーを起動し、ライブプレビューでアラートバーをカスタマイズできます。

例えば、テンプレート内のテキストを選択し、必要に応じて変更することができます。また、アラートバーの画像をクリックして変更することもできます。

編集が終わったら、一番下にある「作業を保存」ボタンをクリックします。

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

初期設定では、ページが読み込まれるとアラートバーが上部に表示されます。ただし、これらの設定は変更することができます。

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

さらに、表示頻度を変更することもできます。アラートバーは初期設定ではすべてのユーザーに常に表示されます。

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

次に、WordPressダッシュボードからThrive Leadsページに戻ります。

その後、歯車のアイコンをクリックしてディスプレイ設定を開きます。

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

例えば、フロントページのみに表示することも、すべての投稿やページを選択することもできます。また、アラートメッセージを表示しないページや投稿を設定することもできます。

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

最後のステップは、デスクトップとモバイル端末にアラートバーを表示するためのトグルをクリックすることです。

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

あなたのサイトを訪れて、それが実際に使われているのを見ることができる。

詳細については、私たちの完全なスライブテーマのレビューを参照してくださいすることができます。

方法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独自のプラグインの一つです。サイトのページにスクリプトやHTMLコードなどを簡単に追加できるように作成しました。ビルトインコードスニペットライブラリ、条件ロジック、コンバージョンピクセルなどの機能があります。

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

有効化したら、WordPressダッシュボードからCode Snippets ” + Add Snippetに向かい、’Add Your Custom Code (New Snippet)’オプションを選択する必要があります。

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

また、コードタイプを「CSSスニペット」オプションに変更する必要があります。

次に、「インサーター」セクションまでスクロールダウンします。ここでコードを実行する場所を選択できます。

サイト全体にアラートバーを表示させたいので、初期設定の「Auto Insert」を使用することができます。また、’Run Everywhere’設定を維持することもできます。

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

また、コードを有効化するには、トグルをクリックする必要があります。

その後、WordPress管理ダッシュボードのCode Snippets ” Headers & Footerに移動します。

以下のHTMLコードをコピー＆ペーストして、「ヘッダー」ボックスに貼り付けるだけです：

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

WPCodeの’Header’ボックスで、このコードがどのように見えるかを示します：

アラートテキストはお好きなものに変更できます。ページ上部の「変更を保存」ボタンを忘れずにクリックしてください。

これで、WordPressブログにアクセスしてアラートバーを見ることができる。このように、すべてのページの上部に表示されるはずだ：

ヒント：いくつかのWordPressテーマでは、アラートバーがメニューに重なることがあります。これを避けるために、バーの高さを40pxまたは30pxに変更することができます。また、テキストがバーの垂直方向の中央に配置されるように、行の高さも適宜下げる必要があります。

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

商品ページ、購入手続きページ、ショップページなど、サイトの様々な部分にカスタマイザーでアラートメッセージを追加したい場合は、SeedProdをご利用ください。これは、WordPressのための最高のサイトビルダーとランディングページビルダーです。

プラグインは、コードを編集することなく、カスタムテーマやサイトページを作成するためのドラッグアンドドロップビルダーを提供しています。また、サイト上の任意の場所に配置することができますアラートブロックを提供しています。

このアラートブロックは、在庫が少なくなっていること、特定の項目がセール中であること、または他の時間的な警告をカスタマイザーに警告することができます。

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

アラートブロックのカスタマイズオプションも増えました。例えば、整列の変更、フォントサイズの調整、アイコンの編集などが可能です。

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

この投稿がWordPressでアラートバーを作成する方法を学ぶのにお役に立てば幸いです。また、サイトをさらにカスタマイズするのに役立つWordPressドラッグ＆ドロップページビルダーや、ショップの売上を伸ばすのに最適なWooCommerceプラグインについてのガイドもご覧ください。

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.