【WordPress】アイキャッチ画像を取得・表示する方法|get_the_post_thumbnail()

今回は、WordPressのアイキャッチ画像を取得して表示する方法となります。

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

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

add_theme_support( 'post-thumbnails' );

アイキャッチ画像を取得し表示する例|get_the_post_thumbnail()

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

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で追加した画像サイズの名前を指定します。また、幅と高さ(ピクセル単位)を配列で指定することも可能。省略した場合はpost-thumbnailとなり、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フルサイズ

上記の4つのサイズは、画像を管理画面からアップロードした際に追加される画像サイズとなります。

「サムネイルのサイズ」「中サイズ」「大サイズ」の画像サイズは、管理画面の「設定」>「メディア」から設定できます。詳しくは、以下のリンク先を参考にしてみてください。

画像サイズを追加したい場合

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

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。