WordPress

Advanced Custom Fields のアドオン Gallery Field の表示方法

Advanced Custom Fields のアドオン Gallery Field の表示方法

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

  1. ACF の Gallery Field とは?
  2. 画像一覧の表示方法
  3. スライドの表示方法
  4. WPギャラリーを使った表示方法

ACF の Gallery Field とは?

WordPress には写真を並べて配置できるギャラリー機能が実装されています。
通常は本文内で作成するものですが、これをカスタムフィールドを介して実装できるのが ACF のアドオン Gallery Field です。
Gallery Field は本文内で行うギャラリーの追加とは別に、単体でギャラリーを作成・表示することができます。
Gallery Field は有料のアドオンになりますが、同じアドオンの Repeater Field や 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 のアドオン Gallery Field(ギャラリーフィールド)の表示方法を紹介しました。

合わせて読みたい関連記事