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

【手順】 |
---|
|
日付の表示位置を左側に変更する方法
デフォルトテンプレートを修正します。
事前準備で、以下の内容を確認してください。
▼デフォルトテンプレートの格納場所・ファイル名
/wp-content/plugins/list-category-posts/templates/default.php
▼カスタマイズしたテンプレートの格納場所
WordPressで使っているテーマの中に、専用フォルダを作ります。
<Simplicityの場合>
/wp-content/themes/simplicity2-child/list-category-posts/
- デフォルトテンプレート「default.php」をPCにダウンロードします。
- ファイル名を分かりやすい名前に変更します。
今回は「default.php」→「lp_list.php」に変更しています。 - ファイルを開きます。
- スタイルシートで設定するクラス名「lcp_catlist」を変更します。
- 今回は「lcp_catlist」→「lcp_catlist_diary2」に変更しています。
※ほかにList Category Postsのカスタマイズを行っていない場合は変更不要です。
【47行目】変更前 変更後 - タイトルの開始位置を揃えるためにタグの記述を追加します。
【65行目】変更前 変更後 - タイトルのH3見出しタグを消します。
【68行目】変更前 変更後 - 65行目の「span」を閉じる記述とタイトルの頭位置を揃えるための「div」を追加する一文を、1行丸ごと新しく追加します。
【74行目の下】変更前 変更後 - 74行目の下に行を追加したので、以降はデフォルトテンプレートの状態から行がずれます。
「endwhile」の前、liを閉じるタグの前に、divを閉じるタグを追加します。
※「変更前」の行数は、デフォルトテンプレート状態での行数です。
【103行目以降】変更前 変更後 - 67~68行目
67行目〜68行目を、74行目より下に移動させます。
(日付の後ろにタイトルが表示されるようになります)変更前 変更後 - カスタマイズしたテンプレートの格納場所に、修正したファイルをアップロードします。
以上でテンプレートの修正は完了です。
見栄えを変更する方法
スタイルシートに以下の設定を追加します。
カスタマイズしたテンプレートの47行目の部分で指定したクラス名を設定してください。
1 2 3 4 5 6 7 8 9 | ul.lcp_catlist_diary2 li{ list-style:none; border-bottom:1pxdotted#000000; padding-top:10px; padding-bottom:10px; } ul.lcp_catlist_diary2 li div{ margin:-1.6em008em; } |
ショートコードの記述方法
リストを表示させたい場所にショートコードを記載します。
(参考例)
1 | [catlistid=XXnumberposts=XXtemplate=XXXXdate=yes] |
項目 | 意味 |
---|---|
id=XX | リストを表示させたいカテゴリ番号を指定します。 |
numberposts=XX | リストに表示させる行数を指定します。 |
template=XXXX | 作成したテンプレート名を指定します。 |
date=yes | 日付を表示します。 |
おまけテク:表示中の記事をリストから除外する
「excludeposts=this」というパラメーターを追加すると、表示している記事をリストから除外することができます。
1 | [catlistid=XXnumberposts=XXtemplate=XXXXdate=yesexcludeposts=this] |
コメント