Advanced Custom Fieldsを使用した画像のループ方法をご紹介します。
基本的に私個人としては、Advanced Custom Fieldsで画像情報を取得するさいに、
下記のように配列情報を取得するとほとんどの情報がまとめて取得できるのでいいかと思います。
IDやURLにしてしまうとそれだけになってしまうので…

Advanced Custom Fieldsで取得する情報を配列にした上で、ほしい情報を欲しい箇所に取得していきましょう。
全体的なソースは下記になります。

<ul class="slickImg">
　<?php if(have_rows('acf_gr_library_ss')): ?>
　　<?php while(have_rows('acf_gr_library_ss')): the_row(); ?>
	<?php $thumbnail = get_sub_field('acf_library_ss')['url']; ?>
	<?php $caption = get_sub_field('acf_library_ss')['alt']; ?>
	　<li>
　　　　　　<img src="<?php echo $thumbnail ;?>" alt="<?php if(!empty($caption)) :?>
　　　　　　<?php echo $caption ;?>
　　　　　　<?php else : ?>
　　　　　<?php the_sub_field('acf_library_ss_title'); ?>
　　　　<?php endif; ?>">
　　　　　</li>
　　<?php endwhile; ?>
　<?php endif; ?>
</ul>

今回は繰り返しループ内での画像の取得なので、まずは繰り返しブロックに指定した項目を
have_rowsで指定します。

<?php if(have_rows('acf_gr_library_ss')): ?>
　<?php while(have_rows('acf_gr_library_ss')): the_row(); ?>
　　　～
　<?php endwhile; ?>
<?php endif; ?>

次に、実際に画像に指定したラベル名を吐き出し、ここではURLのみ
吐き出すように[URL]と指定します。

「$thumbnail」という関数に『get_sub_field』で画像のURLを取得しなさいという
ことです。

<?php $thumbnail = get_sub_field('acf_library_ss')['url']; ?>

キャプションをaltタグに設定する場合は先ほどのURL部分をaltに書き換えて
取得します。$caption変数に格納。

<?php $caption = get_sub_field('acf_library_ss')['alt']; ?>

こんな感じで書けば画像が出力されます！
みなさんもぜひ試してみてくだいね★

• blog,
• web,
• wordpress