繰り返しフィールドの一枚目の画像を一覧ページのアイキャッチとして利用する方法

投稿の詳細ページにAdvanced Custom Fieldsを利用し、繰り返しフィールドで画像ギャラリーやスライドショーを制作しているときに、投稿の一覧ページにはギャラリーの一枚目の画像をアイキャッチとして利用したいとします。通常の画像フィールドであればget_fieldタグのみで画像を読み込めますが、繰り返しフィールド内の項目は配列に組み込まれているため違う記述が必要です。この記事ではその方法を紹介します。

繰り返しフィールドの1番目から画像を呼び出すコード例

以下はimg-galleryという繰り返しフィールドにimg_gallery-itemという画像フィールドで画像を投稿し、投稿画像の1番めだけを$img_gallery_item01という変数で呼び出す例です。

<?php
 add_image_size( 'thumbnail', 640, 480,true);
 $img_gallery = get_field('img-gallery');
 $img_gallery_item01 = wp_get_attachment_image($img_gallery[0]['img_gallery-item'], 'thumbnail') ;
?>
<?php echo $img_gallery_item01; ?>

wp_get_attachment_imageは、記事に添付ファイルが存在する場合に、それを表すHTMLのimg要素を呼び出すテンプレートタグです。パラメータで添付ファイルのIDとサイズを参照することができ、今回はそれらを利用しています。

繰り返しフィールドの要素img_gallery-itemは画像IDを出力するように指定しています。2行目のwp_get_attachment_imageで連想配列[0]番の中の、画像フィールドimg_gallery-itemを読み込んでいます。[0]の数字部分を変更することで繰り返しフィールドの何番目の要素を呼び出すかを編集できます。
また、thumbnailは画像のサイズを指定するプロパティです。thumbnailは初期値ですがarray( 480, 320)といった記述でサイズを指定したり、上記のようにadd_image_size()を利用して定義したサイズを呼び出すこともできます。