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

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

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

提供: WordPress Codex 日本語版
< テンプレートタグ
2015年7月7日 (火) 09:31時点におけるMiccweb (トーク | 投稿記録)による版 (画像サイズ: 最新のマージ)

移動先: 案内検索

説明

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

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

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) または幅と高さをピクセルで指定する要素 2 つの配列、例えば array(32,32)。
初期値: テーマ内(の functions.php)で set_post_thumbnail_size /en( $width, $height, $crop_flag ); でpost-thumbnailに設定した値。

注意: トリミング(crop)はWP 3.0以上では動作しません。WP3.0以上では、まず、投稿においてサムネイルを指定することが必要です。その後、ダッシュボード内の「メディア」に進み、サムネイルを使用したいサイズにトリミングしてください。

$attr
配列) (任意) 属性/値を配列で記述。詳細はwp_get_attachment_imageの依存関係にあるthe_post_thumbnailのソースを参照
初期値: なし
$default_attr = array(
	'src'   => $src,
	'class' => "attachment-$size",
	'alt'   => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) )
);

Note that these attributes will be automatically escaped within the internal call to wp_get_attachment_image - you do not need to esc_attr() the attributes you pass to this function.

用例

デフォルトの使用例

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


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

画像サイズ

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

以下は 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() /en

投稿サムネイルに投稿へのパーマリンクをつける

注意:同じテーマ内で以下の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」の画像サイズにリンクし、The Loop内で使用する必要があります。

<?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 selectorsを利用し出力のスタイルを設定することができます:

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 : 新規テンプレートタグ

ソースファイル

外部資料

最新英語版: WordPress Codex » Template Tags/the_post_thumbnail最新版との差分

関連

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


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