コーディング

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

2017.08.29

2017.09.07

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

投稿の詳細ページに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()を利用して定義したサイズを呼び出すこともできます。

まとめ

少し特殊な用例でしたが、通常のアイキャッチが事情があって使えないときや、各記事のギャラリーから抜粋画像を一覧表示したいときなどに利用できますのでお試し下さい。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。