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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(使い方の例にショートオープンタグが含まれていたので変更)
(functions.phpリンク切れ、および誤訳の修正。)
 
(5人の利用者による、間の24版が非表示)
1行目: 1行目:
{{テンプレートタグガイド|PHP}}
+
{{CheckTrans}}
== 説明 ==<!-- Description -->
+
  
投稿記事/ページ編集画面で設定した投稿サムネイルを取得します。サムネイル画像には、クラス "attachment-thumbnail" が付与されます。
+
<div id="Description">
 +
== 説明 ==
 +
</div>
  
== 使い方 ==<!-- Usage -->
+
投稿やページの編集画面で設定することができる(以前は投稿サムネイル画像と呼ばれていた)アイキャッチ画像を取得します。このタグは、設定されていればアイキャッチ画像を出力する HTML 画像エレメントを返し、設定されていなければ空文字列を返します。
  
<?php echo get_the_post_thumbnail( $id, $size, $attr ); ?>
+
'''参考:''' アイキャッチ画像を有効にするには、<code>[[関数リファレンス/add theme support|add_theme_support]]( 'post-thumbnails' );</code> をテーマの <tt>[[テーマの作成#Functions_File|functions.php]]</tt>/[[:en:Theme_Development#Functions_File|en]] ファイルに含む必要があります。[[投稿サムネイル]]も見てください。
  
== パラメータ ==<!-- Parameters -->
+
<div id="Usage">
 +
== 使い方 ==
 +
</div>
  
{{Parameter|$id|整数|投稿 ID.|必須}}
+
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
{{Parameter|$size|整数|画像サイズ|オプション|'thumbnail'}}
+
{{Parameter|$attr|整数||オプション}}
+
  
== 用例 ==<!-- Examples -->
+
<div id="Parameters">
 
+
== パラメータ ==
=== 使い方の例 ===<!-- Sample Usage -->
+
</div>
  
 +
{{Parameter|$post_id|整数|投稿 ID|オプション|現在の投稿}}
 +
{{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>]] を使って設定したサイズ。}}
 +
{{Parameter|$attr|配列|アイキャッチ画像を表示する HTML の img タグに含める属性/値を配列で記述。詳細は <tt>the_post_thumbnail</tt> が依存している [[テンプレートタグ/wp_get_attachment_image|<tt>wp_get_attachment_image()</tt>]] を参照。|オプション}}
 +
$attr のデフォルトは下記のとおりです。
 
<pre>
 
<pre>
<?php $pages = get_pages(array('child_of' => 1)); ?>
+
$default_attr = array(
<ul>
+
  'src'   => $src, // アイキャッチ画像の URL
<?php foreach ($pages as $page): ?>
+
  'class' => "attachment-$size", // 指定した大きさ
<li>
+
  'alt'  => trim( strip_tags( $attachment->post_excerpt ) ), // アイキャッチ画像の抜粋
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?>
+
  'title' => trim( strip_tags( $attachment->post_title ) ), // アイキャッチ画像のタイトル
<h1><?php echo $page->post_title?></h1>
+
);
<?php echo $page->post_content?>
+
</li>
+
<?php endforeach; ?>
+
</ul>
+
 
</pre>
 
</pre>
  
=== オプション ===<!-- More Options -->
+
<div id="Return_Values">
 +
== 戻り値 ==
 +
</div>
  
get_the_post_thumbnail($id);                 // パラメータなし -> サムネイル
+
HTML 画像エレメントを含む文字列。アイキャッチ画像が見つからなければ空文字列。
 +
 
 +
<div id="Examples">
 +
== 用例 ==
 +
<div>
 +
 
 +
<div id="Sample_Usage">
 +
=== サンプル ===
 +
<div>
 +
 
 +
<pre><nowiki><?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></nowiki></pre>
 +
 
 +
<div id="Thumbnail_Sizes">
 +
=== アイキャッチ画像の大きさ ===
 +
<div>
 +
 
 +
WordPress のデフォルトの画像サイズは <tt>'thumbnail'</tt>, <tt>'medium'</tt>, <tt>'large'</tt>, <tt>'full'</tt>(アップロードした画像のサイズ)です。これらの画像サイズは WordPress の管理画面の [[管理画面/メディア設定|設定 &gt; メディア]] で設定することができます。以下は the_post_thumbnail() タグでデフォルトの画像サイズを使用する方法です。
 +
 
 +
<pre>
 +
the_post_thumbnail();                     // パラメータなし -> 'post-thumbnail'
 
   
 
   
get_the_post_thumbnail($id, 'thumbnail');     // サムネイル
+
the_post_thumbnail( 'thumbnail' );       // サムネイル (デフォルト 150px x 150px :最大値)
get_the_post_thumbnail($id, 'medium');       // 中サイズ
+
the_post_thumbnail( 'medium' );           // 中サイズ   (デフォルト 300px x 300px :最大値)
get_the_post_thumbnail($id, 'large');         // 大サイズ
+
the_post_thumbnail( 'large' );           // 大サイズ   (デフォルト 640px x 640px :最大値)
 +
