はじめに
このHPのTopページでも利用していますが、このように、WordPressの新着記事やカテゴリー記事をプラグインを用いて一覧形式で表示する方法を紹介します。
アイキャッチ画像を表示したり、レイアウトをカスタマイズすることもできます。
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1c4afc2d.0b87fa53.1c4afc2e.632475cb/?me_id=1357621&item_id=10460860&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fyamada-denki%2Fcabinet%2Fa07000044%2F6993643019.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
使用するプラグイン
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
２つのカテゴリ指定の場合 name=hypnotherapy,disorder id=8,9 (,区切りでなく+でも可）
・date=yes
投稿日を表示します。更新日を指定したいときは、 date_modified=yesを記載してください。
・thumbnail=yes
サムネイル画像を表示します。
・thumbnail_size=150,150
サムネイル画像のサイズを指定します。150,150が縦横のサイズで数値を変更することでサイズを変更できます。
・numberposts=10
1ページ当たりの投稿記事数。この場合1ページに10記事表示します。
数値を「ー１」に変更すると全記事表示となります。
・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」に変更しました。
２-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;
}
プレビューすると綺麗にレイアウトが整います。
