ACFで画像のキャプションを取得 | 大阪 ホームページ制作 株式会社TREVOの技術ブログ

WordPressでサイトを運営していると、画像をアップロードして表示する際に「altタグ」や「キャプション」、「説明」などの情報を設定することがあります。これらの情報は、SEOやアクセシビリティの観点からも非常に重要です。今回は、人気プラグイン「ACF（Advanced Custom Fields）」を使って、画像オブジェクトからこれらの情報を取得し、サイト上に表示する方法について、初心者にも分かりやすく解説します。

基本的な画像フィールドの取得方法

まずは、ACFで設定した画像フィールドから画像オブジェクトを取得し、altテキストやキャプション、説明を表示する基本的な方法をご紹介します。

フィールド名：〇〇

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

上記のコードでは、

• get_field('〇〇') により、画像フィールドのデータを取得します。
• 取得した画像オブジェクトの中には、url（画像のURL）、alt（代替テキスト）、caption（キャプション）、description（説明）などの情報が含まれています。

echo $image['alt'];         // 画像のaltテキストを表示
echo $image['caption'];     // 画像のキャプションを表示
echo $image['description']; // 画像の説明を表示

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

より高度なカスタマイズとして、画像をリンク付きで表示し、キャプションがある場合はその周りを適切なHTML要素で囲む方法をご紹介します。以下のコードは、サムネイルサイズの画像を取得し、リンクやキャプションを含めた表示例です。

フィールド名：〇〇

<?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; ?>

このコードのポイントは以下の通りです。

画像オブジェクトの展開

$image から url、title、alt、caption など必要な情報を取得し、変数に格納しています。

画像サイズの指定

$image['sizes'] を利用して、サムネイルサイズの画像URLやサイズ情報を取得。これにより、ページの表示速度やレイアウトの最適化が可能です。

キャプションの表示

キャプションが存在する場合は、<div class="wp-caption"> で囲み、キャプションテキストを <p class="wp-caption-text"> 内に表示しています。これにより、画像とキャプションが一体となった見た目に仕上がります。