固定ページにカテゴリー別一覧ページを作成する方法(ページ送りつき!)

List Category Postsアイキャッチ WordPress

Word Pressで固定ページにカテゴリー毎の一覧ページがほしいとき。結構あるのではないでしょうか?できればphpの編集などをせずに、プラグインの設置だけでOK!みたいに簡単にできれば嬉しいですよね。

ショートコードを利用して固定ページに特定のカテゴリー一覧リストが作成でき、ページ送りやデザインカスタマイズも自在にできるプラグインの紹介とカスタマイズ方法を解説します。

Shortcode Ultimateではページ送りができない!!

ショートコードを貼りつけるだけで固定ページに特定のページ一覧を作成する方法を検索すると、「Shortcode Ultimate」というプラグインを用いた方法を紹介するサイトが見つかります。Shortcode Ultimateは、CSSがわからなくても、記事一覧だけでなくCSSボタンや部分的なテンプレートなど簡単に様々なショートコードを自動付加してくれる優秀なプラグインです。

…。
……が。
Shortcode Ultimateを用いたカテゴリーリストページ作成には大きな欠陥があります!
私もShortcode Ultimateを利用してから初めて気づいたのですが、Shortcode Ultimateで作成する一覧ページにはページネーション(ページ送り)機能がついていないのです!!

Shortcode Ultimateプラグイン

ページ送りとは、コンテンツ内容(記事一覧リストの場合は、コンテンツ内容=記事数)が1ページあたりの表示数として指定している数よりも多いときに、自動で2ページ目、3ページ目…を作成してくれる機能のことです。

ページ送り

念のためShortcode Ultimateの公式サイトでも確認してみましたが、現状、ページ送り機能はないとのこと(2018年6月確認済み)。記事一覧ページなのにページ送りができないってちょっと…いえ、多いに不便でしょう!?

Shortcode Ultimateで作成したカテゴリー別の記事一覧ページにページ送り機能をつけるためには、固定ページ用のphpファイルやfunction.phpの修正が必要です。しかし、単純な記述修正ではありません…。
使用しているテーマによって、固定ページ表示のために用いられているファイルがどれなのか探さないといけないし、ほかに導入しているプラグインとの兼ね合いにも配慮しないといけないので、せっかく簡単に設定したい!と考えて設置したプラグインが簡単な修正作業ではなくなるのです。

ちなみにページ送り機能を付加する人気のプラグイン「WP-PageNavi」もShortcode Ultimateで作成したカテゴリー別記事一覧では、普通に設定しただけでは機能しません><
そんな理由から、ページ送りもついたカテゴリー別の記事一覧ページを簡単に作る方法を探しました。

前置きが長くなってしまいましたが、紹介するのは、ページ送り機能つきのカテゴリー記事一覧を簡単に作成できる「List Category Posts」というプラグインになります。

ページ送りもカテゴリの選択も自在!のプラグイン「List Category Posts」

List Category Postsプラグイン

「List Category Posts」というプラグインを使用すると、ショートコードを貼りつけるだけで、固定ページにカテゴリー別の投稿一覧ページを作成することができます。
表示させるカテゴリーの選別や除外、複数のカテゴリー指定もショートコードの編集のみで可能!とても扱いやすいプラグインです。

さらにCSSを編集することで、一覧リストのデザインも思いのままにデザインできます。

ダッシュボードより、プラグインの新規追加で「List Category Posts」を検索し、インストール&有効化すると準備は完了です。特別な設定は一切不要です。

「List Category Posts」の設定方法

  1. 記事一覧ページを表示させたい固定ページを新規作成します。
  2. ※このとき、固定ページのスラッグ名(ポスト名)は、カテゴリーのスラッグ(カテゴリー名)と完全一致させてしまわないように注意してください。

    ex.) 「wordpress」というカテゴリー名の記事一覧ページを作成する場合

    固定ページのポスト名(スラッグ)は「wordpress」を避け、「word-press」、「wordpress_categorylist」など異なる名前にする

  3. 固定ページ作成画面にショートコードを作成します。
  4. カテゴリーリストを作成するための基本ショートコードは

    [catlist id=●●(ID番号)]

    たったこれだけ!これでカテゴリーIDが●●番の記事一覧が完成しますよ。
    あとは、カテゴリーの選別指定や除外指定、1ページあたりの記事数、ページ送り機能の付加などカスタマイズのためのコードを[]の中に追加していくだけです。

「List Category Posts」のカスタマイズ方法(ショートコード編)

List Category Postsには、さまざまなパラメータ(指定項目)が搭載されています。
おもに表示させるカテゴリー名orカテゴリーID、投稿順、投稿者、日付、本文抜粋表示の有無、カスタムフィールドなどが、ショートコードの項目追加のみでカスタマイズできます。

