Twenty Seventeen 投稿ページのアイキャッチ画像やタイトルの表示位置を変更し、見やすくする方法

WordPressのテーマ「Twenty Seventeen」の投稿ページは、画像サイズを調整しないと、以下の様にデカデカとアイキャッチ画像が表示されてしまいます。

投稿記事に対してアイキャッチ画像が主張しすぎですよね。

今回は、アイキャッチ画像の位置を変更することで、投稿記事とアイキャッチ画像サイズのバランスを取り、見やすくする方法を掲載したいと思います。

また、これに合わせて、記事タイトルの位置なども変更してみましたので、その内容も掲載します。

今回説明する内容を適用すると、以下のイメージになります。

投稿日・タイトル・アイキャッチ画像・本文の順番に表示され、アイキャッチ画像サイズを手動で変更しなくても本文と同じ表示幅になります。

Contents

準備
アイキャッチ画像の表示位置の変更
- header.phpの変更
- single.phpの変更
投稿記事タイトル・投稿日の表示位置の変更
- content.phpの変更
- single.phpの変更
デザインの変更

準備

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

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

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

アイキャッチ画像の表示位置の変更

まずは、アイキャッチ画像の表示位置を変更する際の各ファイルの修正内容を書いていきます。

header.phpの変更

投稿ページにでかでかと表示されるアイキャッチ画像は、header.phpファイルに記載されています。

思い切って、アイキャッチ画像を表示する以下のコードを削除してしまいましょう。

※バックアップを取ることを忘れずに。

single.phpの変更

single.phpに、先ほど削除したコードをそのまま追加します。

追加するコードは以下のコードです。

<?php

/*
 * If a regular post or page, and not the front page, show the featured image.
 * Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
 */
if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
	echo '<div class="single-featured-image-header">';
	echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
	echo '</div><!-- .single-featured-image-header -->';
endif;
?>

<?php

* If a regular post or page, and not the front page, show the featured image.

* Using get_queried_object_id() here since the $post global may not be set before a call to the_post().

if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :

echo '<div class="single-featured-image-header">';

echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );

echo '</div>';

endif;

以下の場所に追加します。

以上で、アイキャッチ画像の表示位置の変更は終わりです。

投稿記事タイトル・投稿日の表示位置の変更

次に、投稿記事タイトルと投稿日の表示位置を変更する際の、各ファイルの修正内容を書いていきます。

content.phpの変更

まずは、投稿ページに表示される投稿記事のタイトルや投稿日を削除します。

※既に若干のカスタマイズしているので、ファイルの内容は皆さんのファイルとは異なると思います。

single.phpの変更

single.phpに、投稿タイトルと投稿記事を表示するコードを追加します。

追加するコードは以下のコードです。

<?php 
if ( is_single() ) {
	echo '<div class="entry-meta">';
		twentyseventeen_posted_on();
	echo '</div><!-- .entry-meta -->';
	the_title( '<h1 class="entry-title">', '</h1>' );
};
?>

<?php

if ( is_single() ) {

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

twentyseventeen_posted_on();

echo '</div>';

the_title( '<h1 class="entry-title">', '</h1>' );

};

以下の場所に追加します。

以上で、投稿日、投稿タイトルの表示位置の変更は終わりです。

デザインの変更

最後に、style.cssに以下のコードを追加し、デザインを調整しました。

/* 投稿ページを整える */
.site-content {
	padding: 2em 0 0;/* 余白調整 */
}
.single-featured-image-header{
	padding: 0 0 1em;/* 画像下余白調整 */
	border-bottom:none;
	background-color:#fff;
}