投稿のアイキャッチ画像や、添付画像を取得・表示する方法をまとめました。
関数に関しては、様々なサイトやブログで解説されているので、ここでは用途別に逆引きにしてみました。
投稿の画像を取得・表示する関数
| 用途 | 取得値 | 関数 | 備考 |
| 投稿のアイキャッチ画像を表示 | |||
| アイキャッチのHTMLを出力 | imgタグ |
the_post_thumbnail( $size, $attr ) |
投稿IDの指定は不可 |
|---|---|---|---|
| アイキャッチのHTMLを取得 | imgタグ |
get_the_post_thumbnail( $post_id, $size, $attr ) |
投稿IDの指定が可能 |
| 投稿から画像IDを取得 | |||
| アイキャッチ画像のID | 画像ID | get_post_thumbnail_id( $post_id ) |
|
| 添付画像のID | オブジェクトの配列(画像IDを含む) | get_children( $args, $output ) |
|
| 画像IDから画像を取得 | |||
| 画像のHTMLを出力 | aタグ+imgタグ |
the_attachment_link( $id, $fullsize, $deprecated, $permalink ) |
画像サイズは'thumbnail'か'full'のみ |
| 画像のHTMLを取得(リンク付) | aタグ+imgタグまたは aタグ+テキスト |
wp_get_attachment_link( $id, $size, $permalink, $icon, $text ) |
全ての画像サイズに対応imgタグのclassなどの属性値追加は不可 |
| 画像のHTMLを取得(リンク無) | imgタグ |
wp_get_attachment_image( $attachment_id, $size, $icon, $attr ) |
classなどの属性値追加が可能 |
| 画像のURL等を取得 | URL・width・height・リサイズ画像かの真偽値 | wp_get_attachment_image_src( $attachment_id, $size, $icon ) |
|
アイキャッチ画像のHTMLを出力
the_post_thumbnail( $size, $attr )
$size — （オプション） 画像のサイズ。キーワード（'thumbnail', 'medium', 'large', 'full'等）、または幅と高さの配列（例: array(32, 32)）。初期値は、functions.php内のset_post_thumbnail_size関数で定義したサイズ。
$attr — （オプション）imgタグに追加する属性値を連想配列で指定（例: array('class' => 'post-thumb')）
ループ内で、投稿のアイキャッチ画像をimgタグで出力（echo）します。
この関数では投稿IDは指定できないので、指定したい場合はget_the_post_thumbnail関数を使用します。
使用例
|
1 2 3 4 5 6 7 |
<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <?php the_post_thumbnail(); ?> <?php endwhile; ?> <?php endif; ?> |
出力結果
|
1 |
<img width="400" height="300" src="http://my-site.com/wp-content/uploads/2014/03/postthumb123-400x300.jpg" class="attachment-post-thumbnail wp-post-image" alt="postthumb123"> |
投稿にアイキャッチ画像が存在するかを条件分岐する、has_post_thumbnail関数と組み合わせて使用する事もできます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <?php if ( has_post_thumbnail() ) : ?> <a href="<?php the_permalink() ?>"> <?php the_post_thumbnail(); ?> </a> <?php endif; ?> <?php endwhile; ?> <?php endif; ?> |
アイキャッチ画像のHTMLを取得
get_the_post_thumbnail( $post_id, $size, $attr )
$post_id — （オプション）投稿ID。初期値はnull（ループ内で現在の投稿ID）
$size — （オプション） 画像のサイズ。キーワード（'thumbnail', 'medium', 'large', 'full'等）、または幅と高さの配列（例: array(32, 32)）。初期値は、functions.php内のset_post_thumbnail_size関数で定義したサイズ。
$attr — （オプション）imgタグに追加する属性値を連想配列で指定（例: array('class' => 'post-thumb')）
ループ内、または投稿IDを指定して、アイキャッチ画像をimgタグで取得します（echoはしません）。
使用例
|
1 |
<?php echo get_the_post_thumbnail($post_id, 'medium', array('class' => 'post-thumb-' . $post_id) ); ?> |
出力結果
|
1 |
<img width="300" height="200" src="http://my-site.com/wp-content/uploads/2014/03/postthumb123-300x200.jpg" class="post-thumb-123 wp-post-image" alt="postthumb123"> |
アイキャッチ画像のIDを取得
get_post_thumbnail_id( $post_id )
$post_id — （オプション）投稿ID。初期値はnull（ループ内で現在の投稿ID）
ループ内、または投稿IDを指定して、アイキャッチ画像のIDを取得します。
使用例
|
1 2 3 4 |
<?php if ( has_post_thumbnail() ) : ?> <?php $thumbnail_id = get_post_thumbnail_id(); ?> <?php the_attachment_link( $thumbnail_id ); ?> <?php endif; ?> |
添付画像のIDを取得
添付画像のIDを取得するには、get_children関数を使用します。
get_children( $args, $output )
$args — （オプション）取得する記事を指定するパラメータ
$output — （オプション）戻り値の値
使用例
投稿IDが$post_idの時、添付画像のIDを取得するには、get_children関数を次のように使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php // 添付画像はオブジェクトの配列で取得される $attachments = get_children( array( 'post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image', )); // オブジェクトの配列をループ処理 foreach ( $attachments as $attachment_id => $attachment ) { // $attachment_id が個々の画像IDとなる } ?> |
または、array_keys関数を使ってIDの配列を生成できます。
|
1 2 3 4 5 6 7 8 |
<?php // 添付画像のIDを配列で取得 $attachment_ids = array_keys( get_children( array( 'post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image', ))); ?> |
連想配列に条件を追加する事も可能です。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php $attachments = get_children( array( 'post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image', // アイキャッチ画像を除く 'exclude' => get_post_thumbnail_id( $post_id ), // 最初の1件だけを取得 'posts_per_page' => 1, )); ?> |
画像のHTML（リンク付き）を出力
the_attachment_link関数は、画像やその他の添付ファイルを、リンク付き（画像の場合aタグ+imgタグ）のHTMLタグで出力（echo）する関数です。
画像の場合、リンク先はフルサイズ画像のURL（または添付ファイルページ）になります。
the_attachment_link( $id, $fullsize, $deprecated, $permalink )
$id — （オプション）添付ファイルID。初期値はnull（添付ファイルページのループ内で現在のID）
$fullsize — （オプション）サムネイル（false・デフォルト）またはフルサイズ（true）
$deprecated — （廃止された引数・false）
$permalink — （オプション）ファイルへの直リンク（false・デフォルト）または添付ファイルページ（true）
画像サイズは、サムネイルかフルサイズしか選択できません。
他の画像サイズを指定したい場合は、wp_get_attachment_link関数を使用します。
また、リンク無しのimgタグだけが必要な場合は、wp_get_attachment_image関数を使用します。
使用例
|
1 |
<?php the_attachment_link( $attachment_id ); ?> |
出力結果
|
1 |
<a href="http://my-site.com/wp-content/uploads/2014/03/image01.jpg"><img width="150" height="150" src="http://my-site.com/wp-content/uploads/2014/03/image01-150x150.jpg" class="attachment-thumbnail" alt="image01"></a> |
画像のHTML（リンク付き）を取得
wp_get_attachment_link関数は、画像やその他の添付ファイルを、リンク付き（画像の場合aタグ+imgタグ）のHTMLタグで取得する関数です（echoはしません）。
画像の場合、リンク先はフルサイズ画像のURL（または添付ファイルページ）になります。
wp_get_attachment_link( $id, $size, $permalink, $icon, $text )
$id — （オプション）添付ファイルID。初期値はnull（添付ファイルページのループ内で現在のID）
$size — （オプション） 画像のサイズ。キーワード（'thumbnail', 'medium', 'large', 'full'等）、または幅と高さの配列（例: array(32, 32)）。初期値は'thumbnail'。
$permalink — （オプション）ファイルへの直リンク（false・デフォルト）または添付ファイルページ（true）
$icon — （オプション）メディアアイコンを使用する（true）または使用しない（false・デフォルト）
$text — （オプション）添付へのリンクをテキストにする（文字列）またはテキストにしない（false・デフォルト）
この関数では、imgタグのclassなどの属性値を追加できないので、追加したい場合はwp_get_attachment_image_src関数を使用してHTMLタグを組み立てる事になります。
また、リンク無しのimgタグだけが必要な場合は、wp_get_attachment_image関数を使用します。
使用例
|
1 |
<?php echo wp_get_attachment_link( $attachment_id, 'medium' ); ?> |
出力結果
|
1 |
<a href='http://my-site.com/wp-content/uploads/2014/03/image01.jpg'><img width="300" height="200" src="http://my-site.com/wp-content/uploads/2014/03/image01-300x200.jpg" class="attachment-medium" alt="image01" /></a> |
この関数では、imgタグではなくテキストのリンクにする事もできます。
|
1 |
<?php echo wp_get_attachment_link( $attachment_id, 'thumbnail', false, false, '画像へのリンク' ); ?> |
出力結果
|
1 |
<a href="http://my-site.com/wp-content/uploads/2014/03/image01.jpg">画像へのリンク</a> |
画像のHTML（リンク無し）を取得
wp_get_attachment_image関数は、画像やその他の添付ファイルを、リンク無し（画像の場合imgタグのみ）のHTMLタグで取得する関数です（echoはしません）。
wp_get_attachment_image( $attachment_id, $size, $icon, $attr )
$attachment_id — （必須）添付ファイルID
$size — （オプション） 画像のサイズ。キーワード（'thumbnail', 'medium', 'large', 'full'等）、または幅と高さの配列（例: array(32, 32)）。初期値は'thumbnail'。
$icon — （オプション）メディアアイコンを使用する（true）または使用しない（false・デフォルト）
$attr — （オプション）imgタグに追加する属性値を連想配列で指定（例: array('class' => 'post-thumb')）
この関数はimgタグのみのHTMLを取得します。
リンク付きのHTML（aタグ+imgタグ）を取得したい場合には、wp_get_attachment_link関数が便利です。
使用例
|
1 |
<?php echo wp_get_attachment_image( $attachment_id, 'medium' ); ?> |
出力結果
|
1 |
<img width="300" height="200" src="http://my-site.com/wp-content/uploads/2014/03/image01-300x200.jpg" class="attachment-medium" alt="image01" /> |
画像のURL等を取得
wp_get_attachment_image_src( $attachment_id, $size, $icon )
$attachment_id — （必須）添付ファイルID
$size — （オプション） 画像のサイズ。キーワード（'thumbnail', 'medium', 'large', 'full'等）、または幅と高さの配列（例: array(32, 32)）。初期値は'thumbnail'。
$icon — （オプション）メディアアイコンを使用する（true）または使用しない（false・デフォルト）
この関数は、画像のURLなどの情報を配列として取得します。
戻り値の配列は次のようになります。
[0] => 画像ファイルのURL
[1] => 画像のwidth
[2] => 画像のheight
[3] => リサイズ画像（true）またはフルサイズ画像（false）
リサイズ画像については、$size引数で指定した画像サイズのファイルが見つからない場合、WordPressは代わりにフルサイズ画像のファイルURLを返します。この時、[3]はfalseになります。
使用例
|
1 2 3 4 |
<?php $image_src = wp_get_attachment_image_src( $attachment_id ); ?> <?php if ( $image_src ) : ?> <img src="<?php echo $image_src[0]; ?>" width="<?php echo $image_src[1]; ?>" height="<?php echo $image_src[2]; ?>" /> <?php endif; ?> |
TRACKBACKS