【WordPress】List Category Postsのカスタマイズ。一覧表示がこんなに変えられる!

WordPressプラグイン「List Category Posts」を使えば、簡単なカスタマイズで見せ方を変更することができます。

スポンサーリンク

List Category Posts のカスタマイズ例

まず、これからご説明させていただくカスタマイズ事例をご紹介します。
こちらの画面は当サイトで以前使っていたレイアウトで、べてList Category Postsを使っています

画像付き一覧表示List Category Posts画像付き一覧表示
本文抜粋付き一覧表示List Category Posts本文抜粋付き一覧表示
日付とタイトルだけのシンプル一覧表示List Category Posts日付とタイトルだけのシンプル一覧表示

これらのカスタマイズは、スタイルシートとデフォルトテンプレートの変更だけで行うことができます。基本的に、カスタマイズを行う場合は同じ手順です。型を覚えてしまえば、ご自分で自由にカスタマイズできるようになります。

難易度もそれほど高くありませんので、是非チャレンジしてみてください!

List Category Posts で画像付き一覧表示

List Category Posts画像付き一覧表示
【手順】
  1. サムネイル画像の表示位置を左側に変更する
    (デフォルトテンプレートを修正する)
  2. 見栄えを変更する
    (スタイルシートを修正する)
  3. リストを表示させたい場所にショートコードを設定する

サムネイル画像の表示位置を変更する方法

デフォルトテンプレートを修正します。

事前準備で、以下の内容を確認してください。

▼デフォルトテンプレートの格納場所・ファイル名
/wp-content/plugins/list-category-posts/templates/default.php

▼カスタマイズしたテンプレートの格納場所
WordPressで使っているテーマの中に、専用フォルダを作ります。
<Simplicityの場合>
/wp-content/themes/simplicity2-child/list-category-posts/

  1. デフォルトテンプレート「default.php」をPCにダウンロードします。
  2. ファイル名を分かりやすい名前に変更します。
    今回は「default.php」→「lp_list.php」に変更しています。
  3. ファイルを開き、以下のように変更します。
    「get_thumbnail~」の部分を上部へ移動させ、「get_post_title~」のH3見出し設定を削除する。default.phpのカスタマイズ画面
  4. カスタマイズしたテンプレートの格納場所に、修正したファイルをアップロードします。

以上で、画像の表示位置を変更するためのカスタマイズは終わりです。

見栄えを整える(スタイルシートの変更)方法

「Style.css」に以下の記述を追加します。
※「max-width: 414px」の記述は、iPhone Plusでの表示崩れを防ぐためのものです。

スタイルシートのカスタマイズは終わりです。

ショートコードの設定方法

リストを表示させたい場所にショートコードを記載します。

パラメータ 意味
id=XX カテゴリの番号
numberposts=XX 表示させたい記事数
thumnail=yes サムネイル画像を表示する
thumnail_size=80,80 サムネイル画像の大きさ
数字が大きくなるほど、画像サイズも大きくなります
template=XXXX 作っておいたテンプレート名
pagination=yes ページ送りを表示する

以上で、List Category Posts で画像付き一覧表示するためのカスタマイズは完成です!

List Category Posts で本文抜粋付き一覧表示

【手順】
  1. 抜粋表示する文字数を指定する
    (function.phpを修正する)
  2. 日付の表示位置を変更する
    (デフォルトテンプレートを修正する)
  3. 見栄えを変更する
    (スタイルシートを修正する)
  4. リストを表示させたい場所にショートコードを設定する
List Category Posts は日本語表示対応していないので、ショートコードに通常通り本文抜粋の文字数を指定しても制限がかからず、本文すべてが表示されてしまいます。
そのため、「functions.php」で別途指定を行わなければなりません。

抜粋文字数を指定する方法

「functions.php」に以下の記述を追加します。
抜粋表示させる文字数を増減したい場合は、「500」となっている部分を変更してください。

日付の表示位置の変更方法する方法

デフォルトテンプレートを修正します。

事前準備で、以下の内容を確認してください。

▼デフォルトテンプレートの格納場所・ファイル名
/wp-content/plugins/list-category-posts/templates/default.php

▼カスタマイズしたテンプレートの格納場所
WordPressで使っているテーマの中に、専用フォルダを作ります。
<Simplicityの場合>
/wp-content/themes/simplicity2-child/list-category-posts/

  1. デフォルトテンプレート「default.php」をPCにダウンロードします。
  2. ファイル名を分かりやすい名前に変更します。
    今回は、「default.php」→「diary_list.php」に変更しています。
  3. ファイルを開き、以下のように変更します。
    「get_date~」の部分を上部へ移動させ、「get_post_title~」のH3見出し設定を「p」タグに変更する。
  4. カスタマイズしたテンプレートの格納場所に、修正したファイルをアップロードします。

以上で、画像の表示位置を変更するためのカスタマイズは終わりです。

見栄えを整える(スタイルシートの変更)方法

「Style.css」に以下の記述を追加します。

スタイルシートのカスタマイズは終わりです。

ショートコードの設定方法

リストを表示させたい場所にショートコードを記載します。

パラメータ 意味
id=XX カテゴリの番号
numberposts=XX 表示させたい記事数
pagination=yes ページ送りを表示する
excerpt=yes 本文抜粋を表示する
template=XXXX 作っておいたテンプレート名
excert_size=1 本来であれば抜粋文字数を指定する部分ですが、最初の説明に書いた通り「List Category Posts」は日本語対応していないため意味を持ちません。
「1」としていますが、念のため書いてる感じです。文字数は「functions.php」側の設定が有効になります。
date=yes 日付を表示する

List Category Posts で日付とタイトルだけのシンプル一覧表示

シンプルVerのカスタマイズ方法はこちらをご覧ください。

List Category Postsで表示するリストを、日付とタイトルだけのシンプルな一覧表示にする方法をご紹介します。 List Categor
スポンサーリンク
スポンサーリンク