固定ページに新着記事一覧：List Category Posts

このサイトでは使っていないのですが、サブドメインサイトで利用している、「List Category Posts」の使い方の覚書。

１．プラグイン【List Category Posts】をインストール

List Category Posts allows you to list posts by category in a post or page using the catlist shortcode. When you're editing a page or post, directly insert the shortcode in your text and the posts will be listed there.

２．一覧を入れたい場所に[catalist]で挿入

設定→List Category Postsで設定。

Nubmer of Psts：何個まで表示させるか
Pagination：true → 続きを番号表示してくれる
Order by：並び順。Dateで。
Order：並び順。Descendingで新着順に。

ショートコードの追加でバリエーション色々。

・日付入り

[catlist data='yes']

・サムネイル入り

[catlist thumbnail='yes']

・サムネイルの大きさ調節

[catlist thumbnail='yes' catlist thumbnail_size=80,80]

※入れたいコードを、間にスペースを入れてつないでいく。 ※画像を左に移動させたかったので、CSSを編集。

/*カテゴリー・タグ別記事一覧CSS　画像を左に*/
.lcp_catlist li:after{/*クリアボス*/
content: "";
display: block;
clear: both;
}
.lcp_catlist li{
list-style-type: none;/*リストのアイコン消す*/
margin-bottom: 10px;/*リスト間マージン*/
}
.lcp_catlist li a{margin-left: 10px;}
.lcp_catlist img{float: left;}/*写真を左に*/

３．一覧を枠で囲む

今回は、下記に。

<table style="width: 100%; border-collapse: collapse; border-style: solid; border-color: #ff9900; background-color: #ffffff;">
<tbody>
<tr>
<td style="width: 100%; padding-left: 20px;">
<h3 style="padding-top: 20px">新着記事</h3>
<p style="padding-left: 20px;">[catlist data='yes' catlist thumbnail='yes' catlist thumbnail_size=80,80]</p>
</td>
</tr>
</tbody>
</table>

まだまだ色々できそう♪♪