カテゴリー毎の記事一覧を表示するList category postsの、基本的な使い方と活用法

私がよく使っているList category postsというWordpressプラグインの基本的な使い方と、便利な活用法を紹介します。

スポンサーリンク

List category postsとは

List category postsは、カテゴリーやタグなど、特定の条件で抽出した記事一覧を、記事内やウィジェットエリアにショートコードを使って表示することができるプラグインです。

プラグインの導入と設定

プラグインの導入

Wordpress管理画面左側のメニューから[プラグイン]→[新規追加]をクリックし、List category postsを検索してインストール、有効化をして下さい。

プラグインの導入方法が分からない場合は、他のプラグイン紹介記事を参考にして下さい。
記事の目次を表示するTable of Contents Plusの使い方と設定方法

設定

Wordpress管理画面左側の[設定]ー[List category posts]をクリックすると、List category postsの設定画面に遷移します。

Number of Posts

表示する記事数を設定します。「-1」にすると上限なし、0以上だと指定した数の記事が表示されます。

Pagination

ページネーションを表示するかどうかを設定します。
例えば、Number of Postsを2に設定して、Paginationをtrueにすると、2記事毎にページが作成されます。

Order by、Order

並べ替え設定です。
並び替えの条件と昇順降順を設定します。

基本的な使い方

List category postsの基本的な使い方は、投稿記事、固定ページ、ウィジェットなどの任意の位置に、[ catlist ]というショートコードを入力するだけです。

このショートコードにオプション項目を追記することで、カテゴリーやタグのIDを指定したり、並び順を指定したりすることができます。

投稿記事内にショートコードを書くと反映されてしまうので、この記事内ではすべて「[」の後ろと「]」の前に半角スペースを入れています。
コピペで使う際は半角スペースを削除してください。

カテゴリーを指定する

・[ catlist id=3 ]または[ catlist name=wordpress ]

「id」、または「name」というオプションを使います。

複数のカテゴリー(OR)を指定する

・[ catlist id=3,6 ]

「id」で複数のカテゴリーIDを指定すると、複数のカテゴリーの記事を表示することができます。
カンマで区切ると、いずれかのカテゴリー(3,または6)に属する記事が表示されます。

複数のカテゴリー(AND)を指定する

・[ catlist id=3+6 ]

「+」で区切ると、すべて(3と6)に属する記事になります。

複数のカテゴリー(NOT)を指定する

・[ catlist id=3-6 ]

「-」で区切ると、カテゴリーが3の中で、6には含まれていない記事が表示されます。

タグを指定する

・[ catlist tags=”recommend” ]

「tags」というオプションを使うと、タグを指定することができます。
この場合、recommendというタグが付いた記事が表示されます。

名前順に並び変える

・[ catlist id=3 orderby=title order=asc ]

「orderby」で並び替えの種類、「order」で昇順/降順の指定をします。

サムネイルを表示する

[ catlist thumbnail=yes thumbnail_size=thumb320 ]

「thumbnail=yes」で、記事のアイキャッチ画像(サムネイル)が表示されます。

「thumbnail_size」で、サムネイルのサイズを指定することができます。ここで指定できるサイズは、ブログで生成されている画像サイズのみです。

具体的な活用法

スクロール追従領域に任意の記事を表示する

Simplicity2

(Cocoon)のウィジェット「スクロール追従領域」にテキストウィジェットを設置し、以下のように記述して「recommend」というタグを付けた記事を表示しています。

<section id=recommend-post>
[ catlist tags=recommend thumbnail=yes thumbnail_size=thumb320 template=list ]
</section>

↓CSS

#recommend-post li{
 max-width: 88%;
 margin: auto; 
}
#recommend-post img{
 max-height:140px;
 width:auto;
 display:block;
 margin:auto;
}
template=listはList category postsのテンプレートです。
テンプレートについては今度記事を書くので、ここでは省略します(テンプレートを使うと、記事タイトルとサムネイルの表示順を変えたりすることができます)。

Shortcodes Ultimateと組み合わせる

CocoonカスタマイズSimplicityカスタマイズ
[ su_tabs ]
[ su_tab title="Cocoonカスタマイズ" ][ catlist id=10 ][ /su_tab ]
[ su_tab title="Simplicityカスタマイズ" ][ catlist id=2 ][ /su_tab ]
[ /su_tabs ]

Shortcodes Ultimateのタブと組み合わせました。

https://simplicity-hacks.tokyo/?p=578

さいごに

List category postsは非常に拡張性が高く、工夫次第で色々な使い方ができると思います。

Comments

  1. […] カテゴリー毎の記事一覧を表示するList category postsの、使い方と活用法 simplicity-hacks.tokyo/?p=817 […]

  2. […] 【関連記事】 ・カテゴリー毎の記事一覧を表示するList category postsの、使い方と活用法 ・コピペでできるボックスデザインサンプルとビジュアルエディタへのボタン追加方法 ・サイドバ […]

  3. […] カテゴリー毎の記事一覧を表示するList category postsの、基本的な使い方と活… […]

タイトルとURLをコピーしました