【WordPressテンプレートタグ】get_the_post_thumbnail()：アイキャッチ画像を取得

テンプレートタグ

2016.03.24 2016.03.11

概要

アイキャッチ画像のimgタグを取得する。

書式

<?php get_the_post_thumbnail( ‘post_id’, ‘size’, ‘attr’ ); ?>

パラメーター

post_id: 記事ID(初期値：null)

size: サイズ(初期値：post-thumbnail)

attr: imgタグに挿入するalt、titleなどの属性値の指定(初期値：なし)

attrの設定

array(
‘src’ => ‘任意src’, // アイキャッチ画像の URL
‘class’ => ‘任意class’ // クラス名
‘alt’ => ‘任意alt’ // アイキャッチ画像のalt属性
‘title’ => ‘任意title’ // アイキャッチ画像のtitle属性
);

位置

記事IDを指定すれば、ループ外でも使用可能。

使用例

初期設定でアイキャッチ画像を表示(初期値：thumbnail)

<?php echo get_the_post_thumbnail(); ?>

縦横150pxでアイキャッチ画像を表示

<?php echo get_the_post_thumbnail( $page->ID, array(150,150)); ?>

WordPress管理画面「設定」＞「メディアの設定」で、あらかじめ設定しているサイズでアイキャッチ画像を表示

<?php
// ↓サムネイル(初期値：150px x 150px(最大値))
echo get_the_post_thumbnail( $page->ID, 'thumbnail');
// ↓中サイズ(初期値：300px x 300px(最大値))
echo get_the_post_thumbnail( $page->ID, 'medium');
// ↓大サイズ(初期値：640px x 640px(最大値))
echo get_the_post_thumbnail( $page->ID, 'large');
// ↓フルサイズ(オリジナルの画像サイズ)
echo get_the_post_thumbnail( $page->ID, 'full');
?>

アイキャッチ画像のHTMLテキストをclass属性(photo)を指定して取得。

<?php echo get_the_post_thumbnail( $page->ID, 'thumbnail', 'class=photo' ); ?>

もしくは、

<?php echo get_the_post_thumbnail( $page->ID, 'thumbnail', array( 'class'=>'photo' )); ?>

属性値を複数指定するときは後者で。

MEMO

<?php the_post_thumbnail(); ?>はループ内でしか使用できないため、ループ外で使用したいときは<?php echo get_the_post_thumbnail(); ?>を使用する。