ACF 画像の出力方法
最終更新日 - 公開日 2023.02.10
by
WordPress のプラグイン Advanced Custom Fields を使った画像フィールドの出力方法を紹介します。
すでに「Advanced Custom Fields の取得と表示方法」ページにて紹介している方法ですが、画像に絞った方法を掘り下げて紹介しています。
画像フィールドの表示と返り値について
画像フィールド値の取得とその値を使った表示方法を紹介します。
画像フィールドの返り値は「オブジェクト」「URL」「ID」から選べます。
返り値にはそれぞれ特徴があるので、使用目的に合わせた返り値を選択してください。
オブジェクト（画像配列）
オブジェクトはスタンダードな返り値になります。
画像のサイズや alt の設定などを細かく行う場合におすすめです。
URL
URL はアップロードした画像をそのまま利用する時に便利な返り値です。
シンプルに画像URLを取得する時に向いていますが、サイズを指定したいときやカスタマイズしたいときには不向きな形式です。
ID
ID は画像に紐づくIDを利用する返り値です。
返り値が ID なので wp_get_attachment_image を使ってイメージタグを含めて出力します。
IDでの出力が、もっとも軽量で、WordPressの画像最適化機能をフルに活用できて、コードも短くなるためおすすめですが、個人的にはaltを任意の値にしたいときなどに知識が試されるため、初心者向きではないと感じています。
返り値がオブジェクト（画像配列）の場合の出力方法
次のコードは、画像の返り値がオブジェクトの場合の出力方法です。
<?php $image = get_field('image'); if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
絶対に画像の登録があるなら、次のようにシンプルにする事もできます。
<img src="<?php $image = get_field('image'); echo $image['sizes']['medium']; ?>" />
また、画像の URL やタイトルなどを個別に取り出す場合はこちら。
<?php
$image = get_field('image');
if( !empty($image) ):
// 画像から各種値を取り出す
$url = $image['url']; // URL
$title = $image['title']; // タイトル
$alt = $image['alt']; // 代替テキスト
$caption = $image['caption']; // キャプション
$description = $image['description']; // 説明
// thumbnail
$size = 'thumbnail'; // 画像サイズ thumbnail（サムネイル）, medium（中サイズ）, large（大サイズ）, full（元画像）
$thumb = $image['sizes'][ $size ]; // 指定したサイズのサムネイルのURL
$width = $image['sizes'][ $size . '-width' ]; // 横幅
$height = $image['sizes'][ $size . '-height' ]; // 高さ
?>
<a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
</a>
<p>
<?php echo $caption; ?>
<?php echo $description; ?>
</p>
<?php endif; ?>
※画像サイズで full が選べない場合があります。表示されない場合は、画像配列を print_r() で出力して、希望する値を持っているかを確認してください。
返り値がURLの場合の出力方法
次のコードは、画像の返り値がURLの場合の出力方法です。
<?php if( get_field('image') ): ?>
<img src="<?php the_field('image'); ?>" />
<?php endif; ?>
画像の登録が絶対にあるならシンプルにこんな書き方もできます。
<img src="<?php the_field('image'); ?>" />
返り値がIDの場合の出力方法
画像の返り値がIDの場合の出力方法を紹介します。
次のコードは、返り値が ID の場合に wp_get_attachment_image を使ってイメージタグを含めて出力します。
<?php
$image_id = get_field('image'); // ACFの返り値を「ID」に設定
if ( $image_id ) :
// 各種データの取得
$url = wp_get_attachment_url($image_id); // 元画像のURL
$title = get_the_title($image_id); // タイトル
$caption = wp_get_attachment_caption($image_id); // キャプション
$description = get_post($image_id)->post_content; // 説明（投稿本文に保存されています）
// 画像サイズの設定
$size = 'thumbnail'; // thumbnail, medium, large, full, またはカスタムサイズ名
?>
<a href="<?php echo esc_url($url); ?>" title="<?php echo esc_attr($title); ?>">
<?php
// wp_get_attachment_image を使うことで、
// alt, width, height, srcset, loading="lazy" がすべて自動出力されます。
echo wp_get_attachment_image($image_id, $size);
?>
</a>
<?php if ( $caption || $description ) : ?>
<p>
<?php if ( $caption ) : ?>
<span class="caption"><?php echo esc_html($caption); ?></span><br>
<?php endif; ?>
<?php if ( $description ) : ?>
<span class="description"><?php echo wp_kses_post($description); ?></span>
<?php endif; ?>
</p>
<?php endif; ?>
<?php endif; ?>
if文による出力が基本ですが、画像の登録が絶対にある場合、次のようにシンプルに記述することもできます。
<?php echo wp_get_attachment_image(the_field('image'),'large'); ?>
IDで取得しつつ、altをページタイトルにする方法
IDで取得しつつ、altをページタイトルにする方法を紹介します。
<?php
$image_id = get_field('image');
if ( $image_id ) :
$size = 'large';
// 現在のページタイトルを取得
$page_title = get_the_title();
// 第4引数で alt を指定。これでメディアライブラリのaltではなく、ページタイトルが出力されます。
echo wp_get_attachment_image( $image_id, $size, false, array(
'alt' => $page_title,
'class' => 'my-custom-class' // 必要ならクラスも追加可能
));
endif;
?>
元画像の表示方法
返り値がオブジェクトの時に、フルサイズ（元画像）を表示する方法を紹介します。
<?php
$image = get_field('image');
if( !empty($image) ):
$url = $image['url']; // 画像URLを取得
?>
<img src="<?php echo $url; ?>">
<?php endif; ?>
まとめ
WordPress のプラグイン Advanced Custom Fields を使った画像フィールドの出力方法を紹介しました。
