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

おはようございます、こんにちは、こんばんは。
ふらっふぃ(@fluffy_mybag)です。

トップページと日記の一覧表示、日記ページ下部の「最近の日記」のリスト表示用にWordPressプラグイン「List Category Posts」を使うことにしました。
めちゃくちゃがんばってカスタマイズしたので、その方法を共有します。
今回、ひとつのプラグインで以下のように3つの見せ方をさせています。

TOPページ&通常カテゴリ Ver 日記カテゴリ Ver
シンプル Ver

ひとつのプラグインとは思えないでしょ?
それでは、これからそれぞれの設定について説明させていただきます。

※プラグインのインストール方法や基本的な使い方については、沢山解説ページがあるので省略させていただきました。
スポンサーリンク

TOPページ&通常カテゴリVer

List Category Posts のデフォルト表示では、サムネイル画像の表示はタイトルの後ろです。
デフォルトの表示順を変更する場合は、別途テンプレートで設定を行います。
あとはスタイルシートで見栄えをよくします。

完成版
サムネイルの表示位置を変更する方法

1.デフォルトテンプレートの修正

デフォルトテンプレートの格納場所はこちら。↓
/wp-content/plugins/list-category-posts/templates

この中にある「default.php」をPCにダウンロードして修正します。
テンプレート名は分かりやすいように変更しておきましょう。
わたしの場合は「default.php」→「lp_list.php」という名前に変更しました。

ファイルを開いてサムネイルの表示が指定されている記述を、最初に移動させて保存します。
またタイトルに見出し「h3」が設定されている部分を削除しておきます。

2.作成したテンプレート用のファイルをアップロードします。

アップロード先は子テーマに「list-category-posts」というフォルダを作ってアップロードします。
Simplicityの場合はこちら。↓

/wp-content/themes/simplicity2-child/list-category-posts/

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

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

2018/1/15追記
iPhone 7/8Plusのみ表示が崩れていたため、設定(画面サイズ 414px)を追記しました。

ショートコードの設定

リストを表示させたい場所に以下の記述を行います。
それぞれの引数の意味は下に記載しています。

  • id
    カテゴリの番号
  • numberposts
    表示させたい記事数
  • thumnail
    サムネイルを表示する
  • thumnail_size
    サムネイルの大きさ
  • template
    作っておいたテンプレート名
  • pagination
    ページ送りを表示する

WordPress Related Postsを同様のスタイルにする方法

上記「TOPページ&通常ページVer」設定同様のスタイルを、「Wordpress Related Posts」プラグイン(関連記事を表示するプラグイン)に設定する方法をご紹介しています。

日記カテゴリVer

やり方の流れは「Topページ&通常カテゴリVer」と同じです。その部分の細かい説明は省略させていただきます。
大きく違うのは本文を抜粋表示させるところ。
List Category Posts は日本語表示対応していないので、ショートコードに通常通り本文抜粋の文字数を指定しても制限がかからず、本文すべてが表示されてしまいます。
そのため、「functions.php」で別途指定を行わなければなりません。

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

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

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

日付の表示が指定されている場所を、先頭に移動したテンプレートを作成します。
わたしは「TOPページ&&通常カテゴリVer」と日記用のテンプレートは分けて、「diary_list.php」にしています。
タイトルの見出し「h3」は「P」タグにしました。

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

先に書いた「Topページ&通常カテゴリVer」に記載したスタイルシートの内容に加えて、以下の記述を追加します。
日記のタイトル部分の装飾設定です。

ショートコードの設定

今回の記述は以下の通りです。
引数に関しては、さきほどと違うところだけ説明します。

  • excerpt
    抜粋を表示する
  • excert_size
    本来であれば抜粋文字数を指定する部分ですが、最初の説明に書いた通り「List Category Posts」は日本語対応していないため意味を持ちません。
    「1」としていますが、念のため書いてる感じです。
    文字数は「functions.php」側の設定が有効になります。
  • date
    日付を表示させる

シンプルVer

記事が長くなりすぎたので、シンプルVerのカスタマイズ方法はこちらにまとめました。

スポンサーリンク
スポンサーリンク