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

Newpost-Catch

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

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

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


            ___
          / ⌒  ⌒\   __
        / (⌒)  (⌒) \〈〈〈 ヽ  オサレだおww
      /   ///(__人__)/// 〈⊃  }
      |   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|今村だけがよくわかるブログ


               ∩_
              〈〈〈 ヽ
      ____   〈⊃  }  日本語サイトだおw
     /⌒  ⌒\   |   |
   /( ●)  (●)\  !   !
  / :::::⌒(__人__)⌒:::::\|   l
  |     |r┬-|       |  /
  \     ` ー’´     //
  / __        /
  (___)      /

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

[npc]
(カッコは実際には半角)

簡単だね!

昇順で記事を並べる方法

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

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


          ___
        /\  / \
      /(●) (●.) \   降順?
     /   (__人__)     \
     |      |::::::|  ノ(  |
     \     l;;;;;;l   ⌒ ,/
      /ヽ   `ー´   ィ⌒ヽ
      rー’ゝ       〆ヽ .)
    ノヾ ,>      ヾ_ノ,ヽ}
    ヽ ヽ|        ヽ_ノ

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

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

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

あれ?

じゃ、昇順は?


        ノ L____
       ⌒ \ / \
      / (○) (○)\   昇順がわからないお!!
     /    (__人__)   \
      |       |::::::|     |
     \       l;;;;;;l    /l!| !
     /     `ー’    \ |i    _             _
   /          ヽ !l ヽi   | l [l] | ̄| /l    | |
   (   丶- 、       しE |そ  | 二l  ̄/ [][]∧.|_|
    `ー、_ノ      ∑ l、E ノ < |__|  | ̄/ <_/ <>
               レY^V^ヽl   

調べれば簡単なことだったんだけど、昇順なら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^,\ _,,_ /^l               ヾ  __(((⌒ヽ    / ⊃__ ゞ
    lノ  \ i|l /ヾノ                 /⌒  ⌒⊂_ ヽ彡/ / ⌒  ⌒\  
   シ “ ( ●)  (● )ミ      (⌒ミ(⌒ヽ∩/( ⌒)  (⌒) |(⌒γ⌒)( ⌒)  (⌒) \ ∩⌒)彡⌒) 
  メ  = ⌒(__人__)⌒=ヽ          ヽ  ノ| :::⌒(__人__)⌒ ::|  彡_ノ :::⌒(__人__)⌒ 〃/ ノ
 彡           ;ミ           \ \    )┬-|   / ミ  ミ   |r┬(    / / ))
   ヾ         ン     (((⌒ (((⌒ )、 ヽ_  `ー‐’ ,/ / ≡ 彡 _`ー‐’  /( ⌒)ミ⌒)
   /     ””  |            \ \ /                       / /
 
                                             ___(⌒ヽ
     γ⌒) ))_,,_ /^l       キャ・キャ・キャラット!       /⌒  ⌒⊂_ ヽ
    / ⊃  ⌒  ⌒ヾノ  ∩⌒) キャッキャッキャラット! (⌒ヽ∩/( ⌒)  (⌒) |(⌒ヽ
 〃/ / シ “( ●)  (● )ミ〃/ ノ                 ヽ  ノ| :::⌒(__人__)⌒ ::| ⊂ `、
  γ⌒) = ⌒(__人__)⌒=ヽ/ / ))                 \ \    )┬-|   / /> ) ))
 ./ _ノ 彡          ;ミ( ⌒)                (( (⌒ )、 ヽ_ `ー‐’ ,/ / / 
 (  < ヾ           ン/ /                   \ \ /              ( \ ヽ          ""                         ヽ_ ノ       (  

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

[npc cat="8" order="ASC"]

この例ではカテゴリID=8の記事を昇順で概要つきで表示できるはず。

実際に貼り付けてみると下のようになる。

完成

ふぅ・・・、これで一安心。

さいごに・・・

WordPressのカスタマイズが得意な人にはNewpost Catchなんてプラグインは必要ないのかもしれないけど、何しろ面倒なカスタマイズをプラグインのインストールだけで実現できるのは魅力!

こんな感じの「痒い所に手が届く」ってプラグインが豊富なところもWordpressの魅力だったりしますよね。

まぁ、今日のエントリーが私以外の誰の役に立つかは分らないけど、サムネイル+エントリータイトル+記事概要を表示したいのに・・・と悩んでる方がいらっしゃれば是非!


           ____
         /⌒  ⌒\
       /( ―)  (―)\  ふ~ん・・・
      /::::::⌒(__人__)⌒::::: \
      |              |
__( ⌒-ィ⌒ヽ、   /⌒` ‘⌒ )__
     `ー-ゝィソノー‐ヾy_ノー”

・・・いないか?



いいよね?

最後まで私の拙いエントリーを読んでいただいてありがとうございます!
もしもこの記事が少しでもあなたのお役に立てたなら、ぜひ「いいね!」していってください。
また何か新しい発見をお届けできるかもしれません。

何か見つかるかもね

関連記事

コメント

※コメントは承認制ですので、表示されるまで時間がかかる場合があります。
    • 匿名
    • 2015年 5月 26日


    はじめまして、私は日付とタイトルの順を変えられずつまずいていたのですが
    こちらの記事に救われました!
    いつの記事か分からないですが、これからも頑張ってください。

    • まったり
      • まったり
      • 2015年 6月 02日


      匿名さん、コメントありがとうございます!

      確かに古い記事なのですが、何かお役に立てたなら光栄です!!

    • 匿名
    • 2015年 12月 08日


    今まで気にしていませんでしたが、記事の概要が入るだけで、とても充実したサイト(っぽく)見えてきました。
    とても有益な情報です。ありがとうございました。

    • WP初心者
    • 2017年 2月 24日


    記事概要表示はとても参考になり魅力です。しかし、旨くいかなく真っ白になりました。現状復帰しましたが、コードの正確な情報表示して頂くと嬉しいです(コピペしたい)「”」「’」「スペース」が微妙なのかな?それと、記事概要はスマフォなどで表示しない様な書き込みも見かけましたがいかがでしょうか?すみません〜

*

オススメ鯖


高速かつ高機能で、しかも安定性抜群!!
私も利用させていただいてますわ

My Tumblr

    http://deltablog01.tumblr.com/post/77273138691http://deltablog01.tumblr.com/post/76325997079http://deltablog01.tumblr.com/post/75899137417http://deltablog01.tumblr.com/post/75253777050

BlogParts

あわせて読みたい

Share Me! Please!!!

このエントリーをはてなブックマークに追加
ページ上部へ戻る