Newpost Catchを使って記事一覧を表示する順番を変えたり記事の概要を表示するためのTips

サイドバーやエントリーの最後なんかに同一カテゴリの記事をサムネイル付きで表示したいと思ったことはないだろうか？
それなら簡単にNewpost Catchというプラグインを使えばすぐに解決だ！

実際に新着記事の一覧などをサムネイルつきで表示したければPHPの知識が多少あれば実現は可能なんだけど、Newpost Catchを使えば手軽にできるので結構オススメ！

コレが結構スグレモノで、表示した居場所に簡単に特定カテゴリの記事一覧でも、今現在表示している記事と同じカテゴリの記事一覧でも簡単にサムネイルつきでお洒落に表示で来ちゃうのよ。

　　　　　　　＿＿＿
　　　　　／ ⌒　　⌒＼　　 _＿
　　　　／　（⌒）　（⌒）＼〈〈〈ヽ　　オサレだおｗｗ
　　　／　 ///（__人__）/// 〈⊃　 }
　　　 |　　 u. 　 `Y⌒y’´ 　　 |　　 |
　　　　＼　　　ﾞー ′　　 ,/　　 /
　　　　　/⌒ヽ　　ー‐ 　　ｨ　　 /
　　　　 / rｰ’ゝ　　　　　　　　　　 /
　　　　/,ﾉヾ　,>　　　　　　　　／
　　　 |　ヽ〆　　　　　　　　　|

・・・ただね、私がやりたいのはそんなことじゃなかったので、少し備忘録の代わりに悩んだことを書き記していきます。

私がやりたかったこと！

私がやりたかったのは、個別ページに特定カテゴリの記事一覧をサムネイルつきで表示するということ。

ただし、表示順は「新着順」ではなく「古い順」なの。

あと、サムネイルとエントリータイトルに加えて、記事の概要(Description)をそれぞれ表示したい・・・ただそれだけなんだ。

ただそれだけなのに苦労したのよ。

　　　　　／￣￣￣＼
　　　　　／　　 :::::＼:::／＼　うまくいかないお・・・
　　　／　　　｡<一>:::::<ー>。
　　　 |　　　　.:::｡ﾟ~（__人__）~ﾟj
　　　＼、　　　゜i⌒i.⌒´,;／゜
　　　　／　 ⌒ヽ.ﾉ　ﾉ'”´(;ﾟ　｡
　　　/　,＿＼　l||l 从＼＼
　　と_＿＿）_ヽ＿つ_;_ヾ_つ.;.
　　　　　　　　　ﾍﾞｼﾍﾞｼﾍﾞｼ

私が何をしたいのかっつうと、固定ページに特定カテゴリの記事一覧を表示するようにしたいワケだけど、今私が作っているコンテンツはいわゆるHow Toものなので、古い記事から順番に読み進めて欲しいのよね。

一般的なブログコンテンツであれば新しいきじを真っ先に見て欲しいんだろうけど、何しろHow Toものだからまずはじめに「Step1」の記事を読んで、次に「Step2」を読んで・・・ってな具合にしたいので、どうしても古いエントリーから順番に表示したかったのよ。

Newpost Catchを使えば簡単に出来ると思ってたのに結構苦労したので、誰の役に立つかはわからないけど、解決策を順を追って書き記していきますね。

　　　　　　　　／￣￣￣＼
　　　　　　　／　　_ノ　ヽ_ ＼
　　　　　／　　（＞）　（＜）＼
　　　　　|　　::::::⌒（__人__）⌒:::::l
　　　　　＼　　　　|r┬-/ 　　／
.　　　ｸﾞｯ /⌒/＾ヽ､`ー’´　,ィヽ、
　　　　 /　 ,ゞ　,ノ　　　　　, 　＼
　　　　　l ／　 /　　　　　　　ト　　 >
　　　　ヾ＿,/ 　　　　　 |／／
　　　　　　 |　　　　　　　　　 |／

それでは、ここから本題！

インストール～プラグイン使用開始！

・・・とはいうものの、インストール自体は簡単なので説明は要らないですよね？

【WordPress › Newpost Catch « WordPress Plugins】でプラグインをダウンロードしてFTPでアップロードするのもいいし、プラグインの管理ページから【Newpost Catch】で検索して直接インストールしてもOKです。

インストール後の有効化だけ忘れなければいいです。

細かいことは開発者さんのサイトを見るのが手っ取り早いです。

Newpost Catch｜今村だけがよくわかるブログ

