サイトの入口ページのレイアウト(1)

サイトの入口ページのレイアウトを変更してみました。
自分でもすぐ忘れちゃうので、備忘録を兼ねて…。

最初の記事一覧はこんな感じ。
最初のページ(投稿タイプ)


それを、こんな感じにしました。
(画像の表示確率が違いますが^^;)
最初のページ(今)

やったこと

固定ページにレイアウトを反映させたページをつくる

投稿した記事を表示できるプラグイン「Display Posts Shortcode」をダウンロード。
ulタグでリスト表示をしてくれて、カスタマイズもいろいろできます。

HTMLタグは↓こんな感じ
<ul class=”display-posts-listing”>

1つの枠に載せたい内容は、↓

  1. アイキャッチ
  2. タイトル
  3. 投稿日
  4. カテゴリ
  5. 記事の抜粋

「Display Posts Shortcode」のパラメータ

1.アイキャッチ

アイキャッチを表示したいので、画像を表示し、サイズはサムネイルサイズに。
サムネイルのサイズは、設定→メディアで設定したもの。
設定メディア
このサイトでは、150×150ピクセルに設定しています。
タグは↓

[display-posts image_size=”thumbnail”]

mediumだと中くらいのサイズ、largeだと大きいサイズになります(あまり使わないと思いますが)

2.タイトル

設定しなくても表示されるので、そのまま。

3.投稿日

日付を2018/XX/XXと表示させたい。

これだと日付の表示が、XX月XX日XXXX年なのでちょっと見にくい。
date_format=”Fj,Y” → 1月12,2018
date_format=”Y/m/d” → 2018/1/12
で調整。
タグは↓

include_date=”true” date_format=”Y/m/d”
スポンサーリンク