WPFront Notification Barで記事上/下に告知バーを設置する方法【PCのみ表示】

そんなときに便利なのが、無料プラグイン WPFront Notification Bar です。

このプラグインを使うと、記事の上や下に告知バーを表示でき、しかもPCだけに限定表示することも簡単です。

WPFront Notification Barとは？

WPFront Notification Bar は、サイト上部または下部に告知バーを設置できる無料のWordPressプラグインです。

セール情報やキャンペーン告知、重要なお知らせなどを目立つ位置に表示でき、クリックで特定ページへ誘導したり、バナーを表示したりすることができます。

主な特徴は以下の通りです。

• 表示位置（上・下）の切り替え
• 表示条件の細かい設定（ページ指定、期間指定、ユーザー指定など）
• テキストやボタンだけでなく、バナー画像やメディアも挿入可能
• 色や文字のデザインを自由に変更可能
• クリック時にURL移動やJavaScript実行などのアクション設定

例えば、「○日までの期間限定キャンペーン」や「新商品の発売告知」をサイト訪問者に確実に見てもらうのに非常に有効です。

プラグインのインストール

1. WordPress管理画面 → 「プラグイン」 → 「新規追加」
2. 検索窓に「WPFront Notification Bar」と入力
   
   
   　
3. 「今すぐインストール」 → 「有効化」する
   

基本設定（Displayタブ）

• メニューバーの「設定」→「Notification Bar」で WPFront Notification Bar の設定を開く。
  
  
  　
• バーを有効化
  • Enabled → ON（バーが表示されます）
• 表示位置
  • Position → Top（画面上部）または Bottom（画面下部
• スクロールしても固定する
  • Fixed at Position → チェックを入れる（固定表示）
    
    
    　
• 表示する端末の設定
  • Display On Devices → Except Small Devices（PCだけに表示）
    
    
    　

告知内容の設定（Contentタブ）

ここではバーに表示する文章や画像を入力します。

テキストだけでもいいですが、画像バナーやボタンを入れると目立ちやすくなります。

文章だけで告知する例

• Message Text をビジュアルモードにタブに切り替える
  
  
  　
• 告知する文言をエディタに記入する
  
  
  　

バナー画像を入れる例

1. Message Text をビジュアルモードにタブに切り替える
   
   
   　
2. 「メディアを追加」をクリック
   
   
   　
3. 画像をアップロードし投稿に挿入する
   
   
   　
4. これで画像が挿入されます
   
   
   　

表示条件を絞る（Filterタブ）

「Filter」タブでは、告知バーを、どこで・いつ・誰に見せるか を細かくコントロールできます。

これを使いこなせば、不要な場面で表示されてユーザー体験を損なうことを防げます。

表示期間の設定

• Date Type → Start and End Date

「開始日」と「終了日」を指定すると、その期間だけ告知バーが表示されます。

例：期間限定セール、キャンペーン告知、年末年始のお知らせなど。

表示するページを指定

• Display on Pages → 特定のページURLを指定可能

固定ページや投稿ページだけじゃなく、カテゴリやタグも指定可能。

ユーザーの種類で表示を切り替える

• Display for User Roles → ゲストだけ、ログインユーザーだけ、など。

例：会員限定の告知はログインユーザーのみに表示。

デザインを調整（Colorタブ）

「Color」タブでは、告知バーの色や見た目を自由に変えられます。

ブランドカラーやサイト全体の雰囲気に合わせることで、違和感なく馴染ませられます。

背景色

• Bar Color → バーの背景色を設定。

例：AFFINGERのテーマカラーに合わせると統一感が出ます。

文字色

• Message Text Color → バーに表示するテキストの色を設定。

背景色とのコントラストを意識すると読みやすくなります。

ボタンの色

• Button Color → 告知バー内に設置したボタンの背景色。
• Button Text Color → ボタン文字の色。

例：CTAボタンは目立つ色（オレンジや赤系）を使うとクリック率が上がりやすいです。

PC上部だけに表示する告知バーの設定例

• Enabled → チェックを入れる
  
  
  　
• Position → 「Top」
  
  
  　
• Fixed at Position → チェックを入れる
  
  
  　
• Display On Devices → 「Except Small Devices」を選択
  
  
  　
• Message Text に「文言」または「バナー」を挿入
  
  
  　
• Display Button → チェックを入れる
  
  
  　
• Button Text → ボタンの文言を入力
  
  
  　
• Button Action → ボタンのURLを入力
  
  
  　
• Filterタブで期間を設定（期間を設定しない場合は「None」を選択
  
  
  　　

告知バー表示例

まとめ

WPFront Notification Bar を使えば、

• 記事上や記事下に告知バーを表示
• PC限定で表示
• バナーやボタンも自由に挿入

が、すべて簡単にできます。