当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「テンプレートタグ/the post thumbnail」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(投稿サムネイルに大きな画像へのパーマリンクをつける: 最新のマージ)
(パラメータ: $sizeの型を修正。)
 
(2人の利用者による、間の3版が非表示)
1行目: 1行目:
{{テンプレートタグガイド|PHP}}
+
<div id="Description">
 
== 説明 ==
 
== 説明 ==
 +
</div>
  
投稿編集画面で設定すると、その投稿のアイキャッチ画像(以前は[[投稿サムネイル]]と呼ばれていました)を表示します。
+
現在の投稿について、投稿編集画面で設定されたアイキャッチ画像(以前は[[投稿サムネイル]]と呼ばれていました)を表示します。
  
 
このタグは[[ループ]]内でのみ使えます。
 
このタグは[[ループ]]内でのみ使えます。
  
[[テンプレートタグ/get_the_post_thumbnail | get_the_post_thumbnail()]]タグを利用することにより、他の投稿のアイキャッチ画像を表示できます。
+
[[テンプレートタグ/get_the_post_thumbnail | get_the_post_thumbnail()]] を利用することにより、他の投稿のアイキャッチ画像を表示できます。
  
[[テンプレートタグ/has_post_thumbnail | has_post_thumbnail()]]タグを使用することにより、アイキャッチ画像が投稿に追加されているかどうかをチェックすることができます。
+
[[テンプレートタグ/has_post_thumbnail | has_post_thumbnail()]] タグを使用することにより、アイキャッチ画像が投稿に追加されているかどうかをチェックすることができます。
  
