function.phpにアイキャッチ画像の表示サイズを予め複数設定しておくことで、トップページの記事一覧やサイドバーなど、サイズを変えて表示させたい箇所に簡単に呼び出せるようにします。

アイキャッチ画像を使用する時の注意点

アイキャッチ画像は、サイズの設定を行ってからアップロードした画像に対して反映されるようになります。

設定前にアップロードした画像については正しくアイキャッチ画像が表示されませんので、アップロードし直すか、Regenerate Thumbnailsなどのプラグインを使用して画像サイズを再生成する必要があります。

アイキャッチ画像の有効化と設定記述例

function.php

/* アイキャッチ画像の機能を有効化 */
add_theme_support( 'post-thumbnails' );

/* 基本サイズを設定 */
set_post_thumbnail_size( 360, 360 );

/* サイズを複数設定 */
add_image_size( 's-size', 100, 100, true );
add_image_size( 'm-size', 380, 228, true );
add_image_size( 'l-size', 580, 348, true );

呼び出し方（ループ内で使用）

基本サイズの呼び出し

<?php the_post_thumbnail(); ?>

サイズを複数設定したものは(' ')内に名前を入力

<?php the_post_thumbnail('m-size'); ?>

ダッシュボードのメディア設定で指定した画像サイズの呼び出し

<?php the_post_thumbnail('thumbnail'); ?> //サムネイルのサイズ
<?php the_post_thumbnail('medium'); ?> //中サイズ
<?php the_post_thumbnail('large'); ?> //大サイズ
<?php the_post_thumbnail('full'); ?> //フルサイズ

アイキャッチ画像の表示サイズ設定方法

サイズ設定時に入力するパラメータは以下になります。

/* 基本サイズサイズを設定する場合 */
set_post_thumbnail_size( $width, $height, $crop );

/* 複数のサイズを設定する場合 */
add_image_size( '$name', $width, $height, $crop );

各$○○○の箇所に該当する「数値」と「trueかfalse」と「名前」を入れるだけです。

$width

画像の横幅（表示させたいサイズを入力）

$height

画像の高さ（表示させたいサイズを入力）

$crop

画像の縮小方法（trueかfalseを入力、入力しなかった場合はfalseが適用）

true：
元画像の短い方の辺を基準として、縦横比を保ったまま指定したサイズまで縮小し、はみ出した部分は画像の中心を基点に均等に切り取り

false：
元画像の長い方の辺を基準として、縦横比を保ったまま指定したサイズまで縮小

$name

各画像サイズに付ける好きな名前を入力

以上、「WordPress：アイキャッチ画像の表示サイズを複数設定」でした。