繰り返しフィールドでもOK！ACFで画像サイズを指定して出力するコード

この記事では、Advanced Custom Fields (ACF) を使用して、画像サイズを指定して表示する方法を解説します。また、functions.php に画像サイズを追加するコードも含めています。

この記事は、公式ドキュメントから引用した内容も含み、PHP 8以降でのエラーを考慮して更新されています。

https://www.advancedcustomfields.com/resources/image/

function.phpに画像サイズを追加するコード

WordPressでは、add_image_size() を使用してカスタム画像サイズを追加できます。

add_image_size( $name, $width, $height, $crop );

例:

• フィールド名: ○○○
• true: トリミングする
• false: トリミングしない

add_image_size('○○○', 150, 150, true);

画像の出力

• フィールド名: ○○○

<?php 
$image = get_field('image');
if( !empty( $image ) ): ?>
    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>

• get_field(): ACFで定義された画像フィールドを取得します。
• エスケープ処理: esc_url() と esc_attr() でセキュリティを強化。

画像サイズを指定して出力

• フィールド名: ○○○
• サイズ: △△△

<?php
$image = get_field('○○○');
if( $image ):
    $url = esc_url($image['url']);
    $title = esc_attr($image['title']);
    $alt = esc_attr($image['alt']);
    $size = '△△△';
    $thumb = esc_url($image['sizes'][ $size ]);
?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />
    </a>
<?php endif; ?>

画像サイズを指定して出力（キャプション有）

• フィールド名: ○○○
• サイズ: △△△

必要条件

ACFの「返り値のフォーマット」で「画像配列」を選択。

<?php
$image = get_field('○○○');
if ($image):
    $size = '△△△';
    $thumb = esc_url($image['sizes'][$size]);
    $width = esc_attr($image['sizes'][$size . '-width']);
    $height = esc_attr($image['sizes'][$size . '-height']);

    if ($image['caption']): ?>
        <div class="wp-caption">
    <?php endif; ?>

    <a href="<?php echo esc_url($image['url']); ?>" title="<?php echo esc_attr($image['title']); ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo esc_attr($image['alt']); ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
    </a>

    <?php if ($image['caption']): ?>
        <p class="wp-caption-text"><?php echo esc_html($image['caption']); ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?>

繰り返しフィールドで画像サイズを指定

• フィールド名: ○○○
• サイズ: △△△

ACFの繰り返しフィールドを使用する場合のコードです。

<?php
$image = get_sub_field('○○○');
if( $image ):
    $url = esc_url($image['url']);
    $title = esc_attr($image['title']);
    $alt = esc_attr($image['alt']);
    $size = '△△△';
    $thumb = esc_url($image['sizes'][ $size ]);
?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />
    </a>
<?php endif; ?>

注意点

エスケープ処理

出力時は必ず esc_url()、esc_attr()、esc_html() を使用して安全性を確保しましょう。

画像サイズの登録

登録したカスタム画像サイズを再生成する場合、Regenerate Thumbnails プラグインを使用すると便利です。

PHP 8対応

空配列や未定義キーへのアクセスを防ぐため、!empty() を適切に使用してください。