　　　　　　　　　　　　　 ∩＿
　　　　　　　　　　　　　　〈〈〈　ヽ
　　　　　　＿＿＿_　　　〈⊃　　}　　日本語サイトだおｗ
　　　　／⌒　　⌒＼　　 |　　 |
　　　／（ ●）　（●）＼　 !　　 !
　／ :::::⌒（__人__）⌒:::::＼|　　 l
　 |　　　　　|r┬-| 　　　 | 　／
　＼　　　｀ー’´ 　　／／
　　/　＿＿　　　　　　　/
　　(＿＿＿）　　　　　　/

使い始めるには、ウィジェットに表示したければWordpressのダッシュボードから外観⇒ウィジェットを選択すれば簡単に追加できるし、記事やページの任意の箇所に表示したければ好きな場所に下記のショートコードを埋め込めばいいってことよ。

［npc］
(カッコは実際には半角)

簡単だね！

昇順で記事を並べる方法

マズこれでいきなりつまづいた・・・

前項での開発者さんのページでは降順で表示する方法は書いてある。

　　　　　　　　　＿＿＿
　　　　　　　／＼　／＼
　　　　　　／（●）　（●.）＼　　降順？
　　　　／　　（__人__）　　＼
　　　　 |　　　　 |::::::|　　ノ（　　|
　　　　＼　　　 l;;;;;;l　　 ⌒ ,／
　　　　／ヽ　　`ｰ´ 　ｨ⌒ヽ
　　　 rｰ’ゝ　　　　　　　〆ヽ .)
　　　　ﾉヾ　,>　　　　　　ヾ_ノ,ヽ}
　　　　ヽヽ|　　　　　　　　ヽ_ノ

ってか、デフォルトで降順になっているからショートコードに追記する必要もない。

order(string) – orderbyで並べた記事を昇順か降順で表示(default:DESC)

ふむぅ・・・なるほど、デフォルトは降順になっていてショートコードに追記するならDESCなのな。

あれ？

じゃ、昇順は？

　　　　　　ﾉＬ＿＿＿_
　　　　　　　⌒　＼　／＼
　　　　　　／　（○）　（○）＼　　　昇順がわからないお！！
　　　　／　　　（__人__）　　＼
　　　 |　　　　　|::::::|　　　　　|
　　　　＼　　　 l;;;;;;l　　　／l!| !
　　　　／　　　　　`ｰ’　　　＼ |i 　　　＿　　　　　　 _
　　　／　　　　　　　　　　ヽ !l　ヽi　　　|　l [l] |￣| /l 　　 | |
　　（　　丶- 、　　　　　　しＥ　|そ　 |　二l　￣/ [][]∧.|_|
　　　　`ー､＿ﾉ　　　　 ∑　l､Ｅﾉ　<　|__|　　|￣／　<_/ <>
　　　　　　　　　　　　　　　ﾚY^Ｖ^ヽｌ　　　

調べれば簡単なことだったんだけど、昇順ならASCになるのよ。

SQLとかやってる人なら当たり前のことなのかも知れないけど、情弱の私としては書いといてもらわないと分らないよ・・・
(降順のDESCは「Descending」で、昇順のASCは「Ascending」な)

ちな、ショートコードで昇順を指示するなら下記のようになるよ。

［npc order=”ASC”］

ついでに例えばカテゴリIDが「5」の記事の一覧を昇順で表示したければこんな感じね

［npc cat=”5″ order=”ASC”］

コレでとりあえず任意のカテゴリの記事を古い記事から順番に表示できるようになった！

　　　／￣￣　＼　　　やっと・・・
　／　 _ノ　ヽ､_ 　＼　　やっとできたお・・・
／　oﾟ|⌒|　　|⌒|ﾟo　＼
|　　　| （__人__）. |　　　 |
＼　　|　｀|⌒|´　|　　／
／￣ |川!|￣|川i|￣＼

もしかして分らなかったの私だけ？

記事の概要を表示する

次は記事の概要だ！

目次ページを作る目的としては、サムネイルが表示されていて、記事のタイトルが表示されていればOKなんだけど、サイドバーに一覧を表示するならともかく個別ページに表示させるとサムネイルとエントリータイトルだけじゃ寂しすぎる・・・

こんな感じな↓
サムネイルとタイトルのみ

コレを解決するためにプラグインを少しイジってみた。

　　　　　　　＿＿＿_
　　　　　　／　　　　　＼
.　　　　　／　_ノ　　　ヽ､_＼　ちょっとだけ・・・
　　　　／　　（● ）　(● ）　＼
　　　　|　//////（__人__)///　|
　　　　＼　　　　　　　　　／
　　　　／　　　　　　　　　　＼
　　　　| 　　　　　,― 、,―、　　|
　　　　＼　￣￣　(⌒⌒)　￣ /
　　　　　　　￣￣＼＼／／

まず、Newpost Catchをインストールすると/wp-content/plugins/のディレクトリの中にnewpost-catchってフォルダがあって、その中にclass.phpってファイルがあるのでテキストエディタとかで開いてみる。

320行目前後に$html .= "</a></span></li>\n";という部分があるので</a>と</span>の間に<br />” . esc_attr( get_the_excerpt()) . “って追記してみたよ。

コレでサムネイル+エントリータイトル+記事概要が表示されるようになった。

　　＿ _　　＿＿＿
　/　) ) )／＼　　／＼
　{　　⊂)（●）　（●）＼　で・き・た！！
　|　　 / ///（__人__）/// ＼
　!　　 !　　　`Y⌒y’´　　　 |
　|　　 l 　　　ﾞー ′　　,／
　|　　　ヽ　　　ー‐ 　　ｨ
　|　　　　　　　　　　/　 |
　|　　　　　　　　　〆ヽ/
　|　　　　　　　　ヾ_ノ

私はclass.phpをダウンロードしてテキストエディタで編集したけど、Wordpressのダッシュボードからプラグイン⇒プラグインの編集へ進み、Newpost Catchを選択してclass.phpを編集しても同じことです。

この状態での出来上がりはこんな感じだ↓
概要を追記できた

後もう少しだね！！

少しCSSも追記

別にこのままでもかまわないんだけど、画像に対してエントリータイトルが下寄せになっているのが少し気に入らないので、style.cssに下記を追加してみた。

#npcatch img{
vertical-align: middle;
	float:left;
	padding:5px 10px;
}

