ACFで画像のキャプションを取得 ホームページ制作 大阪の株式会社TREVO｜SEO対策・システム作成

ACFで出力した画像オブジェクトのaltタグなどに、代替えテキスト、キャプション、説明を表示する方法

ACFのタグ

フィールド名：〇〇

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

echo $image['alt']; // image caption
echo $image['caption']; // image caption
echo $image['description']; // image description

カスタマイズ用の画像コード

フィールド名：〇〇

<?php
$image = get_field('〇〇');
if( $image ):

    //イメージ変数
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    $caption = $image['caption'];

    // 画像サイズ.
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
    $width = $image['sizes'][ $size . '-width' ];
    $height = $image['sizes'][ $size . '-height' ];

    // キャプション開始位置
    if( $caption ): ?>
        <div class="wp-caption">
    <?php endif; ?>

    <a href="<?php echo esc_url($url); ?>" title="<?php echo esc_attr($title); ?>">
        <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    </a>

    <?php 
    // キャプション終了
    if( $caption ): ?>
        <p class="wp-caption-text"><?php echo esc_html($caption); ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?>