2020年

Advanced Custom Fields PROの繰り返しフィールドで画像を表示する方法を解説します。 繰り返しフィールドの画像を表示する 繰り返しフィールドの名前をimage-repeat、サブフィールドの名前をimageと仮定した場合、以下のコードで画像を繰り返し表示することができます。 &lt;!-- ループ開始 --> &lt;?php if (have_posts()): ?> &lt;?php while (have_posts()) : the_post(); ?> &lt;!-- 繰り返しフィールドを表示 --> &lt;?php if( have_rows( 'image-repeat' ) ): ?> &lt;?php while( have_rows( 'image-repeat' ) ): the_row(); ?> &lt;?php $img = get_sub_field( 'image' ); $url = $img['sizes']['medium']; $alt = $img['alt']; ?> &lt;img src="&lt;?php echo $url ?>" alt="&lt;?php echo $alt ?>"> &lt;?php endwhile; ?> &lt;?php endif; ?> &lt;?php endwhile; ?> &lt;?php endif; ?> $url = $img['sizes']['medium'];のmediumは画像のサイズを指定しています。画像サイズはthumbnail、medium、large、full、もしくはadd_image_sizeで追加した画像サイズを指定することが出来ます。 繰り返しフィールドの画像を1枚だけ表示する トップページやアーカイブページでは繰り返しフィールドの画像を1枚だけ表示したいことがあります。その場合は以下のコードで画像を最初の1枚だけ表示することが出来ます。 &lt;!-- ループ開始 --> &lt;?php if (have_posts()): ?> &lt;?php while (have_posts()) : the_post(); ?> &lt;!-- 繰り返しフィールド画像を1枚のみ表示 --> &lt;?php $i = 0; if( have_rows( 'image-repeat' ) ): ?> &lt;?php while( have_rows( 'image-repeat' ) ): the_row(); $i++; ?> &lt;?php if( $i > 1 ) { break; } $img = get_sub_field( 'image' ); $url = $img['sizes']['medium']; $alt = $img['alt']; ?> &lt;div>&lt;img src="&lt;?php echo $url ?>" alt="&lt;?php echo $alt ?>">&lt;/div> &lt;?php endwhile; ?> &lt;?php endif; ?> &lt;?php endwhile; ?> &lt;?php endif; ?> 繰り返しフィールドの画像をスライダーで表示する 繰り返しフィールドの画像をイメージスライダーで表示したい場合があります。SlickというjQueryプラグインで繰り返しフィールドの画像をスライドさせる方法を解説します。 Slickを読み込む &lt;head&gt;タグ内に以下のコードを追加してSlickのcssファイルを読み込みます。 &lt;link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> &lt;link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> &lt;/body&gt;タグの直線に以下のコードを追加してSlickのjsファイルを読み込みます。すでにjQueryを読み込み済みの場合はslick.min.jsだけ読み込めばOKです。 &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js">&lt;/script> &lt;script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js">&lt;/script> &lt;script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js">&lt;/script> functions.phpで読み込む場合は以下のコードを追加してください。 function my_theme_scripts() { // cssファイルを読み込む wp_enqueue_style( 'slick-css', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css', array(), null ); wp_enqueue_style( 'slick-theme-css', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css', array(), null ); // jsファイルを読み込む wp_enqueue_script( 'slick-js', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts' ); 繰り返しフィールドの画像を表示する イメージスライダーを表示する箇所に以下のコードを追加してください。繰り返しフィールドの画像を表示するコードとほぼ同じですが、.image-sliderというクラスを付けた&lt;div&gt;を追加しています。 &lt;!-- ループ開始 --> &lt;?php if (have_posts()): ?> &lt;?php while (have_posts()) : the_post(); ?> &lt;!-- 繰り返しフィールドを表示 --> &lt;?php if( have_rows( 'image-repeat' ) ): ?> &lt;div class="image-slider"> &lt;?php while( have_rows( 'image-repeat' ) ): the_row(); ?> &lt;?php $img = get_sub_field( 'image' ); $url = $img['sizes']['medium']; $alt = $img['alt']; ?> &lt;img src="&lt;?php echo $url ?>" alt="&lt;?php echo $alt ?>"> &lt;?php endwhile; ?> &lt;/div> &lt;?php endif; ?> &lt;?php endwhile; ?> &lt;?php endif; ?> Slick用のjQueryを記述する jsファイルにSlick用のjQueryを記述します。 $(document).ready(function(){ $('.image-slider').slick({ arrows: false, dots: true, autoplay: true }); }); WordPressに初めから読み込まれているjQueryを使用する場合、上記のコードではSlickが動作しない場合があります。その場合は以下のコードを試してみてください。 jQuery(function ($) { $('.image-slider').slick({ arrows: false, dots: true, autoplay: true }); }); Slickには色々なオプションがるので、公式サイトか以下の記事で確認してください。 以上で繰り返しフィールドで表示した画像がスライドで表示されます。 まとめ 今回はAdvanced Custom Fields PROの繰り返しフィールドで画像を表示する方法を解説しました。イメージスライダーにしたりギャラリーのように表示したり色々な活用方法があります。繰り返しフィールドは有料のAdvanced Custom Fields PROでしか利用できませんが、カスタムフィールドで表現できることが増えるのでぜひ試してみてください。 Advanced Custom Fields PROの公式サイト 参考にさせていただいた記事 advanced custom fieldsのRepeater Fieldで表示件数を制御したい繰り返しフィールドでもOK！ACFで画像サイズを指定して出力するコード