コレでとりあえず私がやりたいことは出来上がりだ。

　　　　　　　　　　　　　　　　　　　　　　　　　　　関・係・ないから　　　　　γ⌒)）⌒)　))　　関係ないから
　　　i^,＼　＿,,＿／＾ｌ　　　　　　　　　　　　　　ヾ　　＿＿（（（⌒ヽ　　　 /　⊃＿＿　ゞ
　　　ｌノ　　＼ i|l ／ヾﾉ　　　　　　　　　　　　　　　　／⌒　　⌒⊂_　ヽ彡/　/ ⌒　　⌒＼　　
　　ｼ “　（ ●）　（● ）ﾐ　　　　　　（⌒ミ（⌒ヽ∩／（ ⌒）　（⌒） |(⌒γ⌒)（ ⌒）　（⌒）＼ ∩⌒)彡⌒)　
　ﾒ　＝ ⌒（__人__）⌒=ヽ　　　　　　　　ヽ　ﾉ| :::⌒（__人__）⌒ ::| 　彡_ノ :::⌒（__人__）⌒ 〃/　ノ
　彡　　　　　　　　　　　;ミ　　　　　　　　　　＼＼　　）┬-| 　　/　ミ　　ﾐ　　　|r┬（　　　 /　/　））
　　　ヾ　　　　　　　　ﾝ　　　　((（⌒　((（⌒ )､ヽ＿　`ー‐’　,／／　≡　彡＿`ー‐’ 　／（ ⌒）ﾐ⌒）
　　　/　　　　　””　　|　　　　　　　　　　　＼＼ / 　　　　　　　　　　　　　　　　　　　　 /　/
　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　＿＿＿（⌒ヽ
　　　　 γ⌒)　)）＿,,＿／＾ｌ　　　　　　　キャ・キャ・キャラット！　　　　　　／⌒　　⌒⊂_　ヽ
　　　 /　⊃　　⌒　　⌒ヾﾉ　　∩⌒)　キャッキャッキャラット！（⌒ヽ∩／（ ⌒）　（⌒） |(⌒ヽ
　〃/　/ ｼ “（ ●）　（● ）ﾐ〃/　ノ　　　　　　　　　　　　　　　　　ヽ　ﾉ| :::⌒（__人__）⌒ ::| ⊂ `､
　　γ⌒)　＝ ⌒（__人__）⌒=ヽ/　/　））　　　　　　　　　　　　　　　　＼＼　　）┬-| 　　/　/>　）　））
　.／ _ノ彡　　　　　　　　　　;ミ（ ⌒）　　　　　　　　　　　　　　　　(( （⌒ )､ヽ＿ `ー‐’　,／／　／　
　（　 <　ヾ　　　　　　　　　　ﾝ/　/　　　　　　　　　　　　　　　　　　　＼＼ / 　　　　　　　　　　　　( ＼　ヽ　　　　　　　　""　　　　　　　　　　　　　　　　　　　　　　　　ヽ＿ノ　　　　　　　（　　

ここまでできたら、自分がカテゴリー記事一覧を表示したい箇所に下のショートコードを書いてみる。