私がよく使っている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を指定したり、並び順を指定したりすることができます。
コピペで使う際は半角スペースを削除してください。
カテゴリーを指定する
「id」、または「name」というオプションを使います。
複数のカテゴリー(OR)を指定する
「id」で複数のカテゴリーIDを指定すると、複数のカテゴリーの記事を表示することができます。
カンマで区切ると、いずれかのカテゴリー(3,または6)に属する記事が表示されます。
複数のカテゴリー(AND)を指定する
「+」で区切ると、すべて(3と6)に属する記事になります。
複数のカテゴリー(NOT)を指定する
「-」で区切ると、カテゴリーが3の中で、6には含まれていない記事が表示されます。
タグを指定する
「tags」というオプションを使うと、タグを指定することができます。
この場合、recommendというタグが付いた記事が表示されます。
名前順に並び変える
「orderby」で並び替えの種類、「order」で昇順/降順の指定をします。
サムネイルを表示する
「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; }
テンプレートについては今度記事を書くので、ここでは省略します(テンプレートを使うと、記事タイトルとサムネイルの表示順を変えたりすることができます)。
Shortcodes Ultimateと組み合わせる
- Cocoon 記事一覧ホバー時の動きをカスタマイズする方法と、デザインサンプル
- Cocoon 人気記事ウィジェットのデザインサンプル10
- Cocoon コメント欄のデザインをカスタマイズする方法(枠、色、文字の変更)と、デザインサンプル
- Cocoon カテゴリー・タグ表示のカスタマイズ方法とデザインサンプル8(アイキャッチラベル、記事下)
- Cocoonのページネーションのデザインをカスタマイズする方法と、デザインサンプル5つ
- Cocoon 記事の目次(TOC)のデザインをカスタマイズする方法とデザインサンプル5つ
- Cocoon 検索ボックスのデザインをカスタマイズする方法(枠、色、文字の変更)とデザインサンプル5つ
- CocoonのSNSシェアボタンを、よりシンプルにカスタマイズする方法
- Cocoonのブログカードのデザインカスタマイズ
- Cocoonのグローバルナビのカスタマイズ方法(ヘッダー固定、ホバー時に下線)
- Cocoonの人気記事ウィジェットのカスタマイズ方法
- Cocoonの人気記事ウィジェットのカスタマイズ方法
- コピペでできるボックスデザインサンプル13とビジュアルエディタへのボタン追加方法(CSS)
- Simplicityの内部ブログカードのサムネイルサイズを変更する方法
- このブログで行っているSimplicityカスタマイズ8つ
- WordPress初心者におすすめのテーマはSimplicity
- 【Simplicity】FontAwesomeを使って記事を装飾する方法
- SimplicityのSNSシェアボタンを、よりシンプルにカスタマイズする方法
- WordPress Popular Postsのランキング順位に色を付ける方法(Simplicity2)
- SimplicityのSNSフォローボタンを丸くして、色を変更する方法
[ 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
[…] カテゴリー毎の記事一覧を表示するList category postsの、使い方と活用法 simplicity-hacks.tokyo/?p=817 […]
[…] 【関連記事】 ・カテゴリー毎の記事一覧を表示するList category postsの、使い方と活用法 ・コピペでできるボックスデザインサンプルとビジュアルエディタへのボタン追加方法 ・サイドバ […]
[…] カテゴリー毎の記事一覧を表示するList category postsの、基本的な使い方と活… […]