WordPressテーマ【WorldStar】投稿ページのサムネイル画像をカスタマイズする方法

投稿ページのサムネイル画像をカスタマイズする方法

こんにちは！ウェブナビです。

WordPressの扱いに慣れてきたらカスタマイズしたくなるのが、画像の表示だと思います。
WordPressテーマのWorldStarでサムネイル画像をカスタマイズする方法を例にご紹介していきます。

WorldStarテーマでなくても、参考になる部分はあると思うので、サムネイル画像をカスタマイズしたい方は見てみてください。

WorldStar投稿ページで縦長のサムネイル画像を使用するとどうなるか

WorldStar投稿ページで縦長の画像をサムネイル画像に使ってみます。
縦長の画像をわざわざ使うということは、画像全体が表示されてほしいですよね。

アップロードサイズ: 1500×2250

しかし、WorldStarの場合、トリミングされた画像が表示されてしまいます。

なぜこのようなことになるのでしょうか。
その理由を追っていきたいと思います。

表示された画像の大きさを確認

Chromeの開発者ツールを使い、表示された画像の大きさを確認します。
840×480サイズの画像になっていました。

画像をそんなサイズでアップロードしていないのに、なぜでしょうか。

WorldStar投稿ページのテンプレート

Show Current Templateプラグインを使ってページを見ると、
WorldStar投稿ページのテンプレートは、「single.php」が使われています。

Show Current Template

Show Current Templateプラグイン

single.phpのコードを見る

single.phpのコードを見ると、以下のコードから
「template-partsディレクトリにある、content-single.php」ファイルによって、
記事の表示がされていることがわかります。

get_template_part( 'template-parts/content', 'single' );

content-single.phpのコードを見る

関数の名前と書かれている場所から、以下のコードがサムネイル画像を表示していることがわかります。
どうしてわかるの？という疑問を持つ方もいるかもしれませんが、この辺はコツコツとWPテンプレートタグや関数、PHPを学んでいくとわかるようになりますよ。

worldstar_post_image_single()関数を探す

worldstar_post_image_single()関数を探すと、incフォルダ内、template-tags.phpにありました。
incフォルダには、各テンプレートで使われるオリジナルの関数が入っていることが多いです。

その関数内で、the_post_thumbnail()関数にて、サムネイルの表示がされています。

if ( ! function_exists( 'worldstar_post_image_single' ) ) :
	/**
	 * Displays the featured image on single posts
	 */
	function worldstar_post_image_single() {

		// Get theme options from database.
		$theme_options = worldstar_theme_options();

		// Display Post Thumbnail if activated.
		if ( true === $theme_options['post_image'] ) :

			the_post_thumbnail();

		endif;

	}
endif;

the_post_thumbnailは、WordPressで用意されているテンプレートタグです。
the_post_thumbnailをネット検索してみて、公式サイトがヒットした場合WPテンプレートタグだということがわかります。

上記Codexを見ると、the_post_thumbnailは、引数なしの場合、functions.php内で set_post_thumbnail_size() を使って設定したサイズとなります。

set_post_thumbnail_size()の第3引数で、trueかfalseを設定することにより、画像サイズを切り出すかどうかが決まります。
False – 縦横比を維持して縮小
True – 指定したとおりに切り出す

True – 指定したとおりに切り出す、というのは、functions.phpにて以下のようにサイズ指定されている場合に、その画像サイズに切り出すかどうかということです。

// Set detfault Post Thumbnail size.
set_post_thumbnail_size( 840, 480, true );

つまり、上記のコードにより、サムネイル画像は840×480サイズで切り出した画像を使うよ！と設定されていたのです。

切り出さないように修正

functions.phpにてコードを以下のように修正してみます。

set_post_thumbnail_size( 840, 480, true );
↓
set_post_thumbnail_size( 840, 480, false );

画像も再度アップロードします。これをしないと表示は変わりません。
すると、縦長サイズの画像が表示されました！

画像が大きすぎる場合は、CSS等で調整しましょう。

まとめ

画像を表示しているコードを追って、サムネイル画像の大きさを設定している箇所にたどり着きました。
コードを追う力と、設定を理解する力がつけばWordPressカスタマイズも怖いものなしです。

参考にされてみてください。

こんな記事も読まれています

WordPressでオリジナルデザインのページを作成したい時