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

この項目「テンプレートタグ/get the post thumbnail」は、翻訳チェック待ちの項目です。加筆、訂正などを通して、Codex ドキュメンテーションにご協力下さい。

説明

投稿やページの編集画面で設定することができる（以前は投稿サムネイル画像と呼ばれていた）アイキャッチ画像を取得します。このタグは、設定されていればアイキャッチ画像を出力する HTML 画像エレメントを返し、設定されていなければ空文字列を返します。

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

使い方

<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>

パラメータ

$post_id

（整数） （オプション） 投稿 ID

初期値： 現在の投稿

$size

（文字列 | 配列） （オプション） 画像サイズ。キーワード（thumbnail, medium, large, full）、または add_image_size() で定義したカスタムサイズのキーワード、もしくは幅と高さをピクセルで指定する要素 2 つの配列、例えば array( 32, 32 )。

初期値： 'post-thumbnail' – テーマ（の functions.php）内で set_post_thumbnail_size() を使って設定したサイズ。

$attr

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

初期値： なし

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

$default_attr = array(
  'src'   => $src,	// アイキャッチ画像の URL
  'class' => "attachment-$size",	// 指定した大きさ
  'alt'   => trim( strip_tags( $attachment->post_excerpt ) ),	// アイキャッチ画像の抜粋
  'title' => trim( strip_tags( $attachment->post_title ) ),	// アイキャッチ画像のタイトル
);

戻り値

HTML 画像エレメントを含む文字列。アイキャッチ画像が見つからなければ空文字列。

用例

サンプル

<?php $pages = get_pages( array( 'child_of' => 1 ) ); ?> 
<ul>
  <?php foreach ( $pages as $page ) : ?>
    <li>
      <?php echo get_the_post_thumbnail( $page->ID, 'thumbnail' ); ?>
      <h1><?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?></h1>
      <?php echo apply_filters( 'the_content', $page->post_content ); ?>
    </li>
  <?php endforeach; ?>
</ul>

アイキャッチ画像の大きさ

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() を使います。

投稿パーマリンク付きアイキャッチ画像

この例は最新から 5 つのアイキャッチ画像に投稿へのパーマリンクをつけて表示します。

<?php 
$thumbnails = get_posts( 'numberposts=5' );
foreach ( $thumbnails as $thumbnail ) {
  if ( has_post_thumbnail( $thumbnail->ID ) ) {
    echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
    echo get_the_post_thumbnail( $thumbnail->ID, 'thumbnail' );
    echo '</a>';
  }
}
?>

大きな画像へのリンク付きアイキャッチ画像

この例は "large" サイズのアイキャッチ画像へのリンクをつけます。ループ内で使う必要があります。

<?php 
if ( has_post_thumbnail() ) {
  $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
  echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute( 'echo=0' ) . '" >';
  echo get_the_post_thumbnail( $post->ID, '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 echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' => 'alignleft' ) ); ?>

参考

テーマの functions.php/en ファイルに含む必要のある add_theme_support( 'post-thumbnails' ); をフックに登録する場合は、init フックよりも先に呼び出す必要があります。一部の機能に関して、init/en は遅すぎます。フックするなら after_setup_theme/en でなければなりません。

変更履歴

• 2.9.0 : 新規導入

ソースファイル

get_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

関連資料

wp_get_attachment_image_src

投稿サムネイル: 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/get_the_post_thumbnail （最新版との差分）