記事一覧プラグイン「List category posts」


【2020年3月更新】

特定のカテゴリー、タグ、日付順などの記事を一覧表示するのに「List Category Posts」というプラグインがあると便利です。

※このテーマでもテストはしましたが、利用する場所がなかったので、使っておらず、実際のリストではなく画像での説明になります。

モリモリ盛ったバージョンで説明

List Category Post 仕上がり
List Category Post 仕上がり

デザインのセンスがないのは、許してください。好みでゴリゴリかえられます。(後述)

どんなデータを掃き出すかは、ショートコードで指定します。

ショートコードの使い方

ショートコードは [] に挟まれている簡易コードです。

ウィジェットのショートコードブロックの中にコードの内容を書いて、投稿や固定ページに埋め込むだけで機能します。

Gutenbergエディタ、ショートコードを挿入
ウィジェットのショートコードブロック

ショートコードの内容は下記を[]で囲んだものです。

catlist thumbnail=yes excerpt=yes numberposts=3 orderby=modified order=desc

  • 「thumbnail=yes」でアイキャッチ画像が入ります
  • 「numberpost=3」は1ページに表示するリストの数
  • 投稿日で並べるために「orderby=date」
  • 降順を指定するために「order=desc」

っという内容です。

「name=”monster-hunter-world”」というようにカテゴリーのパーマリンクを指定するとそのカテゴリーだけの記事に絞られます。タグの場合は、「tags=”XXX”」

リストの下にリストの続きのページ番号をつけたい場合は、「pagenation=yes」を加えます。

「orderby=modified」で最終更新日順。「order=asc」で昇順。かなり柔軟に並べ替えられます。

パラメータの参考資料;「Other parameters

デザインの変更:

外観 → カスタマイズ → CSS追記

↓リスト大枠の変更↓

List Category Postの外観設定1
List Category Post、リストエリアのCSS

ul#lcp_instance_0 {
list-style: none;
padding: 1rem;
margin:1.5rem;
border: dashed #393e4f;
background-color: #e5f5df;
}

「line-style: none;」で、リストの最初の点や数字を消しました。

↓URLリンク部分のCSS設定↓

ul#lcp_instance_0 a {
display: block;
margin: 0 1rem 0.5rem 0;
}

URLの行と抜粋の行を改行させたかったので「display: block;」を入れました。

↓サムネイルのCSS設定↓

List Category Post 画像のCSS
List Category Post 画像のCSS

@media ( min-width: 600px ) {
ul#lcp_instance_0 img {
float: left;
margin: 0.5rem 1rem 10rem 0;
max-width: 20%;
}
}

リストの幅に対して20%を最大にすると設定しました。本当はもっと細かくスクリーンサイズごとに設定した方がいいかもしれません。

↓リストエリアのCSS設定↓

List Category Post、リストのCSS
List Category Post、リストのCSS

ul#lcp_instance_0 li {
margin-bottom: 1rem;
margin-left:0;
border: dashed #7c6d71 2px;
background-color: #ffe4e1;
border-radius: 20px;
padding: 1rem 1rem 7rem 1rem;
}

色とかデザインのセンスがちょっとアレですが…

最終的には外枠の色などを削除して内枠だけにしました。

全部合わせると↓

ul#lcp_instance_0 {
list-style: none;
padding: 1rem;
margin:1.5rem 1.5rem 0 0;
}
ul#lcp_instance_0 a {
display: block;
margin: 0 1rem 0.5rem 0;
}
@media ( min-width: 600px ) {
ul#lcp_instance_0 img {
float: left;
margin: 0.5rem 1rem 10rem 0;
max-width: 20%;
}
}
ul#lcp_instance_0 li {
margin-bottom: 1rem;
margin-left:0;
border: dashed #7c6d71 2px;
background-color: #ffe4e1;
border-radius: 20px;
padding: 1rem 1rem 7rem 1rem;
}

サイドバー、フッターに入れる場合

こちらは、ショートコードではなく、「外観→ウィジェット→List Category Post」にて設定します。

ドロップダウンリストから選ぶだけなので簡単です。

List Category Post、サイドバー用ウィジェット

参考資料、「How to select which posts to show

「投稿や固定ページ」と「サイドバーやフッター」の両方に使いたい場合は、片方をクラスで範囲指定して使っていました。

最後に

このプラグインはとても便利なのですが、これが欲しいテーマとそうでないテーマが結構分かれます。

今年は使っていないので、画像でm(__)m

最後までお読みいただきましてありがとうございました。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です