WordPress

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

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

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

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 にもともと実装されているギャラリーのテンプレートを使った表示方法を紹介します。
使用しているテーマによっては表示内容が異なるためご注意ください。


<?php // ACF Gallery Field の表示
$image_ids = get_field('gallery', false, false); // フィールド名の指定
$shortcode = '[gallery ids="' . implode(',', $image_ids) . '"]'; // シュートコードの作成
echo do_shortcode( $shortcode ); // 作成したショートコードを表示
?>

関数 do_shortcode は、指定したショートコードを表示することができます。

まとめ

WordPress のプラグイン ACF のアドオン Gallery Field(ギャラリーフィールド)の表示方法を紹介しました。

スポンサーリンク

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