固定ページにサムネイル入り新着記事の一覧がでるようにする　WordPressプラグイン～List category posts～

WordPress
2019.11.20

はじめに

このHPのTopページでも利用していますが、このように、WordPressの新着記事やカテゴリー記事をプラグインを用いて一覧形式で表示する方法を紹介します。
アイキャッチ画像を表示したり、レイアウトをカスタマイズすることもできます。

403 Forbidden
hinatashop.xsrv.jp

使用するプラグイン

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;
}

プレビューすると綺麗にレイアウトが整います。

タイトルとURLをコピーしました