wp_get_attachment_image()とは？
wp_get_attachment_image() は、WordPress において「画像の添付ファイル」を HTML <img> タグとして出力するための非常に便利な関数です。画像のサイズや属性を細かく制御でき、主にテンプレートやウィジェット内で画像を動的に出力したい場面でよく使われます。
wp_get_attachment_image()の基本構文
wp_get_attachment_image( int $attachment_id, string|array $size = 'thumbnail', bool $icon = false, string|array $attr = '' )wp_get_attachment_image()の引数の説明
| 引数 | 型 | 説明 |
|---|---|---|
$attachment_id | int | 添付ファイル（画像）の投稿ID |
$size | string / array | 表示する画像サイズ。thumbnail, medium, large, full または ['width', 'height'] の配列 |
$icon | bool | 添付ファイルが画像でない場合にアイコンを表示するか。通常は false |
$attr | string / array | <img> タグに追加する属性（alt, class, loading, decoding など） |
wp_get_attachment_image()の戻り値
string：HTML の<img>タグを返す。- 添付ファイルが存在しない場合は
falseを返すこともあります。
wp_get_attachment_image()の使用例
例1：サムネイルサイズの画像を出力
echo wp_get_attachment_image( 123, 'thumbnail' );→ <img width="150" height="150" src="..." class="attachment-thumbnail size-thumbnail" alt="" />
例2：カスタムサイズ（300×200）で出力
echo wp_get_attachment_image( 123, [300, 200] );例3：属性を追加して出力（alt, class）
echo wp_get_attachment_image( 123, 'medium', false, [
'alt' => '料理の写真',
'class' => 'custom-class',
] );例4：Lazy Load を明示的にオフにする
echo wp_get_attachment_image( 123, 'large', false, [
'loading' => 'eager',
] );wp_get_attachment_image()のよく使われるサイズの指定
| サイズ | 説明 |
|---|---|
'thumbnail' | 管理画面で設定されたサムネイルサイズ（例：150×150） |
'medium' | 中サイズ（例：300×300） |
'large' | 大サイズ（例：1024×1024） |
'full' | 元画像サイズ（アップロードしたままのサイズ） |
['width', 'height'] | 数値で幅・高さを指定するカスタムサイズ |
※ カスタムサイズを add_image_size() で登録しておけば、その名前でも指定可能。
wp_get_attachment_image() の利点
◎ 画像の HTML を一発で出力できる
単純な <img> タグを手で書くよりも、MIMEチェックや属性追加、サイズ調整を自動で行ってくれるため効率的。
◎ Retina対応が簡単
WordPress では画像サイズごとに srcset を自動生成しており、wp_get_attachment_image() を使えば srcset と sizes 属性も自動的に出力されます。これによりレスポンシブ対応が簡単になります。
alt属性の自動取得について
wp_get_attachment_image() は、以下の優先順位で alt 属性を取得します：
$attr['alt']に指定されていればそれを使う- なければ、メディアライブラリ内の「代替テキスト（alt）」欄の内容を使用
- それもなければ
alt=""（空）となる
→ SEO やアクセシビリティの観点からも、画像ごとに代替テキストをしっかり入力しておくことが重要です。
wp_get_attachment_image_src() との違い
| 関数名 | 返すもの | 用途 |
|---|---|---|
wp_get_attachment_image() | HTML <img> タグ | 出力にそのまま使える |
wp_get_attachment_image_src() | 配列（URL, width, height など） | ロジック内で画像URLやサイズを扱いたいときに便利 |
wp_get_attachment_image()のよくある実践例
投稿のアイキャッチ画像を <img> タグで表示
$thumb_id = get_post_thumbnail_id( get_the_ID() );
if ( $thumb_id ) {
echo wp_get_attachment_image( $thumb_id, 'medium' );
}ACF などで画像フィールドから画像表示
$image_id = get_field('custom_image');
if ( $image_id ) {
echo wp_get_attachment_image( $image_id, 'large' );
}画像の class 自動付与について
デフォルトでは以下のようなクラスが付与されます：
class="attachment-thumbnail size-thumbnail"このクラス名は以下の意味を持ちます：
| クラス名 | 説明 |
|---|---|
attachment-{size} | 添付ファイルの表示サイズ |
size-{size} | 同じくサイズに応じたクラス |
→ CSSでサイズごとにスタイルを分けたいときに便利です。
wp_get_attachment_image()の画像の出力をフィルターフックでカスタマイズ
出力される <img> タグにフックを加えたい場合は、次のようなフィルターを利用できます：
add_filter( 'wp_get_attachment_image_attributes', 'my_custom_img_attr', 10, 3 );
function my_custom_img_attr( $attr, $attachment, $size ) {
$attr['class'] .= ' lazyload';
$attr['data-src'] = $attr['src'];
unset( $attr['src'] );
return $attr;
}→ LazyLoad プラグインとの連携や独自の属性を加える際に有用です。
wp_get_attachment_image()の注意点
- 添付ファイルが画像以外（PDFや動画など）の場合は
falseを返す - サイズが未定義だと意図しないリサイズ結果になることもある
- Retina対応やレスポンシブ画像を期待する場合、WordPressのバージョンによって
srcsetの扱いが異なるため注意
wp_get_attachment_image()のまとめ
| 項目 | 内容 |
|---|---|
| 関数名 | wp_get_attachment_image() |
| 用途 | 添付画像の HTML タグ出力 |
| 主な引数 | 添付ID、サイズ、アイコン表示、追加属性 |
| 戻り値 | <img> タグ（string）または false |
| 強み | srcset対応、alt属性自動付加、サイズ指定が柔軟 |
| 関連関数 | get_post_thumbnail_id(), wp_get_attachment_image_src(), wp_get_attachment_metadata() |
wp_get_attachment_image() は WordPress の画像出力における「標準関数」であり、HTML を安全かつ柔軟に出力できる便利な手段です。テーマやプラグインを開発する際は、手書きの <img> タグではなく、この関数を使うことが推奨されます。
