【2020年3月更新】
特定のカテゴリー、タグ、日付順などの記事を一覧表示するのに「List Category Posts」というプラグインがあると便利です。
※このテーマでもテストはしましたが、利用する場所がなかったので、使っておらず、実際のリストではなく画像での説明になります。
モリモリ盛ったバージョンで説明
デザインのセンスがないのは、許してください。好みでゴリゴリかえられます。(後述)
どんなデータを掃き出すかは、ショートコードで指定します。
ショートコードの使い方
ショートコードは [] に挟まれている簡易コードです。
ウィジェットのショートコードブロックの中にコードの内容を書いて、投稿や固定ページに埋め込むだけで機能します。
ショートコードの内容は下記を[]で囲んだものです。
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追記
↓リスト大枠の変更↓
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設定↓
@media ( min-width: 600px ) {
ul#lcp_instance_0 img {
float: left;
margin: 0.5rem 1rem 10rem 0;
max-width: 20%;
}
}
リストの幅に対して20％を最大にすると設定しました。本当はもっと細かくスクリーンサイズごとに設定した方がいいかもしれません。
↓リストエリアの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」にて設定します。
ドロップダウンリストから選ぶだけなので簡単です。
参考資料、「How to select which posts to show」
「投稿や固定ページ」と「サイドバーやフッター」の両方に使いたい場合は、片方をクラスで範囲指定して使っていました。
最後に
このプラグインはとても便利なのですが、これが欲しいテーマとそうでないテーマが結構分かれます。
今年は使っていないので、画像でm(__)m
最後までお読みいただきましてありがとうございました。
