(↑Pinterestでシェアお願いします!)

WordPressサイトのコンバージョンアップが見込めるWPFront Notification Barプラグインの使い方

執筆者 | 更新日 2020年02月10日 | リストマーケティング | コメント0件

こんにちは、根本耕輔です。

今回は、WordPressサイトに通知バーを設置できるWPFront Notification Barというプラグインの使い方をご紹介していきます。

WPFront Notification Barとは?

まず、使い方に入る前に「WPFront Notification Bar」というプラグインがどういった機能を持っているのかということをご紹介します。このプラグインは、WordPressのサイトに通知バー(アナウンスメントバーとも言います。)を設置する事ができる無料のプラグインです。通知バーを設置して、新商品を宣伝したり、その他、サイトを移転する場合など、読者に何かしらの通知をしておきたいという時に使用するプラグインです。ただ通知をするだけではなく、ボタンを設置する事ができ、そのボタンにはリンクを埋め込む事ができるので、そのボタンをクリックして別のページに飛んでもらう事ができます。この通知バーをサイトに設置しておくと、やっぱり目立つので、それだけコンバージョンも増えます。

この通知バー以外にも、オウンドメディアサイトのコンバージョンをアップさせる方法がいくつかあるので、セットで確認しておくことをお勧めします。

Step1. WPFront Notification Barをインストールし有効化する

WPFront Notification Bar

では、WPFront Notification Barプラグインをインストールして有効化しましょう。

Step2. 通知バーの表示設定をする

WordPressの「設定」から「Notification Bar」に行く

プラグインを有効化するとWordPressのダッシュボードの「設定」項目に「Notification Bar」が追加されますので、ここにいきます。

その後の設定は、非常に簡単です。

Display設定

WPFront Notification BarプラグインのDisplay設定

Enabled

設定が完了してもしなくても、ここにチェックを入れておきましょう。チェックを入れることで、通知バーが表示されるようになります。

Position

アナウンスメントバーを表示する場所を設定します。「Top」と「Bottom」の2種類あり、「Top」ならサイトの一番上、「Bottom」ならサイトの一番下に表示されます。

Fixed at Position

チェックを入れると通知バーが「Position」で設定した位置に固定され、スクロールしても動かなくなります。

Display on Scroll

チェックを入れると、スクロールすると追尾するように、画面の上部に表示されます。

Scroll Offset

ここの設定は、どれくらいスクロールされたら、通知バーを表示するかの設定です。デフォルトでは「100」になっていますが、「0」に設定しても良いです。「0」だとページにランディングした瞬間に通知バーが表示されます。

Bar Height

通知バーの高さを設定します。デフォルトで「0」になっています。これは、自動で調節してくれるというものです。変更したい場合は、適宜、数値を変更しましょう。

Position Offset

通知バーとサイトのトップもしくはボトムとの距離(隙間)を設定できます。

Display After

ランディングしてから何秒後に通知バーを表示するかの設定です。好きな秒数を入力しましょう。でも、「Display on Scroll」にチェックを入れた場合は、機能しないので注意してください。

Animation Duration

通知バーが表示される瞬間のアニメーションの長さ、つまりアニメーションの継続時間を設定できます。

Display Close Button

チェックを入れる事で、通知バーを閉じるためのボタンを設置する事ができます。なので、チェックを入れなければ、ずっとバーが表示され続けます。

Auto Close After

何秒後に通知バーを自動的に閉じるかの設定です。でも、「Display on Scroll」にチェックを入れた場合は、機能しないので注意してください。

Display Shadow

チェックを入れることで、通知バーに影を入れる事ができます。

Display Reopen Button

チェックを入れると、バーを閉じた後に、再び表示するためのボタンを表示する事ができます。これは、「Display Close Button」か「Auto Close After」のどちらか、もしくは両方の設定をしている場合に機能します。

Keep Closed

チェックを入れると、一旦バーを閉じたら、他のページでも表示しないという設定になります。これも、「Display Close Button」か「Auto Close After」のどちらか、もしくは両方の設定をしている場合に機能します。

Keep Closed For

Cookiesを追跡してやってくれていると思いますが、何日間、通知バーを非表示にするかの設定になります。

