ACF ギャラリーフィールドの表示方法

最終更新日 2019.12.02 - 公開日 2015.01.20

by Takumi Hirashima

WordPress のプラグイン ACF の有料機能の一つ Gallery Field（以下、ギャラリーフィールド）の表示方法を紹介します。
例えば、本文エリアを使わずにギャラリー機能を使用したい時に便利な機能です。
まずは基本的な表示方法から、高度な表示方法を紹介していきます。

ACF の Gallery Field とは？
画像一覧の表示方法
スライドの表示方法
WPギャラリーを使った表示方法

ACF のギャラリーフィールドとは？

WordPress には、写真を並べて配置できるギャラリー機能が実装されています。
この機能は通常は本文内で作成するものですが、これをカスタムフィールドを介して実装できるのが ACF のギャラリーフィールドです。
ギャラリーフィールドはPRO版の機能になるため有料ですが、同じアドオンの繰り返しフィールド（リピーターフィールド）やオプション（Options Page）も合わせて使えるので、有料版の購入をおすすめします。

画像一覧の表示方法

ギャラリーフィールドを使った基本的な画像一覧の表示方法を紹介します。
例えば、画像のリンク付き画像一覧を表示したい時は、次のコードをテンプレートに追加します。

<?php // ACF Gallery Field の表示

  $images = get_field('gallery'); // フィールド名の指定

  if( $images ):

?>

  <ul>

<?php foreach( $images as $image ): // ループ処理の開始 ?>

    <li>

      <a href="<?php echo $image['url']; ?>">

        <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />

      </a>

      <p><?php echo $image['caption']; ?></p>

    </li>

<?php endforeach; ?>

    </ul>

<?php endif; ?>

値はメディアで登録されている情報を取得しています。
caption や alt が表示されない時は、メディアの入力欄を確認しましょう。

その他、画像サイズなどを取得したい時はAdvanced Custom Fields の表示方法をご覧ください。

スライドの表示方法

画像一覧とスライドを組み合わせたい時、メイン画像とは別にサムネイル画像も表示も必要ですよね。そんな時の表示方法を紹介します。
例えば、メイン画像とサムネイル画像を別々に取得したい場合は次のコードを追加します。

<?php // ACF Gallery Field の表示

  $images = get_field('gallery'); // フィールド名の指定

  if( $images ):

?>

<div id="slider">

  <ul class="slides">

<?php foreach( $images as $image ): // メイン画像のループの開始 ?>

    <li>

      <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

      <p><?php echo $image['caption']; ?></p>

    </li>

<?php endforeach; ?>

  </ul>

</div>

<div id="carousel">

  <ul class="slides">

<?php foreach( $images as $image ): // サムネイル画像のループの開始 ?>

    <li>

      <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />

    </li>

<?php endforeach; ?>

  </ul>

</div>

<?php endif; ?>

スライド機能は別途追加する必要が有ります、ご注意ください。

WPギャラリーを使った表示方法

WordPress に実装されているギャラリーテンプレートを使う場合は、関数 do_shortcodeを使用してを表示します。

<?php // ACF Gallery Field の表示

  $image_ids = get_field('gallery', false, false); // フィールド名の指定

  $shortcode = '[gallery ids="' . implode(',', $image_ids) . '"]'; // シュートコードの作成

  echo do_shortcode( $shortcode ); // 作成したショートコードを表示

?>

使用しているテーマファイルによっては表示内容が異なる場合があります、ご注意ください。

まとめ

WordPress のプラグイン ACF の有料機能の一つギャラリーフィールドの表示方法を紹介しました。