【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関数を使用する方法があります。詳しくは以下のリンク先を参考にしてみてください。