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

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

2018/10までのサイトイメージです。
スポンサーリンク

どう変えたか

最初の記事一覧はこんな感じ。

最初のページ(投稿タイプ)

それを、こんな感じにしました。

(画像の表示確率が違いますが^^;)
最初のページ(今)

やったこと

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

投稿した記事を表示できるプラグイン「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”

日付と時刻の書式

日付と時刻の書式 - WordPress Codex 日本語版
4.カテゴリ

カテゴリを表示させたいので、カテゴリを表示させるパラメータを追加

category_display=”true” category_label=” ”

category_label=” ”の空白は、カテゴリ名の前に空白を入れるため。

5.記事の抜粋

せっかくなので、記事の文章も少しだけ載せたい。

include_excerpt=”true” excerpt_length=”30″

抜粋をする、にして、最初の30文字を表示させます。

抜粋だけだと味気ないので、「続きを読む」を表示させて、その部分をリンクさせてみる。

excerpt_more=”記事を読む” excerpt_more_link=”true”

「記事を読む」でも「もっと見る」でも「…」でもなんでもOK!
リンクをさせなくてもいい時は、excerpt_more_link=”true”はなくても大丈夫です。

ここまでの設定まとめ

タグはこんな感じです。

[display-posts post_type=”post” image_size=”thumbnail” include_date=”true” date_format=”Y/m/d” category_display=”true” category_label=” ” posts_per_page=”3″ include_excerpt=”true” excerpt_length=”30″ excerpt_more=”記事を読む” excerpt_more_link=”true”]

説明していないパラメータの補足を。

post_type=”post”

投稿だけ掲載。”post,page”で、投稿と固定ページを掲載することも可能。カスタム投稿を使えば、カスタム名を入れればそれも引っ張って来れます(カスタム投稿は難しくてよくわかっていませんが;;)

posts_per_page=”3″

最新の3件を表示して、というタグ。
ここでは3件ですが、最初のページでは、10件表示するように設定しています。

表示されるメニュー

表示されるメニュー


これだと、わかりにくいですね。
次回、CSSでの設定を覚え書き( ..)φメモメモ

参考にさせていただいたサイト

ショートコードだけでページ内に記事一覧!Display Posts Shortcode

ショートコードだけでページ内に記事一覧!Display Posts Shortcode
Display Post Shortcodeは、ショートコードで様々な記事一覧をサイドバーはもちろん、ページ内、投稿内、フッターに作る事ができる大変便利なプラグイン。この記事では、Display Post Shortcodeを使ってページ内にサムネイル付き記事一覧を作成する方法を書いています。

Display Posts Shortcode公式

billerickson/display-posts-shortcode
Display a listing of posts using the shortcode - billerickson/display-posts-shortcode

コメント