the_post_thumbnail( 'full' );            // フルサイズ (アップロードした画像の元サイズ)
 
   
 
   
get_the_post_thumbnail($id, array(100,100) ); // 他のサイズ
+
the_post_thumbnail( array( 100, 100 ) ); // 他のサイズ
 +
</pre>
  
== 注 ==<!-- Notes -->
+
* アイキャッチ画像の新しいサイズを登録するには [[関数リファレンス/add_image_size|add_image_size()]] を使います。
 +
* アイキャッチ画像のデフォルトの大きさを設定するには [[関数リファレンス/set_post_thumbnail_size|set_post_thumbnail_size()]] を使います。
  
投稿サムネイルを有効にするには、使用しているテーマの <tt>functions.php</tt> に <code>add_theme_support( 'post-thumbnails' );</code> を追加する必要があります。
+
<div id="Post_Thumbnail_Linking_to_the_Post_Permalink">
 +
=== 投稿パーマリンク付きアイキャッチ画像 ===
 +
</div>
  
 +
この例は最新から 5 つのアイキャッチ画像に投稿へのパーマリンクをつけて表示します。
 +
 +
<pre>
 +
<?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>';
 +
  }
 +
}
 +
?></pre>
 +
 +
<div id="Post_Thumbnail_Linking_to_large_Image_Size">
 +
=== 大きな画像へのリンク付きアイキャッチ画像 ===
 +
</div>
 +
 +
この例は "large" サイズのアイキャッチ画像へのリンクをつけます。[[ループ]]内で使う必要があります。
 +
 +
<pre>
 +
<?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>';
 +
}
 +
?></pre>
 +
 +
<div id="Styling_Post_Thumbnails">
 +
=== アイキャッチ画像のスタイル付与 ===
 +
</div>
 +
 +
アイキャッチ画像には "wp-post-image" というクラスが付けられます。さらに、表示されるアイキャッチ画像の大きさに対応したクラスも付けられます。これらを [[用語集#CSS|CSS セレクター]] として出力のスタイルを指定できます:
 +
 +
<pre>
 +
img.wp-post-image
 +
img.attachment-thumbnail
 +
img.attachment-medium
 +
img.attachment-large
 +
img.attachment-full
 +
</pre>
 +
 +
アイキャッチ画像に独自のクラスを付けることもできます。下記は "alignleft" クラスを追加する方法です。
 +
 +
<?php echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' => 'alignleft' ) ); ?>
 +
 +
<div id="Notes">
 +
== 参考 ==
 +
<div>
 +
 +
テーマの <tt>[[テーマの作成#Functions_File|functions.php]]</tt>/[[:en:Theme_Development#Functions_File|en]] ファイルに含む必要のある <code>[[関数リファレンス/add theme support|add_theme_support]]( 'post-thumbnails' );</code> をフックに登録する場合は、init フックよりも先に呼び出す必要があります。一部の機能に関して、[[プラグイン API/アクションフック一覧/init|<tt>init</tt>]]/[[:en:Plugin API/Action Reference/init|en]] は遅すぎます。フックするなら [[プラグイン API/アクションフック一覧/after_setup_theme|<tt>after_setup_theme</tt>]]/[[:en:Plugin API/Action Reference/after_setup_theme|en]] でなければなりません。
 +
 +
<div id="Change_Log">
 
== 変更履歴 ==
 
== 変更履歴 ==
 +
</div>
  
* [[Version 2.9|2.9]] : 新規テンプレートタグ
+
* [[Version 2.9|2.9.0]] : 新規導入
  
== ソースファイル ==<!-- Source File -->
+
<div id="Source_File">
 +
== ソースファイル ==
 +
</div>
  
<tt>get_the_post_thumbnail()</tt> は、{{Trac|wp-includes/post-thumbnail-template.php}} にあります。
+
<tt>get_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
  
{{原文|Template Tags/get_the_post_thumbnail|86893}}<!-- 02:43, 8 May 2010 Mizuno 版 -->
+
<div id="Related">
 +
== 関連資料 ==
 +
</div>
  
== 関連 ==<!-- Related -->
+
[[関数リファレンス/wp_get_attachment_image_src|wp_get_attachment_image_src]]
  
 
{{Post Thumbnail Tags}}
 
{{Post Thumbnail Tags}}
  
 
{{Tag Footer}}
 
{{Tag Footer}}
 +
 +
{{原文|Function Reference/get_the_post_thumbnail|148851}} <!-- 20:09, 16 February 2015 Magicroundabout 版 -->
  
 
{{DEFAULTSORT:Get_the_post_thumbnail}}
 
{{DEFAULTSORT:Get_the_post_thumbnail}}
 
[[Category:テンプレートタグ]]
 
[[Category:テンプレートタグ]]
  
[[en:Template Tags/get_the_post_thumbnail]]
+
[[en:Function Reference/get_the_post_thumbnail]]
 +
[[it:Riferimento funzioni/get_the_post_thumbnail]]

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

この項目「テンプレートタグ/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 でなければなりません。

変更履歴

ソースファイル

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

外部リソース

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