はじめに
このHPのTopページでも利用していますが、このように、WordPressの新着記事やカテゴリー記事をプラグインを用いて一覧形式で表示する方法を紹介します。
アイキャッチ画像を表示したり、レイアウトをカスタマイズすることもできます。
使用するプラグイン
WordPress管理画面左側のメニューから[プラグイン]→[新規追加]をクリックし、List category postsを検索してインストール、有効化をして下さい。

手順
1.固定ページにショートコード記載
最初に固定ページを新規で開き、下記ショートコードを記載しましょう。
[catlist categorypage=”yes” thumbnail=yes date=yes thumbnail_size=150,150 numberposts=10 pagination=yes excerpt=yes orderby=date order=desc ]
コード記載内容
・catlist
基本になるコードで、この後に半角スペースを空けて、様々なコードを入力していきます。
[catlist パラメータ=値・・・・ ]
・categorypage=”yes”
現在設定しているカテゴリすべての一覧を表示したい場合に「”yes”」を指定します。
特定のカテゴリーを表示したい場合はname(スラッグ指定)やid(カテゴリID指定)で行います。
name=スラッグ かid=カテゴリーidの数字
一つのカテゴリ指定の場合 name=hypnotherapy か id=8
2つのカテゴリ指定の場合 name=hypnotherapy,disorder id=8,9 (,区切りでなく+でも可)
・date=yes
投稿日を表示します。更新日を指定したいときは、 date_modified=yesを記載してください。
・thumbnail=yes
サムネイル画像を表示します。
・thumbnail_size=150,150
サムネイル画像のサイズを指定します。150,150が縦横のサイズで数値を変更することでサイズを変更できます。
・numberposts=10
1ページ当たりの投稿記事数。この場合1ページに10記事表示します。
数値を「ー1」に変更すると全記事表示となります。
・pagination=yes
ページネーションを表示するかどうかを設定します。
今回は numberposts を10に設定しているので、10記事毎にページが作成されます。
画像の下部にでている数字がページネーションです。

・excerpt=yes
抜粋を表示。
投稿記事の下部にある”抜粋”に入力したものが反映されます。

・orderby=date order=desc
記事の並べ替え設定です。
orderby :記事の並び順を指定します。値は以下のとおりになります。
author - 投稿者ID順
category - カテゴリID順
date - 投稿日順
ID - 記事ID順
rand - ランダム表示
title - タイトル順
order:記事の昇順、降順を設定します。
asc - 昇順(古い記事から新しい記事)
desc - 降順(新しい記事から古い記事)
2.レイアウトの修正
コードを記載した状態でプレビューすると、レイアウトが崩れています。
これは、 List category postsの「テンプレート設定」と「CSS」で体裁を変更することでカスタマイズができるようになります。
サムネイル画像を左にもっていき、記事間に罫線があるレイアウトにしていきましょう。

2-1.テンプレートの編集
2-1-1.テンプレートファイルのダウンロード
「List Category Posts」のテンプレートファイルは以下の場所にあります。
ここに「default.php」というファイルがあるので、「FFFTP」か「FileZilla」などを使ってPCにダウンロードします。
/wp-content/plugins/list-category-posts/templates
2-1-2.テンプレートファイルの名前を変更
ダウンロードしたテンプレートファイルの名前を任意の名前に変更します。
例では「 lp_list .php」に変更しました。
2-1-3.テンプレートファイルの変更
phpファイル(今回は lp_list .php) を開き、下記のように修正し、保存してください。
・85行目の
「//Post Thumbnail
$lcp_display_output .= $this->get_thumbnail($post);」
を67行目の「//Show the title and link to the post:」の手前に移動。
・ 68行目の「’h3’」の「h3」を削除して「”」にします。

2-1-4.子テーマ内にフォルダを作成する
子テーマ内に「list-category-posts」フォルダを作成し、先ほど作成したphpファイルを入れます。
作成する場所は以下の場所です(cocoonの場合)
/wp-content/themes/cocoon-child-master/list-category-posts
※子テーマを使っていない方は、親テーマ内に 「list-category-posts」フォルダを作成し、ファイルを保存してください。
2-1-5.ショートコードに追加
固定ページに記載したショートコードに
catlist template=テンプレートファイル名(.php拡張子は省く)
を追加します。
ここでは、
catlist template= lp_list
になります。
これで、テンプレートファイルが反映されるようになります。
[catlist categorypage=”yes” thumbnail=yes date=yes thumbnail_size=150,150 numberposts=10 pagination=yes excerpt=yes orderby=date order=desc template=lp_list ]
2-2.CSSのカスタマイズ
ここでプレビューをすると、サムネイルが左に移動していることが確認できます。
次にレイアウトをCSSで調整し、形を整えていきます。

2-2-1.コードの記載
WordPressの外観⇒テーマエディター
で下記のようにコードを記載します。
/
** 子テーマ用のスタイルを書く
/
/List Category Postカスタマイズ/
ul.lcp_catlist li {
list-style:none;
border-bottom: 1px solid #CCCCCC;
padding-top: 10px;
padding-bottom: 90px;
}
ul.lcp_catlist li img {
float: left;
margin-right: 30px;
}
プレビューすると綺麗にレイアウトが整います。

