WordPress

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

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

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

  1. ACF の Gallery Field とは?
  2. 画像一覧の表示方法
  3. スライドの表示方法
  4. 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 の有料機能の一つギャラリーフィールドの表示方法を紹介しました。

この記事をシェアする