特別な告知や注目を集めたいコンテンツってありますよね。期間限定のキャンペーンや緊急のお知らせなどです。当記事では、それらを通知バーとして表示できるプラグインをご紹介いたします。いろいろと細かく設定できて高機能なプラグインです。
「WPFront Notification Bar」の機能概要
告知やキャンペーンに活用できる通知バーを表示できるプラグインです。主な機能は以下の通りですが、設定項目が豊富なので当記事で細かく分けて解説していきます。
- 通知バーの固定表示機能
- 表示・非表示のタイミングを指定
- ページ別の表示・非表示設定
- 最初に閲覧したページにのみ表示する機能
- バーやテキストのデザイン機能
プラグインのインストール
管理画面から「WPFront Notification Bar」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
「WPFront Notification Bar」の使い方
有効化したら「設定」内に表示されている「Notification Bar」から設定を行なっていきます。
設定できる項目が豊富で高機能なので、基本と応用に項目を分けてみました。それぞれ目的別に解説いたします。気になる項目をクリックしてご確認いただけます。
基本設定
シンプルな通知バーでいい場合は、以下の設定のみでもお使いいただけます。
通知バーを表示したい
「Enabled」にチェックを入れて表示可能です。下部の「Position」で表示箇所を画面上部か下部から選択できます。
通知バーを固定表示したい
固定表示するには「Fixed at Position」にチェックを入れます。
「Display on Scroll」にチェックを入れると、スクロール時にバーが表示されるようになりますが、「Fixed at Position」にも一緒にチェックが必要です。「Scroll Offset」では指定したピクセル分スクロールした際にバーが表示されるようになります。
メッセージを入力したい
バーに表示するメッセージは「Message Text」に入力できます。aタグなどのHTMLは使えるので、テキストリンクできます。
なおデフォルトのままではテキストリンクの文字が黒色になるようですので、変更したい場合は設定画面最下部の「Custom CSS」に以下を追記してください。一部のデザインを調整したい際にもご活用いただけます。
「color」の部分でお好みの色に変更いただけます。
#wpfront-notification-bar a {
color: #00b7ea;
}バーの高さを変えたい
「Bar Height」で高さを変えれます。デフォルトではテキストに合わせて可変する仕様です。
バーにリンクボタンを表示したい
「Display Button」でボタンも表示できます。
バーやテキストのカラーを変更したい
「Color」の項目ではボタンやテキストのカラーも任意に変更できます。2色以上設定するとグラデーションカラーも設定可能です。
バーを閉じるボタンを表示したい
「Display Close Button」でバーの右上に「閉じるボタン」を表示できます。
基本的には、ここまでの設定だけでシンプルな通知バーとしてお使いいただけます。
応用設定
こちらは設定が必要なわけではありませんが、ユーザビリティを高めたり、ひと工夫した通知バーを再現できる設定項目です。
- 表示するタイミングを指定したい
- 閉じた後に再表示ボタンを表示したい
- 一度閉じた場合は、他のページでも表示しない
- 小さなデバイスやウィンドウでは表示しない
- バーを自動で閉じるようにしたい
- バーを表示する期間を指定したい
- 表示するページを指定したい
- ユーザー権限によって表示を変更したい
表示するタイミングを指定したい
「Display After」で秒数を指定してバーを表示できます。基本設定で説明しました「Display on Scroll」にチェックが入っている場合は、スクロール時に表示されるので機能しません。
閉じた後に再表示ボタンを表示したい
「Display Reopen Button」にチェックをいれて表示可能です。その下にある「Reopen Button Image URL」では任意の画像を再表示ボタンとして使えます。
一度閉じた場合は、他のページでも表示しない
「Keep Closed」で閉じた後に他のページでも表示させない設定が可能です。何度も表示されるとユーザーにわずらわしい印象を与えるので、設定しておきましょう。
その下の「Keep Closed For」では一度閉じた瞬間からX日間は表示させないような設定も可能です。
小さなデバイスやウィンドウでは表示しない
「Hide on Small Devices」や「Hide on Small Window」にチェックを入れて小さな画面では表示させない設定が可能です。それぞれ最大幅も入力できるので、お好みの数値を入力してください。
バーを自動で閉じるようにしたい
「Auto Close After」に秒数を入れてバーを自動で閉じるようにできます。
バーを表示する期間を指定したい
「Filter」で通知バーを表示する期間を日時指定できます。期間限定のキャンペーン時などに便利ですね。
表示するページを指定したい
「Filter」の項目の下部にある「Display on Pages」ですべてのページか特定のページのみで表示するのかを選択できます。
ここでおもしろいのは、「Only in landing page」という項目です。ユーザーが最初に開いたページでのみ表示される機能です。通知のしつこさを軽減できますね。
ユーザー権限によって表示を変更したい
「Display for User Roles」ではユーザーの権限やログインの有無によって表示するかどうかを設定できます。
「Guest users.」を選んで未ログインユーザーにのみ通知したり、権限を指定して管理者ユーザーのみに通知したり、応用できる幅は広そうです。
まとめ
サイト内に通知バーを表示できるプラグインですが、その機能は細かく多岐に渡ります。シンプルな通知バーとしても使えますが、幅広く応用できるポテンシャルもあります。
ちなみに弊社の「CURE」以降のWordPressテーマでは、シンプルなヘッダーメッセージを表示する機能を実装しています。当記事でご紹介いたしましたプラグインほど高機能ではありませんが、ぜひご活用ください。
コメント