投稿サムネイルを有効にするには、使用しているテーマの [[テーマの作成#Theme Functions File|<tt>functions.php</tt> ファイル]]に <code>add_theme_support( 'post-thumbnails' );</code> を追加する必要があります。[[Post Thumbnails|投稿サムネイル]]も参照してください。
+
アイキャッチ画像を有効にするには、使用しているテーマの [[テーマの作成#Functions_File|<tt>functions.php</tt> ファイル]]に <code>add_theme_support( 'post-thumbnails' );</code> を追加する必要があります。[[Post Thumbnails|投稿サムネイル]]も参照してください。
  
 +
<div id="Usage">
 
== 使い方 ==
 
== 使い方 ==
 +
</div>
  
 
  <?php the_post_thumbnail( $size, $attr ); ?>
 
  <?php the_post_thumbnail( $size, $attr ); ?>
  
== パラメータ ==<!-- Parameters -->
+
<div id="Parameters">
 +
== パラメータ ==
 +
</div>
  
{{Parameter|$size|整数/配列|画像サイズ。明示的に指定するときはキーワード(thumbnail, medium, large, full) または幅と高さをピクセルで指定する要素 2 つの配列、例えば array(32,32)。|任意|テーマ内(の functions.php)で  <code>[[関数リファレンス/set_post_thumbnail_size|set_post_thumbnail_size]] /[[:en:Function Reference/set_post_thumbnail_size|en]]( $width, $height, $crop_flag );</code> でpost-thumbnailに設定した値。}}
+
{{Parameter|$size|文字列 &#124; 配列|画像サイズ。キーワード(<tt>thumbnail</tt>, <tt>medium</tt>, <tt>large</tt>, <tt>full</tt>)、または [[関数リファレンス/add image size|<tt>add_image_size()</tt>]] で定義したカスタムサイズのキーワード、もしくは幅と高さをピクセルで指定する要素 2 つの配列、例えば <code>array( 32, 32 )</code>。|オプション|<tt>'post-thumbnail'</tt> &ndash; テーマ(の functions.php)内で [[関数リファレンス/set_post_thumbnail_size|<tt>set_post_thumbnail_size()</tt>]] を使って設定したサイズ。}}
  
注意: トリミング(crop)はWP 3.0以上では動作しません。WP3.0以上では、まず、投稿においてサムネイルを指定することが必要です。その後、ダッシュボード内の「メディア」に進み、サムネイルを使用したいサイズにトリミングしてください。
+
注意: トリミング(crop)は WordPress 3.0 以上では動作しません。WordPress 3.0 以上では、まず、投稿にアイキャッチ画像を指定します。そしてダッシュボード内の「メディア」に進み、画像を使用したいサイズにトリミングしてください。
 
+
{{Parameter|$attr|配列|属性/値を配列で記述。詳細は<code>wp_get_attachment_image</code>の依存関係にある<code>the_post_thumbnail</code>のソースを参照|任意}}
+
  
 +
{{Parameter|$attr|配列|アイキャッチ画像を表示する HTML の img タグに含める属性/値を配列で記述。詳細は <tt>the_post_thumbnail</tt> が依存している [[テンプレートタグ/wp_get_attachment_image|<tt>wp_get_attachment_image()</tt>]] を参照。|オプション}}
 +
$attr のデフォルトは下記のとおりです。
 
<pre>
 
<pre>
 
$default_attr = array(
 
$default_attr = array(
32行目: 37行目:
 
</pre>
 
</pre>
  
Note that these attributes will be automatically escaped within the internal call to <code>wp_get_attachment_image</code> - you do not need to <code>esc_attr()</code> the attributes you pass to this function.
+
参考: これらの属性は自動的にエスケープされます。内部で呼び出される <tt>wp_get_attachment_image</tt> が行うので、関数を呼び出すときに自分で <tt>esc_attr()</tt> を使う必要はありません。
  
 +
<div id="Examples">
 
== 用例 ==
 
== 用例 ==
 +
</div>
  
=== デフォルトの使用例 ===
+
<div id="Default_Usage">
 +
=== デフォルトの使い方 ===
 +
</div>
  
 
<pre>
 
<pre>
48行目: 57行目:
  
  
'''注意:'''PHPの値としてアイキャッチ画像を取得したい場合は、[[テンプレートタグ/get_the_post_thumbnail | get_the_post_thumbnail()]]を使用してください。
+
'''参考:''' PHP の値としてアイキャッチ画像を取得したい場合は [[テンプレートタグ/get_the_post_thumbnail|get_the_post_thumbnail()]] を使用してください。
  
=== 画像サイズ ===<!-- Thumbnail Sizes  -->
+
<div id="Thumbnail_Sizes">
 +
=== 画像サイズ ===
 +
</div>
  
WordPressのデフォルトの画像サイズは「thumbnail」「medium」「large」「full (アップロードした画像のサイズ)」です。
+
WordPress のデフォルトの画像サイズは <tt>'thumbnail'</tt>, <tt>'medium'</tt>, <tt>'large'</tt>, <tt>'full'</tt>(アップロードした画像のサイズ)です。これらの画像サイズは WordPress の管理画面の [[管理画面/メディア設定|設定 &gt; メディア]] で設定することができます。
これらの画像サイズはWordPressの管理画面の [[Settings_Media_SubPanel]] のメディア設定画面で設定することができます。
+
  
 
以下は the_post_thumbnail() タグでデフォルトの画像サイズを使用する方法です。
 
以下は the_post_thumbnail() タグでデフォルトの画像サイズを使用する方法です。
  
 
<pre>
 
<pre>
the_post_thumbnail();                 // パラメータなし -> 'post-thumbnail'サムネイル
+
the_post_thumbnail();                     // パラメータなし -> 'post-thumbnail'
 
   
 
   
the_post_thumbnail( 'thumbnail' );       // サムネイル (デフォルト 150px x 150px :最大値)
+
the_post_thumbnail( 'thumbnail' );       // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail( 'medium' );         // 中サイズ (デフォルト 300px x 300px :最大値)
+
the_post_thumbnail( 'medium' );           // 中サイズ  (デフォルト 300px x 300px :最大値)
the_post_thumbnail( 'large' );           // 大サイズ (デフォルト  640px x 640px :最大値)
+
the_post_thumbnail( 'large' );           // 大サイズ  (デフォルト 640px x 640px :最大値)
the_post_thumbnail( 'full' );           // フルサイズ (アップロードした画像の元サイズ)
+
the_post_thumbnail( 'full' );             // フルサイズ (アップロードした画像の元サイズ)
 
   
 
   
the_post_thumbnail( array(100, 100) );  // 他のサイズ
+
the_post_thumbnail( array( 100, 100 ) );  // 他のサイズ
 
</pre>
 
</pre>
  
投稿サムネイルの新しい画像サイズを登録したい場合: [[関数リファレンス/add_image_size|add_image_size()]]
+
アイキャッチ画像の新しいサイズを登録するには: [[関数リファレンス/add_image_size|add_image_size()]]
  
投稿サムネイルのデフォルトのサイズを設定したい場合:[[関数リファレンス/set_post_thumbnail_size|set_post_thumbnail_size()]] /[[:en:Function_Reference/set_post_thumbnail_size|en]]
+
アイキャッチ画像のデフォルトのサイズを設定したい場合: [[関数リファレンス/set_post_thumbnail_size|set_post_thumbnail_size()]]
  
=== 投稿サムネイルに投稿へのパーマリンクをつける ===
+
=== アイキャッチ画像に投稿へのパーマリンクをつける ===
  
'''注意:'''同じテーマ内で以下の2例を同時に使用しないでください。
+
<div class="information">'''注意:''' 同じテーマ内で以下の 2 つの例を同時に使用しないでください。</div>
  
例1)
+
例 1: '''特定のループ'''内でアイキャッチ画像に投稿へのパーマリンクをつけるには、テーマ内で下記を使用してください。
'''特定のループ'''内で投稿サムネイルに投稿へのパーマリンクをつけたい場合は、テーマ内で下記を使用してください。
+
  
 
<pre>
 
<pre>
84行目: 93行目:
 
<?php the_post_thumbnail(); ?>
 
<?php the_post_thumbnail(); ?>
 
</a>
 
</a>
<?php endif; ?></pre>
+
<?php endif; ?>
 +
</pre>
  
例2)
+
例 2: 自分の Web サイト内の'''すべてのアイキャッチ画像'''に投稿へのパーマリンクをつけるには、現在利用しているテーマの [[テーマの作成#Functions_File|functions.php]] ファイルへ下記を加えてください。
'''すべての投稿サムネイル'''に自身のWebサイトへのパーマリンクをつけたい場合は、現在利用しているテーマの[[Theme_Development#Functions_File|functions.php]]に下記を加えてください。
+
  
 
<pre>add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
 
<pre>add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
94行目: 103行目:
 
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
 
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
 
return $html;
 
return $html;
}</pre>
+
}
 +
</pre>
  
=== 投稿サムネイルに大きな画像へのパーマリンクをつける ===
+
=== アイキャッチ画像に大きな画像へのパーマリンクをつける ===
  
この例は「large」の画像サイズにリンクし、[[The Loop]]内で使用する必要があります。
+
この例は「large」の画像サイズにリンクします。[[ループ]]内で使用する必要があります。
  
 
<pre>
 
<pre>
108行目: 118行目:
 
echo '</a>';
 
echo '</a>';
 
}
 
}
?></pre>
+
?>
 +
</pre>
  
=== 投稿サムネイルのスタイル ===
+
=== アイキャッチ画像のスタイル指定 ===
  
投稿サムネイルには「wp-post-image」というクラスが付加されています。そのクラスは表示されている画像のサイズに依存しています。
+
アイキャッチ画像には「wp-post-image」というクラスが付加されています。さらに、表示されている画像のサイズに応じたクラスも付加されます。これを利用して、次のような [[用語集#CSS|CSS セレクター]]で出力のスタイルを指定することができます。
[[Glossary#CSS|CSS selectors]]を利用し出力のスタイルを設定することができます:
+
  
 
  img.wp-post-image
 
  img.wp-post-image
121行目: 131行目:
 
  img.attachment-full
 
  img.attachment-full
  
投稿サムネイルに独自のクラスを設定することもできます。
+
アイキャッチ画像に独自のクラスを設定することもできます。下記はクラス「alignleft」を追加する方法です。
下記は「alignleft」をクラスに追加する方法です。
+
  
<pre><?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?></pre>
+
<pre><?php the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) ); ?></pre>
  
== 変更履歴 ==<!-- Changelog -->
+
<div id="Change_Log">
 +
== 変更履歴 ==
 +
</div>
  
 
* [[Version 2.9|2.9.0]] : 新規テンプレートタグ
 
* [[Version 2.9|2.9.0]] : 新規テンプレートタグ
  
== ソースファイル ==<!-- Source File -->
+
<div id="Source_File">
 +
== ソースファイル ==
 +
</div>
  
* {{Trac|wp-includes/post-thumbnail-template.php}}
+
<tt>the_post_thumbnail()</tt> は {{Trac|wp-includes/post-thumbnail-template.php}} にあります。
  
== 外部資料 ==<!-- External Resources -->
+
<div id="External_Resources">
 +
== 外部資料 ==
 +
</div>
  
* [http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature Everything you need to know about WordPress 2.9’s post image feature], by JustintAdlock.com
+
* [http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature Everything you need to know about WordPress 2.9’s post image feature], by JustinTadlock.com
 
* [http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/ The Ultimative Guide For the_post_thumbnail In WordPress 2.9], by wpEngineer.com
 
* [http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/ The Ultimative Guide For the_post_thumbnail In WordPress 2.9], by wpEngineer.com
 +
* [http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/ New in WordPress 2.9: Post Thumbnail Images], by Mark Jaquith
 +
* [http://www.prelovac.com/vladimir/simple-wordpress-thumbnail-function Simple WordPress thumbnail function], by Vladimir Prelovac
  
{{原文|Template Tags/the_post_thumbnail|143631}}<!-- 09:34, 9 April 2010 Mizuno 版 -->
+
<div id="Related">
 
+
== 関連項目 ==
== 関連 ==
+
</div>
  
 
{{Post Thumbnail Tags}}
 
{{Post Thumbnail Tags}}
  
 
{{PHP Function Tag Footer}}
 
{{PHP Function Tag Footer}}
 +
 +
{{原文|Function Reference/the_post_thumbnail|151756}}<!-- 01:41, 22 May 2015 Bijibuji 版 -->
  
 
{{DEFAULTSORT:The_post_thumbnail}}
 
{{DEFAULTSORT:The_post_thumbnail}}
 
[[Category:wp2.9]]
 
[[Category:wp2.9]]
  
[[en:Template Tags/the_post_thumbnail]]
+
[[en:Function Reference/the_post_thumbnail]]

2015年8月10日 (月) 20:39時点における最新版

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

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

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最新版との差分