【WordPress】List Category Postsのカスタマイズ。日付とタイトルだけのシンプル表示

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

List Category Postsで表示するリストを、以下のようにカスタマイズする方法です。
わたしは日記ページの下に、直近1週間分の日記リストを表示させています。

完成イメージ
スポンサーリンク

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

デフォルトでは、「日付」はタイトルの後ろに表示される仕様になっています。
タイトルの前に日付を表示するようにし、さらに日付の後のタイトルの開始位置を揃えるようにタグを設定します。

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

この中にある「default.php」をPCにダウンロードして修正します。
テンプレート名は分かりやすい名前に変えてください。
行数を目安に変更する内容を説明していきます。

47行目

スタイルシートで使うクラス名「lcp_catlist」を適当な名前に変更します。
(style.css 内に記述するときの名前になります)

変更前
変更後
65行目

タイトルの開始位置を揃えるために<span>タグの記述を追加します。

変更前
変更後
68行目

タイトルの<h3>タグを消します。

変更前
変更後
74行目の下

65行目の<span>を閉じる記述とタイトルの頭位置を揃えるための<div>を追加する一文を、1行丸ごと新しく追加します。

変更前
変更後
103行目以降

74行目の下に行を追加したので、以降はデフォルトテンプレートの状態から行がずれます。
「endwhile」の前、</li>タグの前に</div>を追加します。
※「変更前」の行数は、デフォルトテンプレート状態での行数です。

変更前
変更後
67~68行目

67行目〜68行目を、74行目より下に移動させます。
(日付の後ろにタイトルが表示されるようになります)

変更前
変更後

以上でテンプレートの修正は完了です。

カスタマイズしたテンプレートのアップロード

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

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

スタイルシートの設定

スタイルシートに以下の設定を追加します。
テンプレートの47行目の部分で指定したクラス名を設定してください。

ショートコードの記述

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

各設定値の意味
id:リストを表示させたいカテゴリ番号を指定します。
numberposts:リストに表示させる行数を指定します。
template:作成したテンプレート名を指定します。
date:「yes」を指定します。(日付を表示するため)

以上で完成です!

おまけテク:表示中の記事をリストから除外する

「excludeposts=this」というパラメーターを追加すると、表示している記事をリストから除外することもできます。

上記コードがない場合、一番最近の日記を表示している時は、その記事を含むリストが表示されます。なんか変ですよね?
上記コードを追加することで、一番最近の日記を表示している時は、その記事を除いたリストが表示を表示できます。

The following two tabs change content below.
47歳の独女(×1)です。 人生最後のあがき!ということでダイエットとたるみ改善に励んでおります。 50歳からの人生を模索中。どうぞよろしくお願いします! 詳しいプロフィールはこちら!
スポンサーリンク
スポンサーリンク