Content設定

WPFront Notification BarプラグインのContent設定

Message Text

ここで、アナウンスメントバー(通知バー)の本文を入力します。例えば、「新商品が完成しました!」とか「ブログ運営ガイドをゲットしませんか?」みたいな感じです。

Process Shortcode

テキストにショートコードを追加できます。

Display Button

チェックを入れると、通知バーにボタンを追加する事ができます。別のサイトに読者を飛ばしたいという場合は、チェックを入れましょう。

Button Text

「Display Text」にチェックを入れ、ボタンを表示するとなった場合に、ここでボタンの文言を入力します。「詳細はこちら」みたいな文言ですね。

Button Action

「Button Action」にはいくつか設定項目があって、リンクを埋め込む設定や新規タブで開くかどうかの設定をしていきます。

Open URL:

ボタンに埋め込むリンクを入力します。セールスページやオプトインページ(スクイーズページ)に飛ばしたいなら、それらのリンクを入力します。

Open URL in new tab/window

チェックを入れると、リンク先のページが新規タブで表示されます。

No follow link

チェックを入れるとリンクがNo followになります。クローラーに追跡されないたくない場合は、ここにチェックを入れておきましょう。

Execute JavaScript

チェックを入れて、JavaScriptコードを挿入する事ができます。そして、その下の欄に、コードを入力します。

Close Bar on Button Click

チェックを入れると、ボタンをクリックしたら、バーを閉じるという設定になります。

Filter設定

WPFront Notification BarプラグインのFilter設定

Start Date & Time

常時アナウンスメントバー(通知バー)を表示するのではなく、特定の日時から表示を開始したい場合は、ここにその日付を入力します。

End Date & Time

通知バーの表示が終了する日にちと時間を入力する事ができます。

Display on Pages

通知バーを表示するページを設定できます。「All pages.」は全ページに、「Only in landing pages」は読者が最初にランディングしたページに、「Including in following pages」にチェックを入れるとその下の欄に表示されているページを選択する事で、そのページに通知バーが表示されるようになります。「Exclude in following pages」にチェックを入れると、逆に表示しないページを設定できます。

Display for User Roles

ここでは、通知バーを表示する人を設定します。「All users.」は全員に、「All logged in users.」はログインしている人全員に、「Guest users.」はログインしていないユーザー全員に、「For following user roles」は指定のユーザーに表示するという設定です。「For following user roles」の下の欄から表示したいユーザーにチェックを入れましょう。「Enable WP eMember integration」は、「WP eMember」プラグインと連携して、表示するユーザーを限定できます。

Filterの設定に関しては、特に設定は必要ないのかなと思います。だた、プロダクトローンチで商品を販売する場合は、「Start Date & Time」と「End Date & Time」の設定は必要ですね。

Color設定

WPFront Notification BarプラグインのColor設定

Bar Color

アナウンスメントバー(通知バー)のメインカラー(ボタン以外の背景色)を設定します。

Message Text Color

メッセージのテキストカラーを設定します。

Button Color

ボタンを表示する場合、ここでボタンの色が設定できます。

Button Text Color

ボタンのテキストカラーを設定します。

Reopen Button Color

再び通知バーを表示するためのボタンカラーを設定します。

Close Button Color

こちらは、クローズボタンでバーを閉じるためのボタンの色を設定します。

ColorもデフォルトのままでOKですが、ボタンの色をブランドカラーに設定しても良いかもしれません。設定する場合は、16進数のコードを用意しておきましょう。

CSS設定

WPFront Notification BarプラグインのCSS設定

Custom CSS

CSSコードを入力して、CSSでアナウンスメントバー(通知バー)の外観などを設定できます。必要があれば、ここにコードを追加しましょう。

KohsukeNemoto.comニュースレターに参加しませんか?

あなたがニュースレターに登録すると、、、

  • 週に1,2回程度のニュースレター
  • 有料販売している5コース(4,900円相当)
  • 新着有料コースの無料提供(不定期)

無料で受け取れます。右(スマホの方は下)のフォームにお名前とEメールアドレスを登録し、無料でニュースレターと特典をお受け取りください。

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。