WordPressで画像IDからimgタグを出力するには、wp_get_attachment_image()を使用。

alt・width・height・srcsetなどの属性も自動出力できる。

基本的な使い方

挿入場所：画像を表示するPHPテンプレート内

<?php echo wp_get_attachment_image(123, 'large'); ?>

123は画像ID。largeは画像サイズ。

ACFの画像フィールドから出力

ACFの画像フィールドで、返り値のフォーマットを「画像ID」に設定。

挿入場所：画像を表示するPHPテンプレート内

<?php
$image_id = get_field('image');
if ($image_id) {
    echo wp_get_attachment_image($image_id, 'large');
}
?>

imageはACFのフィールド名に変更。

class属性などを指定

第4引数で任意のHTML属性を追加。

<?php
$image_id = get_field('image');
if ($image_id) {
    echo wp_get_attachment_image($image_id, 'large', false, [
        'class' => 'img-fluid',
        'alt' => 'サンプル画像'
    ]);
}
?>

alt属性を省略した場合、メディアライブラリに登録された代替テキストを使用。

画像サイズの指定

第2引数で画像サイズを指定。

• thumbnail：サムネイル
• medium：中サイズ
• large：大サイズ
• full：フルサイズ

テーマで登録した独自の画像サイズも指定可能。

ACFのギャラリーフィールドから出力

ACFのギャラリーフィールドで、返り値のフォーマットを「画像ID」に設定。

挿入場所：ギャラリーを表示するPHPテンプレート内

<?php
$images = get_field('gallery');
if ($images) {
    foreach ($images as $image_id) {
        echo wp_get_attachment_image($image_id, 'large');
    }
}
?>

galleryはACFのフィールド名に変更。

注意点

• 指定した画像IDが存在しない場合、画像タグは出力されない。
• srcsetやsizesは、利用可能な画像情報に応じて自動生成。
• 画像サイズによって、実際に出力される画像の解像度が変わる。
• ファーストビューの重要な画像では、遅延読み込みの設定に注意。

画像URLを個別に取得してimgタグを組み立てるより、wp_get_attachment_image()を使う方が簡潔。