コーポレートサイトを作る時には、やっぱり新着情報を表示したいという要望が多いですよね。
「カスタムフィールドの値を表示したい」なんて特殊な要望の場合はphpで書いた方が早いですが、
・記事タイトル
・日時
・抜粋文
・サムネイル画像
といった基本的な表示なら、プラグインのショートコード（+CSSの編集）で完結できることも多いです。
今回はそんな機能をもったプラグインを３つ紹介したいと思います。
追記201809
サムネイルを含めたグリッドデザインが導入しやすく、設定が豊富で拡張性の高い新着情報表示プラグインを見つけたのでこちらでご紹介しています。
WordPressの新着情報（記事一覧）表示プラグイン「Post Grid」はグリッド幅の調整やMasonry、表示項目やスタイルのカスタマイズも可能！検索機能やページングもあり！
目次
３つのプラグイン
- 1.プラグイン名
- What’s New Generator
- サイトリンク
- [browser-shot width=”600″ url=”https://wordpress.org/plugins/whats-new-genarator/”]
- 使い方
- http://residentbird.main.jp/bizplugin/plugins/whats-new-generator/
- 2.プラグイン名
- Display Posts Shortcode
- サイトリンク
- [browser-shot width=”600″ url=”http://wordpress.org/plugins/display-posts-shortcode/”]
- 使い方
- https://github.com/billerickson/display-posts-shortcode/wiki
- 3.プラグイン名
- List category posts
- サイトリンク
- [browser-shot width=”600″ url=”http://wordpress.org/plugins/list-category-posts/”]
- 使い方
- http://wordpress.org/plugins/list-category-posts/other_notes/
それぞれの特徴
What’s New Generator
- ショートコード
[showwhatsnew]
※パラメーター追加なし。
- メリット
- 国産。管理画面あり。
公開からの日数指定で「NEW!」と表示してくれる。 - デメリット
- 記事本文の抜粋は表示できない。
管理画面はあるが、逆に管理画面に無い項目は表示できない。
Display Posts Shortcode
- ショートコード
- WordPressサイト・ブログなどインストール代行を無料で行います。HP集客サポートも条件付きで無料！
- WordPress・HP運営に関する質問・疑問に無料でお答えします。
- 美容系のTCDテーマ
- TCDテーマ 056 KADAN
- 【あや様】現在運用中のワードプレスに知恵袋機能を追加したい
- 【yama様】写真のキャプションの文字の並びについて
- 【halu様】カテゴリーをノーインデックスにしたら検索されなくなりますか
- 【まいまい様】WordPressインストール時のエラーについて
- 【nokoto様】画像の下の枠線について
- 【熱冷めSE 様】ワードプレス テーマ nishikiについて
- 【5296kouiti 様】テーマを変えたら画像が表示されなくなりました
- 【UT 様】カスタム投稿で[変更プレビュー]の表示画面が別ページを表示してしまう
※パラメーター追加可能。
- メリット
- 出力されるHTMLにクラスが指定されていてCSSでカスタムしやすい。
パラメーターを見る限り、カスタム投稿にも対応している模様（今回は未検証） - デメリット
- ウィジェットはなし。
List category posts
- ショートコード
[catlist]
※パラメーター追加可能。
- メリット
- 本文・抜粋の表示が可能。
ウィジェットにも表示可能。
パラメーターを見る限り、カスタム投稿にも対応している模様（今回は未検証）
特定の記事・カテゴリ・タグの除外(exclude)が可能 - デメリット
- 出力されるHTMLにクラスが無く、要件によってはプラグインを編集する必要あり。
抜粋は可能だが、抜粋の文字制限(excerpt_size)が上手く働かない？？マルチバイトの関係？
表示例
What’s New Generator
こちらは管理画面があって大変使い易く、「NEW!」が表示できるのが魅力ですね。
公開後X日間「NEW!」を表示させる～～という風に設定が可能です。
表示のデザインも、カスタマイズする必要が無いくらい洗練されています。
Display Posts Shortcode
ショートコードはこんな感じにしてみました。
- 美容系のTCDテーマ
- コード1つでAIにお任せ。Google アドセンスの『自動広告』が使えるようになったので試してみました。
- WordPressサイト・ブログなどインストール代行を無料で行います。HP集客サポートも条件付きで無料！
このプラグインの素敵なところは、日付やタイトル、抜粋にクラスが指定されていることです。
<ul class="display-posts-listing">
<li class="listing-item">
<a class="title" href="http://">タイトル</a>
<span class="date">2014年6月19日</span>
<span class="excerpt-dash">-</span>
<span class="excerpt">記事本文
<a href="http://">Continue reading <span class="meta-nav">→</span></a></span>
</li>
</ul>
そのため、CSSを各クラスに追加してあげるだけで、こんな感じに整形できます。
結構、ムチャなCSSを使いますが、一応こんな感じで可能です（笑）
/* 全体はoverflowでスクロール表示 余白の調整 */
#content ul.display-posts-listing {
overflow: auto;
height: 240px;
padding: 20px;
border: 1px solid #ccc;
}
/* listスタイルの消去 */
#content ul.display-posts-listing li.listing-item {
margin-bottom: 20px;
list-style-type: none;
clear: both;
}
/* タイトルの表示位置調整 */
#content ul.display-posts-listing li a.title {
float: right;
width: 75%;
}
/* ダッシュは非表示に */
#content ul.display-posts-listing span.excerpt-dash {
display: none;
}
/* 抜粋部分でクリア */
#content ul.display-posts-listing span.excerpt {
clear: both;
display: block;
}
/* 続きを読むをフロート＆ブロック化 */
#content ul.display-posts-listing .excerpt a {
display: block;
text-align: right;
}
/* 矢印は非表示 */
#content ul.display-posts-listing span.meta-nav {
display: none;
}
※開発者ツールでちょちょいとやっただけなので、あくまで参考です。
List category posts
ショートコードはこんな感じにしてみました。
[catlist date=yes id=1,4 numberposts=5 excerpt=yes excerpt_size=10] date=yes・・・日付を表示する id=1,4・・・カテゴリのIDで指定 numberposts=5・・・表示件数 excerpt=yes・・・抜粋を使用するか excerpt_size=10・・・これが上手く動きませんでした。
表示形式はdisplay posts shortcodeとそんなに変わらないように見えますが、ソースはこの通り。
<ul class="lcp_catlist" id="lcp_instance_0">
<li>
<a href="http://" title="成功事例２">成功事例２</a>
2014年7月18日
投稿の「抜粋」に入力していればそれが表示
（ただ、上記の通り文字制限が効かない？？）
</li>
<li>
<a href="http://" title="成功事例１">成功事例１</a>
2014年6月19日
抜粋に入力がない場合は記事本文”全てが”表示されます。
</li>
</ul>
クラスが指定されていないのでカスタマイズはプラグイン編集をしないといけないという・・・
せめて日付だけでもクラスがあれば何とかなったかも知れませんがね！
一応ウィジェットもあり、細かく設定もできるのですが、
やっぱりクラスが無いせいで拡張性は良くないです。
タイトルだけの一覧を表示するなら便利！CSSのカスタムもやり易いです↓例
まとめ
・新着のタイトルと日付だけ表示したい場合
NEW!の表示もしてくれる「What’s New Generator」一択と言っても良いでしょうね。
・日付とタイトルと本文・または日付と本文を表示したい
デフォルトでプラグインが使えて、デザインもある程度整形しやすい「Display Posts Shortcode」に軍配でしょうか。未検証ですが、カスタム投稿にも対応しているようなのでそれも便利ですね。
ウィジェットを使いたいなら「List category posts」もまずまずです。
ウィジェットにはあんまり本文表示させないですもんね。
他に、「List category posts」の優位性というと・・・うーん、特定の記事・タグ・カテゴリの除外ができるようなので、それはメリットといっても良いかもしれませんね。
以上！
プラグイン＋ショートコードで楽しようとして、結局プラグインのカスタマイズに苦労した記憶もあるので、色々と比較してみました！ご参考までに！