Advanced Custom Fields PROの繰り返しフィールドで画像を表示する方法

Advanced Custom Fields PROの繰り返しフィールドで画像を表示する方法

2020年7月6日

Advanced Custom Fields PROの繰り返しフィールドで画像を表示する方法を解説します。

繰り返しフィールドの画像を表示する

繰り返しフィールドの名前をimage-repeat、サブフィールドの名前をimageと仮定した場合、以下のコードで画像を繰り返し表示することができます。

<!-- ループ開始 -->
<?php if (have_posts()): ?>
  <?php while (have_posts()) : the_post(); ?>

    <!-- 繰り返しフィールドを表示 -->
    <?php if( have_rows( 'image-repeat' ) ): ?>
      <?php while( have_rows( 'image-repeat' ) ): the_row(); ?>
        <?php
          $img = get_sub_field( 'image' );
          $url = $img['sizes']['medium'];
          $alt = $img['alt'];
        ?>
        <img src="<?php echo $url ?>" alt="<?php echo $alt ?>">
      <?php endwhile; ?>
    <?php endif; ?>

  <?php endwhile; ?>
<?php endif; ?>

$url = $img['sizes']['medium'];mediumは画像のサイズを指定しています。
画像サイズはthumbnailmediumlargefull、もしくはadd_image_sizeで追加した画像サイズを指定することが出来ます。

繰り返しフィールドの画像を1枚だけ表示する

トップページやアーカイブページでは繰り返しフィールドの画像を1枚だけ表示したいことがあります。
その場合は以下のコードで画像を最初の1枚だけ表示することが出来ます。

<!-- ループ開始 -->
<?php if (have_posts()): ?>
  <?php while (have_posts()) : the_post(); ?>

    <!-- 繰り返しフィールド画像を1枚のみ表示 -->
    <?php 
      $i = 0;
      if( have_rows( 'image-repeat' ) ):
    ?>
    <?php while( have_rows( 'image-repeat' ) ): the_row(); $i++; ?>
    <?php
      if( $i > 1 ) {
        break;
      }

      $img = get_sub_field( 'image' );
      $url = $img['sizes']['medium'];
      $alt = $img['alt'];
    ?>
      <div><img src="<?php echo $url ?>" alt="<?php echo $alt ?>"></div>
    <?php endwhile; ?>
    <?php endif; ?>

  <?php endwhile; ?>
<?php endif; ?>

繰り返しフィールドの画像をスライダーで表示する

繰り返しフィールドの画像をイメージスライダーで表示したい場合があります。
SlickというjQueryプラグインで繰り返しフィールドの画像をスライドさせる方法を解説します。

Slickを読み込む

<head>タグ内に以下のコードを追加してSlickのcssファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

</body>タグの直線に以下のコードを追加してSlickのjsファイルを読み込みます。
すでにjQueryを読み込み済みの場合はslick.min.jsだけ読み込めばOKです。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></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というクラスを付けた<div>を追加しています。

<!-- ループ開始 -->
<?php if (have_posts()): ?>
  <?php while (have_posts()) : the_post(); ?>

    <!-- 繰り返しフィールドを表示 -->
    <?php if( have_rows( 'image-repeat' ) ): ?>
      <div class="image-slider">
        <?php while( have_rows( 'image-repeat' ) ): the_row(); ?>
          <?php
            $img = get_sub_field( 'image' );
            $url = $img['sizes']['medium'];
            $alt = $img['alt'];
          ?>
          <img src="<?php echo $url ?>" alt="<?php echo $alt ?>">
        <?php endwhile; ?>
      </div>
    <?php endif; ?>

  <?php endwhile; ?>
<?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には色々なオプションがるので、公式サイトか以下の記事で確認してください。

【jQuery】イメージスライダーslickをレスポンシブサイトで使う方法
Webサイトで画像やコンテンツをスライドさせる場合は、jQueryのスライダープラグインslickをよく使います。僕が携わるwebサイトの9割はレスポンシブWe…
ryob.net

以上で繰り返しフィールドで表示した画像がスライドで表示されます。

まとめ

今回はAdvanced Custom Fields PROの繰り返しフィールドで画像を表示する方法を解説しました。
イメージスライダーにしたりギャラリーのように表示したり色々な活用方法があります。
繰り返しフィールドは有料のAdvanced Custom Fields PROでしか利用できませんが、カスタムフィールドで表現できることが増えるのでぜひ試してみてください。

参考にさせていただいた記事