【WordPress】画像サイズの設定方法と、アイキャッチ画像を取得・表示する例

今回は、WordPressのアイキャッチ画像などで使用する画像サイズを設定する方法と、アイキャッチ画像を取得して表示する方法となります。

アップロードした際に追加される画像のサイズを設定する方法

画像のアップロードについて

WordPressでは、アイキャッチ画像などで使用する画像を、管理画面の「メディア」>「新規追加」からアップロードすると、4つ画像サイズがセットされ使用できるようになります。

セットされる画像は「フルサイズ」の画像と、アップロードした際に自動で追加される「サムネイルのサイズ」「中サイズ」「大サイズ」の画像となります。

画像のサイズを設定する方法

アップロードした際に追加される「サムネイルのサイズ」「中サイズ」「大サイズ」の画像のサイズは、幅・高さの上限を、管理画面の「設定」>「メディア」から設定できます。

管理画面の「設定」>「メディア」のメディア設定画面
管理画面の「設定」>「メディア」のメディア設定画面。自動で追加される画像「サムネイルのサイズ」「中サイズ」「大サイズ」の幅・高さの上限を設定できます。

アイキャッチ画像を取得|get_the_post_thumbnail()

アイキャッチ画像を有効にする方法

WordPressのデフォルトテーマTwenty Seventeenなど、アイキャッチ画像はじめから有効となっているテーマは多いと思いますが、有効になっていない場合には以下の関数をfunctions.phpに記述します。

add_theme_support( 'post-thumbnails' );

アイキャッチ画像を取得して出力する例

以下のソースコードは、現在の投稿のアイキャッチ画像(フルサイズ)を出力する例となり、画像を表示したい箇所に記述します。

echo get_the_post_thumbnail( 'full' );

アイキャッチ画像の取得する関数はいくつかありますが、今回の例では、img要素でアイキャッチ画像を取得するget_the_post_thumbnail()を使用しました。

また、指定したサイズのアイキャッチ画像を取得するには、引数に画像サイズ名を指定します。

パラメータ

get_the_post_thumbnail関数のパラメータでは、画像サイズ名やimg 要素の属性などを指定します。パラメータの詳細は以下となります。

get_the_post_thumbnail( $post_id, $size, $attr );
$post_id(省略可)
出力したいアイキャッチ画像の投稿のID。省略した場合は現在の投稿
$size(省略可)
デフォルトで設定されている画像サイズの名前(thumbnail, medium, large, full)を指定するか、 関数add_image_sizeで追加した画像サイズの名前を指定します。また、幅と高さ(ピクセル単位)を配列で指定することも可能。省略した場合はfunctions.php内で 関数set_post_thumbnail_sizeを使って設定したサイズとなります。
$attr(省略可)
 img 要素の属性を配列で指定。省略した場合は下記のデフォルトの値となります。
$attr = array(
  'src'   => $src, 
  // $srcはアイキャッチ画像のURL
  'class' => "attachment-$size" "size-$size" "wp-post-image" ,
  // $sizeは画像サイズの名前
  'alt' => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ))),
  // 設定したアイキャッチ画像の代替テキスト
);

画像サイズ名について

get_the_post_thumbnailなど、画像を取得する関数で、引数に画像サイズ名を指定してアイキャッチ画像を取得する場合、デフォルトで引数に指定できる画像サイズ名は、画像をアップロードした際にセットされる以下の4つとなります。

画像サイズ名 画像サイズ
thumbnail サムネイルのサイズ
medium 中サイズ
large 大サイズ
full フルサイズ

「サムネイルのサイズ」「中サイズ」「大サイズ」の画像サイズは、前述のとおり管理画面の「設定」>「メディア」から設定したサイズとなります。

また、上記以外に画像サイズを追加したい場合には、add_image_size関数を使用する方法があります。詳しくは以下のリンク先を参考にしてみてください。

参考サイト、参考書籍

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はコチラから。