Display Posts Shortcode プラグインの導入

WordPressを使う理由の一つとして「誰かがプラグインを作ってくれているだろう」という過度な期待がある。タイトルに記載した「固定ページにアイキャッチ画像付きの投稿一覧を表示する方法」を知るために、Google先生にそのままのキーワードでお伺いを立てたところ、どうやら Display Posts Shortcode というプラグインが便利そうだということで早速インストール。これを使用して投稿の編集画面でショートコードを以下のように記入すれば、とりあえずアイキャッチ画像付きの投稿一覧が表示された。

[[display-posts image_size="thumbnail" posts_per_page="4"]]

↓↓↓ショートコード のパラメータについて参考にしたのはこちらのサイト↓↓↓

 What’s new!! phpを書かなくても新着情報を表示できる３つのプラグインを比較してみました！

ただし、これだけではデザイン的にカッコ悪いのでもうちょっと調べてみることに。

Add css to post プラグインの導入

上記で紹介したページでも記述されていたのだが、スタイルシートでデザインのカスタマイズが可能とのことで、下記のページを参考にしてCSSの変更を試みることに。

[レンタルサーバ等の WordPress] プラグイン「Display Posts Shortcode」をインストールすれば、WordPress.com のショートコード「display-posts」を使えるようだ

スタイルシートの変更については、別の記事で紹介したこのサイトが使用しているFirstというテーマに用意されている「カスタムCSS」を使用しても良かったのだが、個別のページにCSSが追記できる Add css to post というプラグインが便利そうなのでインストールしてみた。下記のページの最後の方に追記でプラグイン化された旨の記載があり、手動インストールだが特に問題なく使用できている。

 WordPressプラグインを使わずに記事ごとにcssを加えられるようにするカスタマイズ

このプラグインを使用して、固定ページ（フロントページ）のCSSに以下の内容を加えた。

.boxline ul.display-posts-listing {

	border: 0px solid #aaaaaa!important;
	margin: 0px!important;
	padding: 0px!important;

	text-align: left!important;
}

.boxline ul.display-posts-listing li {

	border: 1px solid #aaaaaa!important;
	background-color: #ffffe0;

	width: 100%!important;
	max-width: 120px!important;
	height: auto !important;
	min-height: 200px!important;
	margin: 0px 4px 20px!important;
	padding:12px!important;

	text-align: left!important;
	vertical-align: top!important;

	display: inline-block;
	white-space: normal;
	word-wrap: break-word;
	font-size: 13px;
	line-height: 1.2;
}

.boxline ul.display-posts-listing li img {

	border: 1px solid #aaaaaa!important;
	background-color: #ffffff;
	width: 100% !important;
	height: auto !important;
	margin: 0px 0px 16px!important;
	padding: 0px!important;

	display: block!important;
}

そして、変更を加えたCSSを適用させて

<div class="boxline">
[[display-posts image_size="thumbnail" posts_per_page="4"]]
</div>

としたところ、PCでもスマホでもまずまずの表示になったので、ひとまず良しとしておく。