- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。（詳細）
テンプレートタグ/the post thumbnail
目次
説明
現在の投稿について、投稿編集画面で設定されたアイキャッチ画像（以前は投稿サムネイルと呼ばれていました）を表示します。
このタグはループ内でのみ使えます。
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()
アイキャッチ画像に投稿へのパーマリンクをつける
例 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 にあります。
外部資料
- Everything you need to know about WordPress 2.9’s post image feature, by JustinTadlock.com
- The Ultimative Guide For the_post_thumbnail In WordPress 2.9, by wpEngineer.com
- New in WordPress 2.9: Post Thumbnail Images, by Mark Jaquith
- Simple WordPress thumbnail function, by Vladimir Prelovac
関連項目
投稿サムネイル: has_post_thumbnail, the_post_thumbnail, get_post_thumbnail_id, get_the_post_thumbnail, add_image_size(), set_post_thumbnail_size()
最新英語版： WordPress Codex » Function Reference/the_post_thumbnail （最新版との差分）
