MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


What’s new!! phpを書かなくても新着情報を表示できる3つのプラグインを比較してみました!

コーポレートサイトを作る時には、やっぱり新着情報を表示したいという要望が多いですよね。

whatsnew00

「カスタムフィールドの値を表示したい」なんて特殊な要望の場合はphpで書いた方が早いですが、
・記事タイトル
・日時
・抜粋文
・サムネイル画像
といった基本的な表示なら、プラグインのショートコード(+CSSの編集)で完結できることも多いです。

今回はそんな機能をもったプラグインを3つ紹介したいと思います。

追記201809
サムネイルを含めたグリッドデザインが導入しやすく、設定が豊富で拡張性の高い新着情報表示プラグインを見つけたのでこちらでご紹介しています。
WordPressの新着情報(記事一覧)表示プラグイン「Post Grid」はグリッド幅の調整やMasonry、表示項目やスタイルのカスタマイズも可能!検索機能やページングもあり!

3つのプラグイン

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

ショートコード

※パラメーター追加可能。

メリット
出力されるHTMLにクラスが指定されていてCSSでカスタムしやすい。
パラメーターを見る限り、カスタム投稿にも対応している模様(今回は未検証)
デメリット
ウィジェットはなし。

List category posts

ショートコード
[catlist]

※パラメーター追加可能。

メリット
本文・抜粋の表示が可能。
ウィジェットにも表示可能。
パラメーターを見る限り、カスタム投稿にも対応している模様(今回は未検証)
特定の記事・カテゴリ・タグの除外(exclude)が可能
デメリット
出力されるHTMLにクラスが無く、要件によってはプラグインを編集する必要あり。
抜粋は可能だが、抜粋の文字制限(excerpt_size)が上手く働かない??マルチバイトの関係?

表示例

What’s New Generator

こちらは管理画面があって大変使い易く、「NEW!」が表示できるのが魅力ですね。
公開後X日間「NEW!」を表示させる~~という風に設定が可能です。

whatsnew01

表示のデザインも、カスタマイズする必要が無いくらい洗練されています。

whatsnew02png

Display Posts Shortcode

ショートコードはこんな感じにしてみました。



category="news"・・・スラッグを指定
posts_per_page="5"・・・表示件数
include_date="true"・・・日付の出力
date_format="Y年n月j日"・・・日付のフォーマット
order="ASC"・・・降順・昇順の指定
orderby="date"・・・何で並びかえるか
include_excerpt="true"・・・抜粋の有無に関わらず、本文+続きを読む

whatsnew03

このプラグインの素敵なところは、日付やタイトル、抜粋にクラスが指定されていることです。

<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を各クラスに追加してあげるだけで、こんな感じに整形できます。

whatsnew04

結構、ムチャな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・・・これが上手く動きませんでした。

whatsnew05

表示形式はdisplay posts shortcodeとそんなに変わらないように見えますが、ソースはこの通り。

<ul class="lcp_catlist" id="lcp_instance_0">
  <li>
    <a href="http://" title="成功事例2">成功事例2</a>
    2014年7月18日
    投稿の「抜粋」に入力していればそれが表示
    (ただ、上記の通り文字制限が効かない??)
  </li>
  <li>
    <a href="http://" title="成功事例1">成功事例1</a>
    2014年6月19日 
    抜粋に入力がない場合は記事本文”全てが”表示されます。
  </li>
</ul>

クラスが指定されていないのでカスタマイズはプラグイン編集をしないといけないという・・・
せめて日付だけでもクラスがあれば何とかなったかも知れませんがね!

一応ウィジェットもあり、細かく設定もできるのですが、
whatsnew06
やっぱりクラスが無いせいで拡張性は良くないです。

タイトルだけの一覧を表示するなら便利!CSSのカスタムもやり易いです↓例
whatsnew07

まとめ

・新着のタイトルと日付だけ表示したい場合
 NEW!の表示もしてくれる「What’s New Generator」一択と言っても良いでしょうね。

・日付とタイトルと本文・または日付と本文を表示したい
 デフォルトでプラグインが使えて、デザインもある程度整形しやすい「Display Posts Shortcode」に軍配でしょうか。未検証ですが、カスタム投稿にも対応しているようなのでそれも便利ですね。

 ウィジェットを使いたいなら「List category posts」もまずまずです。
 ウィジェットにはあんまり本文表示させないですもんね。

他に、「List category posts」の優位性というと・・・うーん、特定の記事・タグ・カテゴリの除外ができるようなので、それはメリットといっても良いかもしれませんね。

以上!
プラグイン+ショートコードで楽しようとして、結局プラグインのカスタマイズに苦労した記憶もあるので、色々と比較してみました!ご参考までに!

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。