Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

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

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

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

How to create an alert bar in WordPress

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

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

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

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

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

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

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

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

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

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

OptinMonster

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

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

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

Connect your existing account

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

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

Connect OptinMonster to WordPress

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

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

Create your first campaign

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

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

Adding a sticky floating bar to the WordPress footer

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

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

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

Enter a name for your campaign

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

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

Customize your alert bar

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

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

Move alert bar to the top

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

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

Edit text in alert bar

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

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

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

Edit countdown timer settings

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

次に、「Display Rules」タブで、サイト上のいつ、どこにアラートバーを表示するかを選択する必要があります。初期設定では、訪問者がページに5秒間滞在した後にアラートバーが表示されるようになっています。

これを0秒に変更し、アラートバーが即座に外観表示されるようにする。そのためには、’sec’の値を0に変更します。

Set display rule time to zero

そのほか、アラートバーの外観を選択することもできます。初期設定の「現在のURLパスが任意のページ」を使用することができます。こうすることで、WordPressサイトのすべてのページにアラートバーが表示されます。

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

Action settings in display rules

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

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

Summary of alert bar display rules

問題がなければ、画面上部の「保存」ボタンをクリックします。

その後、上部にある公開タブに移動し、公開する状態を「公開する」に変更します。完了したら、「保存」ボタンをクリックし、キャンペーンビルダーを閉じます。

Publish alert bar campaign

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

最後のステップは、サイト上でキャンペーンを有効化することです。状態を「保留」から「公開する」に変更するだけです。

Change alert bar output settings

完了したら「変更を保存」ボタンをクリックするのをお忘れなく。

サイトのどのページにアクセスしても、キャンペーンが実施されていることがわかります。

View alert bar on website

方法2:Thrive Leadsを使ってアラートバーを作成する

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

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

Thrive Themes Coupon Code

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

Thrive Product Managerプラグインはアカウントエリアにあります。

Download Thrive Product Manager plugin

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

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

Go to Thrive product manager

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

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

Install the Thrive Leads plugin

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

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

See Thrive Leads ready to use

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

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

Add new leads group

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

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

Enter a name for lead groups

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

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

Add new opt in form

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

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

Choose ribbon form type

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

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

Add a form to ribbon type

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

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

Click create form

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

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

Enter name for form

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

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

Edit design of ribbon form

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

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

Select template for alert bar

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

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

Customize your alert bar design

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

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

Edit trigger and display frequency

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

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

Change trigger for alert bar

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

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

Change display frequency of alert bar

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

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

Click the settings icon

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

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

Select pages to display alert bar

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

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

Enable alert bar on desktop and mobile

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

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

View thrive leads alert bar

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

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

OptinMonsterやThrive Leadsを使いたくない場合はどうすればよいでしょうか?この方法では、HTMLとCSSコードを使用して通知バーを作成する方法を紹介します。

注:初心者の方にはこの方法はお勧めしません。WordPressを初めてお使いになる場合や、サイトにコードを追加する自信がない場合は、上記のいずれかの方法をお勧めします。

まず、アラートバー用に以下のカスタム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)’オプションを選択する必要があります。

The WPCode code snippet plugin for WordPress

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

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

Enter CSS code in WPCode

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

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

Edit insertion method for code

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

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

Activate and save ad code in WPCode plugin

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

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

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

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

Insert code to header

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

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

View custom CSS alert bar

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

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

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

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

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

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

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

SeedProd alert message

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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

6件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    The alert bar can be a great way to show people some time-limited offers. After all, the recent Black Friday and Cyber Monday showed exactly how well it works, as I myself was browsing your alert bar with offers on plugins in your range, and I kept considering whether I should get AIOSEO as a Christmas gift for myself :

  3. Ralph says

    Great idea for another form of promotion on blog, during sale in our shops. I’m going to use it this christmast to boost my sales. Thanks!

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。