Twenty Seventeen サムネイル（アイキャッチ画像）付き記事一覧を表示する方法

トップページを見た時、サイトにどのような記事があるのか一目でわかりやすくするために、サムネイル（アイキャッチ画像）付きの記事一覧を表示するようにテーマTwentySeventeenをカスタマイズしてみましたので、その方法をご紹介します。

Contents

準備
- moreタグで記事本文を抜粋設定にしておく
- 修正するファイルを子テーマに配置しておく
カスタマイズ方法
完成した記事一覧

準備

moreタグで記事本文を抜粋設定にしておく

記事の本文については、続きを読む（moreタグ）を挿入して、抜粋表示するようにしておきます。

プラグインAuto Limit Posts Reloadedを使うと、公開している記事であっても自動で続きを読む（moreタグ）を挿入してくれるので便利ですよ！

CHECK簡単！WordPressで自動で「続きを読む（moreタグ）」を挿入できるプラグイン！

修正するファイルを子テーマに配置しておく

今回修正するのは、以下のPHPファイル４つと、style.cssです。あらかじめ子テーマに配置しておきましょう。

また、失敗しても復元できるように、バックアップを取っておくと良いです。

style.css：フォルダパス　⇒　public_html/wp-content/themes/子テーマ
index.php：フォルダパス　⇒　public_html/wp-content/themes/子テーマ
archive.php：フォルダパス　⇒　public_html/wp-content/themes/子テーマ
search.php：フォルダパス　⇒　public_html/wp-content/themes/子テーマ
content.php：フォルダパス　⇒　public_html/wp-content/themes/子テーマ/template-parts/post/

カスタマイズ方法

それでは、各ファイルの修正内容を書いていきたいと思います。

content.phpの変更

このPHPファイルには、記事本文をどのように構成するのかが書かれています。

まずは、アイキャッチ画像の表示について書かれているコードを移動します。

この対応で、アイキャッチ画像が記事タイトルや日付の前に表示されるようになります。

次に、以下のコードを図で指定した箇所に追加します。この記述は、style.cssの中でアイキャッチ画像の横に記事本文を表示するよう指定する際に必要になります。

<?php 
	if (! is_single() ) :
		echo '<div class="entry-header-content">';
	endif;
?>

<?php

if (! is_single() ) :

echo '<div class="entry-header-content">';

endif;

<?php 
	if (! is_single() ) :
		echo '</div>';
	endif;
?>

<?php

if (! is_single() ) :

echo '</div>';

endif;

index.php、archive.php、search.phpの変更

index.php、archive.php、search.phpの変更を行っていきます。各ページの役割は、ざっくり次のようになっています。

index.php：トップページを表示
archive.php：カテゴリー別、タグ別一覧を表示
search.php：検索結果一覧を表示

ここでの作業は、トップページ記事一覧、カテゴリー一覧、検索一覧などの表示を変更するために必要な作業です。

各ファイルに対して、以下のコードを図で指定した箇所に追加していきます。

<div id="post-list">
echo '<div class="post-entry">';
echo '</div>';
echo '</div>';

echo '<div class="post-entry">';

echo '</div>';

index.phpの場合

archive.phpの場合

search.phpの場合

search.phpは検索結果の一覧表示について書かれているファイルですが、初期設定のままだとアイキャッチ画像が表示されませんので、他の２ファイルへの変更に加えて、get_template_partの引数を一部変更します。

●変更する引数

get_post_format()

1	get_post_format()

style.cssの変更

最後に、cssファイルでデザインの変更を行いました。

アイキャッチ画像を記事の左に表示したり、余白の調整やラインの表示、文字の大きさの変更などを行っています。

以下のコードをstyle.cssの最後に追加します。

※2018年8月2日追記
IE11でデザインが崩れるとのご連絡をいただき、一部修正しました。

.post-thumbnail a img {
width: 100%;
}

を追加することで解消することを確認しております。

#post-list {
	width: 100%;
	overflow: hidden;
	border-top: 0.5px solid #dcdcdc;
	border-bottom: 0.5px solid #dcdcdc;
	border-left: 0;
	border-right: 0;
}

.post-entry {
	width: 100%;
	display: table; 
	vertical-align: top;
	border-top: 0.5px solid #dcdcdc;
	border-bottom: 0.5px solid #dcdcdc;
	border-left: 0;
	border-right: 0;
}

.post-thumbnail {
	display: table-cell;
	width: 50%; /*横2列表示*/
	vertical-align: top;
	padding: 2%;
}

.post-thumbnail a img {
	width: 100%;
}

.entry-header-content {
	display: table-cell;
 	width: 400px; /*記事の半分の幅以上を設定*/
	padding: 2%;
}

#post-list .entry-title {
	font-weight:700;
	font-size: 1em;
}
	
#post-list .entry-content {
	display:none
}

/* 以下、PC タブレット表示の場合 */
@media screen and (min-width: 48em) {

	#post-list .entry-title {
		font-weight:700;
		font-size: 1.5em;
	}
		
	#post-list .entry-content {
		font-size: 1em;
		display: inline;
	}
}

#post-list {

width: 100%;

overflow: hidden;

border-top: 0.5px solid #dcdcdc;

border-bottom: 0.5px solid #dcdcdc;

border-left: 0;

border-right: 0;

}

.post-entry {

width: 100%;

display: table;

vertical-align: top;

border-top: 0.5px solid #dcdcdc;

border-bottom: 0.5px solid #dcdcdc;

border-left: 0;

border-right: 0;

}

.post-thumbnail {

display: table-cell;

width: 50%; /*横2列表示*/

vertical-align: top;

padding: 2%;

}

.post-thumbnail a img {

width: 100%;

}

.entry-header-content {

display: table-cell;

width: 400px; /*記事の半分の幅以上を設定*/

padding: 2%;

}

#post-list .entry-title {

font-weight:700;

font-size: 1em;

}

#post-list .entry-content {

display:none

}

/* 以下、PC タブレット表示の場合 */

@media screen and (min-width: 48em) {

#post-list .entry-title {

font-weight:700;

font-size: 1.5em;

}

#post-list .entry-content {

font-size: 1em;

display: inline;

}

完成した記事一覧

そして、完成した記事の一覧がこちらです！

記事の一覧を見やすく表示することができました！

左側にアイキャッチ画像、右側に日付、タイトル、本文が表示されるスタイルです。本文は、抜粋表示にしておかないと、結局１つの記事がずらずらと表示されてしまうので注意してください。

各記事のアイキャッチ画像の大きさも揃えておくと見やすくて良いと思います。

ちなみに、幅を狭くしていくと、以下の様に、本文が消えるようにカスタマイズしています。

このようにしないと、本文が下にずらずらと表示されてしまって、アイキャッチ画像とのバランスが悪くなったためです。

色々試行錯誤で作成したので、もっとこうした方が良いなどあるかもしれませんが、参考になれば幸いです。

※失敗しても責任は取れませんので、バックアップをお願いします。

カスタマイズ

準備

moreタグで記事本文を抜粋設定にしておく

修正するファイルを子テーマに配置しておく

カスタマイズ方法

content.phpの変更

index.php、archive.php、search.phpの変更

index.phpの場合

archive.phpの場合

search.phpの場合

style.cssの変更

完成した記事一覧

Twenty Seventeen 「投稿」と「投稿者」という文字を非表示にする方法

WordPress Twenty Seventeen 背景色の変更方法を分かり易く説明します！

WordPressテーマ Twenty Seventeenカスタマイズまとめ