WordPressのサイトにお知らせ欄を設置するプラグインは『What's New Generator』一択だった！

 

 

コーポレートサイト（企業サイト）なんかでよく見る「お知らせ欄」。

 

あれを設置するいい方法ないかなー、とあれこれ探している内にいいプラグインを見つける事ができました。

 

お知らせ欄のデザインは、思い描いていた通りのシンプルなタイプ。

ただ、使いこなすには少しコツが必要になるので、ここで細かい使い方まであわせて解説しておこうと思います。

１．What's New Generator とは

What's New Generator は、WordPress で作られたサイトにお知らせ欄を設置する事ができるプラグインです。

 

設置したイメージはこのような感じ。

 

作成したお知らせメッセージ（リンク）は、ショートコードで好きな場所に設置することができます。

２．What's New Generator プラグインのインストール

What's New Generator は、WordPress の公式プラグインなので、プラグイン → 新規追加 から検索してインストールできます。

 

公式ページから直接ダウンロードする方は、以下のリンクからどうぞ。

外部リンクWhat's New Generator プラグインページ

 

プラグインのインストール方法がわからない方は、以下のページを参考に。

内部リンクWordPressにプラグインをインストールする2つの方法を解説

 

３．What's New Generator の使い方

What's New Generator を有効化したら、設定に「What's New 設定」という項目が増えるので、ここから設定していきます。

 

What's New Generator 設定画面。

作成者が日本人の方なので、設定画面が日本語だというのもありがたいです。

 

さらに下にスクロールするとプレビューがあるのですが、ここに表示されているのは新着情報というよりは、トップページと同じ投稿記事一覧。

おそらくこの記事を見てくれているほとんどの方は、これじゃなくて「独自のお知らせテキスト」を設置する事が目的なのではないかと思います。

 

ということでまずは、お知らせ用の新規カテゴリーを作成しましょう。

 

また元の What's New 設定画面に戻り、「カテゴリーのスラッグ」のボックスにさっきコピーしておいたスラッグをペーストします。

 

これで、カテゴリーをお知らせに設定した投稿が、What's New の一覧に表示されるようになりました。

 

続いて、投稿 → 新規追加 でお知らせに表示させたい内容を投稿しましょう。

やり方は普通の記事の作成方法と同じですが、カテゴリーをさきほど作成した「お知らせ」に設定するのをお忘れなく。

 

これで投稿した記事が、お知らせ一覧に表示されました！

 

What's New Generator の日付表記は WordPress の設定を参照しているので、これを日本語表記に変更することで反映されます。

設定 → 一般 から「日付形式」を日本語に変更しておきましょう。

 

これで日付も日本語で表示されるようになりました！

 

４．お知らせに設定した記事が一覧に表示される問題

お知らせ欄は表示できるようになったんですが、このままだとお知らせに設定した記事が記事一覧に表示されてしまいます。

 

4-1．Ultimate Category Excluder を使った方法

そんな時は『Ultimate Category Excluder』というプラグインを使って、お知らせカテゴリーを記事一覧ページに表示させないように設定しましょう。

 

プラグイン → 新規追加 から『Ultimate Category Excluder』と検索してインストールしましょう。

 

有効化して、設定 → Category Excluder から以下と同じようにチェックを入れます。

 

あとは下の「 Update 」ボタンを押せば、記事一覧でお知らせカテゴリーが非表示になるはず。

・・・だったんですが。。

 

どうも僕の環境では上手くいかなかったらしく表示されたまま。。

 

今使っているテーマか別のプラグインと干渉しているのかはわかりませんが、同じ様に非表示にならなかったという方は、次の方法を試してみてください。

4-2．functions.php に直接記述する方法

僕と同じ様に上の方法で失敗した方は、まず必要なくなった『 Ultimate Category Excluder 』プラグインを WordPress から削除しておきましょう。

 

そして次のコードを子テーマの『 functions.php 』に記述します。

※外観 → テーマエディター → テーマのための関数(functions.php)

//トップページから特定のカテゴリの除外
function exclude_category( $query ) {
if ( $query->is_home() && $query->is_main_query() ) {
$query->set( 'cat', '-○○' );
}
}
add_action( 'pre_get_posts', 'exclude_category' );

4行目の ( 'cat', '-〇〇' ) の 〇〇 の部分にカテゴリID を指定します。

（〇〇の手前の半角マイナスは残しておいてくださいね）

 

複数のカテゴリーを除外したい場合は、以下のように「 , 」（カンマ）で区切って記述しましょう。

//トップページから複数のカテゴリを除外
function exclude_category( $query ) {
if ( $query->is_home() && $query->is_main_query() ) {
$query->set( 'cat', '-11,-52,-115' );
}
}
add_action( 'pre_get_posts', 'exclude_category' );

カテゴリID の調べ方がわからない方は、以下のページを参照してください。

 

これで無事、お知らせカテゴリー の記事が非表示になりました。

 

[showwhatsneW]

※最後の「 W 」を小文字にしてください。

 

実際に設置するとこんな感じで表示されます。

お知らせ欄をクリックすると記事本文が表示されます。

 

５．Ultimate Category Excluder に外部サイトへのリンクを設置する方法

「 VK Link Target Controller 」というプラグインを使うことで、お知らせ欄に外部サイトへのリンクを設置することも可能です。

 

プラグイン → 新規追加 から「 VK Link Target Controller 」と入力して、インストールと有効化をしましょう。

 

設定 → Link Target Controller を選択してプラグインの設定画面を開きます。

 

「投稿」のチェックボックスをオンにして、変更を保存をクリックします。

 

すると投稿画面の下部に「リダイレクト用URL」という項目が追加されるので、ここにリンクしたい URL を入れるだけで OK。

６．お知らせ欄のデザインをCSSで調整しよう

お知らせ欄に表示させる数は、プラグインの設定画面で自由に調整できるんですが、できれば過去のお知らせも残しておきたいですよね？

さいごに CSS でのデザイン調整方法を簡単に解説しておきます。

 

外観 → テーマエディター → スタイルシート(style.css) に以下の様に記述すると、お知らせ欄の高さの変更と、余った部分はスクロールできるようになります。

div.whatsnew{
  height: 140px; /*ブロックの高さ*/
  overflow: auto; /*スクロール*/
}

 

「 height: 」のうしろの数字を変更することで、高さを自由に調整できます。

実際に表示するとこんな感じになります。

さいごに

What's New Generator プラグインを使ったお知らせ欄の設置方法と、カスタマイズの仕方までを解説しました。

 

すべてをやろうとすると、プラグインの数が増えてしまうのが難点ですが、お知らせ欄に欲しい機能はほぼ網羅できているのではないかと思います。

ここでは PC の画面キャプチャーのみで解説していますが、CSS でデザインを調整する時などは、スマホの表示の方も確認しながらやるようにしましょう。