主要な設定項目を紹介します。

カテゴリーの選別・指定方法

投稿一覧に表示するカテゴリを選別することができます。
※カテゴリーの選別方法は記述が重複しないよう注意してください。重複した選別を記述すると選別結果に不具合が生じ、正しく選別されなくなることが予想されるようです。

  • ID
  • 指定したカテゴリIDのみの投稿一覧を表示します。[catlist id=●●]

    ex.) [catlist id=24]

  • カテゴリー名(スラッグ名)
  • カテゴリ名またはスラッグを使用して、カテゴリから投稿を表示します。[catlist name=スラッグ名]

    ex.) [catlist name=word-press]

  • タグの指定
  • 指定したタグ名のみの投稿一覧を表示します。[catlist tags=”タグの文字列”]

    ex.) [catlist tags=”wordpress”]

  • categorypage
  • 現在の投稿のカテゴリを抽出します。categorypageパラメータを使用すると、現在の投稿のカテゴリIDを検出し、そのカテゴリの投稿を一覧表示できます。
    現在の投稿のカテゴリからの投稿を表示する場合は “yes”に設定します。

    ex.) [catlist categorypage=”yes”]

    ※カテゴリID、名前またはスラッグのないリストカテゴリ投稿を使用すると、すべてのカテゴリから最新の投稿が投稿されます。

  • 検索指定
  • 検索キーワードに合致する記事のみを抽出表示します。[catlist search=”検索キーワード”]

    ex.) [catlist search=”wordpress”]

複数のカテゴリーを指定/特定のカテゴリーを除外する方法

  • 複数のカテゴリーを指定する場合
  • 「+」で指定値を追加します。表示させいID名あるいはスラッグ名を「+」でつないで記述します。

    ex.) [catlist id=17+25+2] / [catlist name=wordpress+html]

  • 特定のカテゴリーを除外する場合
  • 除外したいID名あるいはスラッグ名の前に「-」をつけて追加します。

    ex.) [catlist id=1]-[catlist name=wordpress]

    ※除外指定のあとに追加指定はできないので、追加したい指定は先にまとめて記述し、最後に「-指定」をします。

  • or属性にする方法
  • 表示させたいID名あるいはスラッグ名のあとに「,」で区切り、追加します。

    ex.) [catlist id=11,-32,16] 
    カテゴリーIDが11あるいは16で、なおかつカテゴリーID32のものを除外した結果を抽出

その他の指定方法

ショートコードの指定をつけ足していくときは、[]内の指定記述のあとに半角スペースを空けて、次の指定コードを追加していきます。

ex.) [catlist id=8 template=’default’ excerpt=’yes’ numberposts=’10’ pagination=’yes’ thumbnail=’yes’]

  • 表示件数指定
  • 一覧として表示させる件数を指定します。numberposts=●●

    ex.) [catlist id=1 numberposts=10] カテゴリー1の記事を10件表示する

  • 表示順
  • 一覧の表示順(ASC(昇順)/DESC(降順))を指定します。orderby=順序を決める文字列 order=asc/desc

    ex.) [catlist id=1 orderby=title order=asc] カテゴリー1の記事をタイトル昇順で表示する

  • サムネイル画像の表示
  • サムネイル画像つきの記事一覧にします。
    ※そのままでは、サムネイル画像がキレイに配置されないので、CSSで表示位置の調整記述が必要です。

    ex.) [catlist id=1 catlist thumbnail=”yes”]

  • 本文抜粋の表示
  • 記事タイトルとともに、本文抜粋を表示します。excerpt=”yes”

    ex.) [catlist id=1 excerpt=”yes”]

  • 本文抜粋の文字数指定
  • 本文抜粋を表示させる場合の文字数を指定します。excerpt_size=’●●’

    ※こちらの指定は、日本語サイトの場合は、うまく機能しないので注意が必要です!日本語の場合、文字数が正しく認識されず、数の調節がうまくできません。

    とりあえずの解決策として、感覚ですが値を「4」あるいは「5」に指定すると、80~150文字程度の抜粋になります…。的確に文字数を指定したい場合は、function.phpへの追加記述で対応できます。※後述

    ex.) [catlist id=1 excerpt=”yes” excerpt_size=’5′]

  • 続きを読むリンクの表示
  • 「続きを読む」のリンクを任意の文字列で表示させることができます。posts_morelink=”「●●●」(任意の文字列)”

    ex.) [catlist id=1 posts_morelink=”続きを読む”]

  • ページ送り機能の設置
  • ぺーじ送り機能をつけるなら次のの記述を追加します。pagination=yes

    ex.) [catlist id=1 pagination=yes]

  • child_categories
  • 子カテゴリーの投稿を除外/含める指定。初期は含める設定になっています。
    親と子のカテゴリーがある場合は、親子カテゴリーの投稿が同じカテゴリの投稿であるかのように表示されます。このパラメータを応用して、子カテゴリーの投稿を除外できます。

    ex.) [catlist name=”親カテゴリー名” child_categories=false]

