「What’s New Generator」はページのトップなど任意の位置にショートコードで「新着情報」を表示できるプラグインです。
設定した日数に応じてNewマークを付けたり、表示する投稿数を指定できたりといろいろなオプションがあり、面倒な作業なしで簡単に新着情報を表示することができます。
【What’s New Generator】プラグインの用途や機能
- 公開日または更新日での最新投稿を指定した件数分表示する
- 公開日または更新日から○日分の新着投稿にNewマークを付ける
- 外枠付きの一覧形式で表示（色などは指定可能）－下記「表示例」参照
- カテゴリーでの絞り込み表示ができる
この紹介記事を最後に編集したときの環境・バージョンなど
プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までにこの記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。
プラグインを使用（試用）したテスト環境
- テストサーバー：カラフルボックス
- WordPressのバージョン：5.2.3
- PHPのバージョン：7.3.11
- テーマ：HABONE(オリジナルテーマ)
- プラグインのバージョン：本記事で紹介しているバージョン2.0.2／最新バージョン 公式サイトで “whats-new-genarator” は配布されていません
- 公式サイト（wordpress.org上）：https://wordpress.org/plugins/whats-new-genarator/
- 公式サイト（作者サイト）：
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【What’s New Generator】プラグインの設定画面や表示の日本語化と翻訳
【What’s New Generator】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます
【What’s New Generator】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
基本的な設定方法や使い方
設定項目は
- タイトルにNEW！マークを表示する期間を指定
- 新着情報に表示するコンテンツに投稿または固定ページを設定
- 表示する件数を設定
- 表示順序は、公開日順・更新日順から選択
- カテゴリを指定して記事の新着情報を表示（投稿のみ）
です。設定が終わったら新着情報を挿入したい場所へ
[showwhatsnew]というショートコードを挿入するだけです。
ショートコードがそのまま表示されてしまうときは
などを参照ください
【What’s New Generator】プラグインの便利な使い方・カスタマイズ方法など
より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。
「What’s New Generator」でカスタム投稿タイプを含めるには
「What’s New Generator」は簡単便利なプラグインですが、初期状態では「投稿」と「固定ページ」しか扱うことができません。カスタム投稿タイプを含めるには以下の方法でプログラム中の記述を変更します（自己責任で行ってください）
- 管理画面の「プラグイン」→「プラグイン編集」をクリックします
- 右上の「編集するプラグインを選択」から「What’s New Generator」を選択し「選択」をクリックします
１３０行目付近（真ん中よりも少し下）に
$condition['post_type'] = 'post';という記述がありますのでここを下のようにします
$condition['post_type'] = array('post','カスタム投稿タイプ名');要するに’post’のみのところをarray()で囲み、,’カスタム投稿タイプ名’を追加するだけです。複数のカスタム投稿タイプがある場合には,’カスタム投稿タイプ名’を続けて追記していけばOKです。
※プラグインの設定で表示するコンテンツを「投稿＋固定ページ」にしていると上記のカスタマイズは動作しません。固定ページとカスタム投稿タイプ名を含める場合は設定を「投稿」にした上で、
$condition['post_type'] = array('post','page','カスタム投稿タイプ名');という風に、post（投稿）の記述の中へpage（固定ページ）を含めるようにすれば動作します。
ただし、この方法だとプラグインをアップデートした際に再度変更を行う必要がありますので、やり方だけ覚えておいていただきたいです。
もしもこの変更でエラー画面のみ表示されWordPressが使用できなくなったときは
【WordPress】プラグインのインストール＆追加方法とエラー対処の方法
を参考に復旧させればOKです
枠線や背景色などのカスタマイズ方法
設定には「タイトル背景色」「タイトル文字色」のみ変更が行えるようになっています。その他の変更をしたい場合には前述したカスタム投稿タイプの追加と同様にソースそのものを変更する必要があります。
- 管理画面の「プラグイン」→「プラグイン編集」をクリックします
- 右上の「編集するプラグインを選択」から「What’s New Generator」を選択し「選択」をクリックします
- whats-new-genarator/whats-new.cssをクリックします
例えば枠線の変更をしたい場合には
div.whatsnewの下にある「 border: 1px silver solid;」を変更します
その他の変更についてもこの画面で行えますので、ブラウザのデベロッパーツールで確認しながらカスタマイズしましょう
ただ、この方法だとプラグイン更新時にCSSが上書きされて元に戻ってしまう可能性があるので人工夫します。
例えば、外枠の色を変更したい場合には
div.whatsnew {
margin: 10px 0;
font-size: 100%;
word-break: break-all;
overflow: hidden;
border: 1px silver solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}となっているところをそのままテーマのCSSへコピーして、「div.whatsnew」となっているところを通常のセレクタである「.whatsnew」にします。
そして、変更する部分を書き換えたり足したりしていくのですが、ここで１つコツがあります。こうしてテーマやプラグインの中にCSSが含まれているものは、大抵の場合最終的にプラグインの設定が反映されてしまい、CSSで追記した部分は無視されてしまいます。
それを防ぐための魔法のコードが「!important」です。これは「なんでもいいからこれを優先して！！」というCSS特有のルールで、変更したところにこれを付け足すだけできちんと適用されるようになります。
例えば、外枠の色を変えるなら
「border: 1px silver solid;」となっているところを「border: 1px red solid!important;」
とすれば、きちんと適用されます
このプラグインだけでなく、いろいろなシーンで使えますから覚えておくと便利です。
なお、「!important」が同じ設定に対して複数設定されていると読み込み順で最終的に読んだものが適用されますから、ここぞというときに使うことをお勧めします。
※余談ですが、こうした「投稿」のみしか扱えないプラグインでもコードをよく見ていると上記のような変数の記述があり、同様に変更するとカスタム投稿タイプでも動作するようになりますので、カスタムしたい場合にはやってみてください。
表示する件数を少なくしてスクロールさせる方法
このプラグインは指定した件数の新着情報を１画面（スクロールなし）で表示させるようになっていますので単純に件数を増やせばより過去の新着記事？まで表示させられるのですが、10件の新着記事を表示したいけど5件だけ見えるようにしてあとはスクロールして表示させたい・・・なんてこともページスペースの関係などからあるのではないでしょうか？？
そんな時はテーマのCSSへ以下を追加することで簡単にスクロール表示させることができます
.whatsnew {
height: 100px;
overflow-x: hidden!important;
overflow-y: scroll!important;
}何をしているかを簡単に説明すると
- １行目のheight:で、What’s Newを表示させる高さを指定しています
- ２行目overflow-x:を使ってスクロール表示はさせるけど横方向のスクロールバーは表示しないようにしています
- ３行目overflow-y:を使って縦方向のスクロールを表示させるようにしています
CSSの編集に慣れている方なら簡単でしょうからこんな方法を見なくても調整できるでしょうけど、そうでない方にとってはどうしたら分からない・・ということかと思いますので参考になれば幸いです。
CSSを変更したのに適用されない・・という場合にはブラウザのキャッシュをクリアして確認してみてくださいね。
※ここで紹介するCSSの記述は一例です。テーマや環境によっては上手に表示できなかったりしますので、貴サイトに合わせて調整してください
プラグインの紹介とは全く関係ないことになりますが、CSSはテーマ内での読み込みが後ろになればなるほど、また記述が後ろに行くほど優先して適用されます。
CSSのカスタマイズを行う場合には末尾に追加することと、テーマの読み込み順によって適用されない場合で「もうこれ以上変更はない！」と分かっている場合には、上の例のように各コードの末尾へ「!important」を付けることで何をおいてもこの記述を優先にして！ということで適用されるようになりますからテクニックとして覚えておくといいかと思います。
ポチップ
ポチップ
