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

WordPress

はじめに

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

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

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