そのほかにも、設定できる項目(パラメータ)はたくさんあります。

※詳しくは、公式サイトをご覧ください。
カテゴリの投稿を一覧表示する

「List Category Posts」のレイアウトカスタマイズ方法(CSS・php編)

List Category Postsは、レイアウトも自在にカスタマイズできますが、初期設定ではレイアウトのデザインが施されていません。
List category postsのレイアウトデザインは、FTPクライアントを使用して、使用中のテーマフォルダの中に、新規レイアウト用ファイルを設置することでカスタマイズが可能になります。

List Category PostsのCSSデザイン方法を説明します。

テンプレートファイルの作成方法

  1. 「list-category-posts」という名前の新規フォルダを作成します。
  2. FTPクライアントを利用して、サイトのプラグインフォルダ内、list-category-postsフォルダの中にある「templates」というフォルダを、フォルダごとダウンロードします。
  3. フォルダの場所) サイトフォルダ/wp-content/plugins/list-category-posts/templates

  4. ダウンロードした「templates」フォルダ内にある「default.php」をコピーして、1.で作成した「list-category-posts」フォルダの中に保存します。
  5. 「default.php」は基本のレイアウトが設定されているテンプレートファイルです。

  6. FTPクライアントを利用して、使用中のテーマフォルダの中に、作成した「list-category-posts」フォルダをアップロードします。
  7. アップロード場所) サイトフォルダ/wp-content/themes/テーマ名/list-category-posts

  8. テンプレートを使ってレイアウトをデザインするためのショートコード記述を加えます。
  9. [catlist template=”default”]

サムネイルとタイトルの表示順序入れ替え方法

一覧リストの各項目の表示順は、デフォルトでは
タイトル → 日付 → サムネイル →本文抜粋 → 「続きを読む」リンクの順になっています。

各項目の表示順は、defaoult.phpの編集で行います。

一例として、サムネイル画像とタイトルの表示順を入れ替え、サムネイル → タイトル にする場合は以下のとおりです。

ex.) サムネイル → タイトル の順にする場合

85行目あたりにある
 //Post Thumbnail
 $lcp_display_output .= $this->get_thumbnail($post);
の記述を、67行目あたりにある
 //Show the title and link to the post:
の記述の上に移動させる

⇓ 編集後

そのほかの項目の表示順変更も、同様の手順でカスタマイズを行ってください。

CSSカスタマイズ方法

タイトル、サムネイル、本文抜粋など記事一覧を構成する各セレクタ名(要素名)は以下のとおりです。

  • ul.lcp_catlist / 一覧全体
  • .lcp_catlist li / 一記事
  • .lcp_catlist li img / サムネイル
  • .lcp_catlist li h3 / 記事のタイトル
  • .lcp_excerpt / 本文抜粋部分
  • ul.lcp_paginator / ページ送り
  • .lcp_paginator li / ページ送りのページ番号

各セレクタに装飾のためのCSS記述を加えて、デザイン修正を行います、

ex.) サムネイルを左に配置し、テキストを右に回り込ませる場合

※widthとheightでサムネイルサイズを100pxに指定しています。

本文抜粋の文字数を調整する方法

前述したとおり、本文抜粋のためのショートコードはあるものの、日本語に対応していないため、日本語の本文抜粋の文字数は、使用中テーマのfunction.phpに編集を加えます。

※function.phpの編集は、事前にバックアップをとったうえ、各自、自己責任でお願いいたします。

「●●」の部分に指定したい文字数を入力してください。

「List Category Posts」はイチオシの記事一覧リスト作成プラグインです

固定ページの記事一覧

List Category Postsは、ご紹介したカスタマイズ方法のほかにも、応用することで新着情報リストや特定のカテゴリーリスト、検索結果リスト表示など、様々な用途に使えるプラグイン。設定もとっても簡単です。

CSSの知識がなければ思い通りのデザインを自作するのはょっと難しいかもしれませんが、List Category PostsのCSSデザイン方法については、紹介しているサイトもたくさんあり、フラストレーションの残らない思い通りのページ作成が実現できそうです。

面倒なphp編集も不要orいたってシンプルで、現状最強の記事一覧作成プラグインといっても過言ではないと思います。

Comments