• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

テンプレートタグ/the post thumbnail

提供: WordPress Codex 日本語版
移動先: 案内検索

現在の投稿について、投稿編集画面で設定されたアイキャッチ画像(以前は投稿サムネイルと呼ばれていました)を表示します。

このタグはループ内でのみ使えます。

get_the_post_thumbnail() を利用することにより、他の投稿のアイキャッチ画像を表示できます。

has_post_thumbnail() タグを使用することにより、アイキャッチ画像が投稿に追加されているかどうかをチェックすることができます。

アイキャッチ画像を有効にするには、使用しているテーマの functions.php ファイルadd_theme_support( 'post-thumbnails' ); を追加する必要があります。投稿サムネイルも参照してください。

使い方

<?php the_post_thumbnail( $size, $attr ); ?>

パラメータ

$size
文字列 | 配列) (オプション) 画像サイズ。キーワード(thumbnail, medium, large, full)、または add_image_size() で定義したカスタムサイズのキーワード、もしくは幅と高さをピクセルで指定する要素 2 つの配列、例えば array( 32, 32 )
初期値: 'post-thumbnail' – テーマ(の functions.php)内で set_post_thumbnail_size() を使って設定したサイズ。

注意: トリミング(crop)は WordPress 3.0 以上では動作しません。WordPress 3.0 以上では、まず、投稿にアイキャッチ画像を指定します。そしてダッシュボード内の「メディア」に進み、画像を使用したいサイズにトリミングしてください。

$attr
配列) (オプション) アイキャッチ画像を表示する HTML の img タグに含める属性/値を配列で記述。詳細は the_post_thumbnail が依存している wp_get_attachment_image() を参照。
初期値: なし

$attr のデフォルトは下記のとおりです。

$default_attr = array(
	'src'   => $src,
	'class' => "attachment-$size",
	'alt'   => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) )
);

参考: これらの属性は自動的にエスケープされます。内部で呼び出される wp_get_attachment_image が行うので、関数を呼び出すときに自分で esc_attr() を使う必要はありません。

用例

デフォルトの使い方

<?php 
if ( has_post_thumbnail() ) { // 投稿にアイキャッチ画像が割り当てられているかチェックします。
	the_post_thumbnail();
} 
?>
<?php the_content(); ?>


参考: PHP の値としてアイキャッチ画像を取得したい場合は get_the_post_thumbnail() を使用してください。

画像サイズ

WordPress のデフォルトの画像サイズは 'thumbnail', 'medium', 'large', 'full'(アップロードした画像のサイズ)です。これらの画像サイズは WordPress の管理画面の 設定 > メディア で設定することができます。

以下は the_post_thumbnail() タグでデフォルトの画像サイズを使用する方法です。

the_post_thumbnail();                     // パラメータなし -> 'post-thumbnail'
 
the_post_thumbnail( 'thumbnail' );        // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail( 'medium' );           // 中サイズ   (デフォルト 300px x 300px :最大値)
the_post_thumbnail( 'large' );            // 大サイズ   (デフォルト 640px x 640px :最大値)
the_post_thumbnail( 'full' );             // フルサイズ (アップロードした画像の元サイズ)
 
the_post_thumbnail( array( 100, 100 ) );  // 他のサイズ

アイキャッチ画像の新しいサイズを登録するには: add_image_size()

アイキャッチ画像のデフォルトのサイズを設定したい場合: set_post_thumbnail_size()

アイキャッチ画像に投稿へのパーマリンクをつける

注意: 同じテーマ内で以下の 2 つの例を同時に使用しないでください。

例 1: 特定のループ内でアイキャッチ画像に投稿へのパーマリンクをつけるには、テーマ内で下記を使用してください。

<?php if ( has_post_thumbnail() ) : ?>
	<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
	<?php the_post_thumbnail(); ?>
	</a>
<?php endif; ?>

例 2: 自分の Web サイト内のすべてのアイキャッチ画像に投稿へのパーマリンクをつけるには、現在利用しているテーマの functions.php ファイルへ下記を加えてください。

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );

function my_post_image_html( $html, $post_id, $post_image_id ) {
	$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
	return $html;
}

アイキャッチ画像に大きな画像へのパーマリンクをつける

この例は「large」の画像サイズにリンクします。ループ内で使用する必要があります。

<?php 
if ( has_post_thumbnail() ) {
	$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
	echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute( 'echo=0' ) . '">';
	the_post_thumbnail( 'thumbnail' );
	echo '</a>';
}
?>

アイキャッチ画像のスタイル指定

アイキャッチ画像には「wp-post-image」というクラスが付加されています。さらに、表示されている画像のサイズに応じたクラスも付加されます。これを利用して、次のような CSS セレクターで出力のスタイルを指定することができます。

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

アイキャッチ画像に独自のクラスを設定することもできます。下記はクラス「alignleft」を追加する方法です。

<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) ); ?>

変更履歴

  • 2.9.0 : 新規テンプレートタグ

ソースファイル

the_post_thumbnail()wp-includes/post-thumbnail-template.php にあります。

外部資料

投稿サムネイル: has_post_thumbnail, the_post_thumbnail, get_post_thumbnail_id, get_the_post_thumbnail, add_image_size(), set_post_thumbnail_size()


テンプレートタグへの PHP 関数型パラメータの渡し方関数リファレンステンプレートタグ目次もご覧ください。


最新英語版: WordPress Codex » Function Reference/the_post_thumbnail最新版との差分