ACF 画像の取得と表示方法を紹介

WordPress のプラグイン Advanced Custom Fields を使った画像フィールドの取得と表示方法を紹介します。
すでに「Advanced Custom Fields の取得と表示方法」ページにて紹介している方法ですが、画像に絞った方法を掘り下げて紹介しています。

1. 画像フィールドの表示
   1. 画像の表示（返り値：オブジェクト）
   2. 画像の表示（返り値：URL）
   3. 画像の表示（返り値：ID）
2. 元画像の表示方法

画像フィールドの表示

画像フィールドの取得と表示方法を紹介します。
画像フィールドの返り値は「オブジェクト」「URL」「ID」から選べます。
返り値の特徴は以下になります。使用目的に合わせて返り値を選択してください。

オブジェクト

オブジェクトはスタンダードな返り値になります。
画像のサイズや alt の設定などを細かく行う場合におすすめです。

URL

URL はアップロードした画像をそのまま利用する時に便利な返り値です。
シンプルに画像URLを取得する時に向いていますが、サイズを指定したいときやカスタマイズしたいときには不向きな形式です。

ID

ID は画像に紐づくIDを利用する返り値です。
返り値が ID なので wp_get_attachment_image を使ってイメージタグを含めて出力します。

画像の表示（返り値：オブジェクト）

<?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 = get_field('image');

  $size = 'full'; // (thumbnail, medium, large, full or custom size)

  if( $image ) {

    echo wp_get_attachment_image( $image, $size );

  }

?>

画像の登録が絶対にあるならシンプルにこんな書き方もできます。

<?php echo wp_get_attachment_image(the_field('image'),'large'); ?>

元画像の表示方法

返り値がオブジェクトの時に、フルサイズ（元画像）を表示する方法を紹介します。

<?php

  $image = get_field('image');

  if( !empty($image) ):

  $url = $image['url']; // 画像URLを取得

?>

<img src="<?php echo $url; ?>">

<?php endif; ?>

まとめ

WordPress のプラグイン Advanced Custom Fields を使った画像フィールドの取得と表示方法を紹介しました。