ACFで画像のキャプションを取得

投稿日:2025.03.13.
更新日:2025.04.12.

WordPress

タグ

株式会社TREVOの月額制ホームページ制作サービス
PR

板浪 雅樹
執筆・編集 板浪 雅樹

2005年から WEB 業界一筋。500サイト超を手がける SEO・WordPress のエキスパート。「公開後こそ本番」を掲げ、データ分析とユーザー視点で成果を引き出す運用を提案。

2005年に制作会社へ入社後、プログラマーからキャリアをスタート。サーバー構築・データベース設計で培った技術を強みに、WordPress テーマ/プラグイン開発やサイト移行の難案件を多数担当してきました。
2010年以降は SEO エンジニアとしても活動領域を拡大。コンテンツ設計・内部リンク最適化・高速化チューニングにより、競合の激しいビッグキーワードで上位獲得を実現してきました。
現在は TREVO のウェブディレクターとして、要件定義から運用改善まで一気通貫でリード。AI ライティングや GA4/Looker Studio を活用したレポーティング手法を開発し、「数字で説明できるサイト運用」をポリシーにクライアントの ROI 最大化を支援しています。
趣味/強み:筋トレとランニングで日々の集中力をキープ。複雑な課題を“仕組み”で解決するのが得意。
モットー:「サイトは資産。改善を止めた瞬間から価値は目減りする」

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 から urltitlealtcaption など必要な情報を取得し、変数に格納しています。

画像サイズの指定

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

キャプションの表示

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

関連の記事

CONTACT

ホームページ制作・Web制作に関するご質問やご相談は、
下記フォームよりお問い合わせください。

無料のお見積りや初回のご相談も承っておりますので、「まだ検討中」「ちょっと話を聞いてみたい」といった段階でも大歓迎です。
現状のホームページ診断も無料で実施中です。

0120-83-8567
平日9:00~18:00まで 定休日:土 日 祝