List category postsを使って、カテゴリーやタグの記事一覧を表示出来るようにした話

今回紹介する「List category posts」は、投稿・固定ページの記事またはサイドバーに指定したカテゴリー・タグの記事一覧を表示できるプラグインです。
前回はPHPの編集、プラグインを利用しないでの表示方法のご紹介でしたが、こちらの方がより簡単に設置出来るかと思うので、ご紹介させていただきます。

こちらのプラグインはショートコードでの表示、ウィジェットで表示することが可能です。
難しい設定なども特にありませんので、もし一部のカテゴリーのみお知らせなどに表示させたい場合はご検討して見ではいかがでしょうか？

[WordPress]選択したカテゴリーだけを最新情報として表示させた話。

今回のお話は、「重要などの記事を常に上部に掲載させる方法」と「選択したカテゴリーのみ最新情報として掲載させる方法」をお知らせいたします。

List category posts

List Category Posts allows you to list posts by category and...

インストール
使用方法
1. ウィジェットでの使い方
2. ショートコードを設定
　サンプル
まとめ

インストール

プラグイン >　新規追加　から「List category posts」を検索
今すぐインストールをクリックし、インストール完了後に有効化をクリック

使用方法

ウィジェットでの使い方

ウィジェットを利用して、サイドバーやフッター、その他にも表示させることが可能です。
色々書いてありますが、基本的には表示させたい「カテゴリー」を選択し、投稿数を入力（デフォルトは10件）、サムネイルが必要な場合は表示の「サムネイル – サイズ」を設定すればOKです。

ただ試してみたところ、ウィジェットではタグの表示設定が無いようでした。

ショートコードを設定

「List category posts」はショートコードで表示させることができます。

 [ catlist ] // ショートコード

最新の投稿を 10件表示（デフォルト）	[ catlist ]
記事の表示件数を15件に設定	[ catlist numberposts=15 ]
カテゴリー名（スラッグ）を取得	[ catlist name=Dogs ]
カテゴリーidを取得	[ catlist id=2 ]
タグを取得	[ catlist tags=Dogs ]
ページを一覧表示	[ catlist post_type=page ]
投稿とページの両方で表示	[ catlist post_type=”post,page” ]
並び順 ASC（昇順）	[ catlist name=Dogs orderby=title order=asc ]
並び順 DESC（降順）	[ catlist name=Dogs orderby=date order=desc ]
サムネイルを表示	[ catlist thumbnail=yes ]
投稿の最初の画像をサムネイルとして表示	[ catlist thumbnail=yes force_thumbnail=yes ]
サムネイルのピクセル設定	[ catlist thumbnail=yes thumbnail_size=50,50 ]
サムネイルのサイズ設定（thumbnail, medium, large or full）	[ catlist thumbnail=yes thumbnail_size=medium ]
組み合わせ例（カテゴリー名 Dog　投稿とページの両方で表示　記事件数を15件に設定）	[ catlist name=Dogs post_type=”post,page” numberposts=15 ]
現在表示あれているカテゴリーの記事を自動表示	[ catlist categorypage=yes ]
現在表示されている同じタグに属している記事を自動で表示	[ catlist currenttags=yes ]
各投稿の抜粋を表示	[ catlist excerpt=yes ]
各投稿の横に日付、作成者、コメント数を表示	[ catlist date=yes author=yes comments=yes ]
多くの要素に対して html タグとクラスを指定	[ catlist date=yes date_tag=span date_class=”my-date” author=yes author_tag=p author_class=”my-author” comments=yes ]
投稿を日付順に並べ替え	[ catlist orderby=date ]
ページネーションを設定	[ catlist pagination=yes numberposts=5 ]

一覧リストが表示されないように [○catlist○] ○半角スペースが入力されております。
コピー・ペーストで利用する場合は「半角スペース」を取ってからご利用ください。

　サンプル

ウィジェットとショートコードそれぞれを試して見ました。
比較検討するために設定内容は両方とも同じものとなっております。

カテゴリー	WordPress
投稿数	5
順序	日付
順序	降順
サムネイル	あり　サイズ – thumbnail
日付

どちらも同じ様に表示されてますね。

ただ、レイアウトに関しては・・・と言った感でしょうか？
これは整えなくてはいけませんね。
該当箇所のCSSを地道に調整していくのが、理想に近づく第一歩でしょう。

.lcp_catlist {
	margin-left: 0;
	padding-left: 0;
}

.lcp_catlist li{
	display: grid;
	position: relative;
	list-style: none;
	margin-bottom: 20px;
}

.lcp_catlist li a:first-child {
	width: 60%;
}

.lcp_catlist li a:last-child {
	width: 30%;
	position: absolute;
	display: inline-block;
	right: 0;
}

ザックリとですが、こんな感じのCSSでしょうか？
テキスト関連を左に寄せ、サムネイルを右へ寄せてみました。

リンクの色やアンダーライン、公開日などのテキストサイズの変更がまだですが、とりあえずはこれでOKでしょう。

もちろん皆さんは、ご自身のサイトのデザインに合わせて調整してくださいね！