Advanced Custom Fieldsで入力された要素の数をカウントし、出力内容を分岐させる方法

Advanced Custom Fieldsで入力された要素の数をカウントし、出力内容を分岐させる方法

WordPressで構築されたwebサイトでバナーをスライド(swiper)表示するためにAdvanced Custom Fieldsの繰り返しフィールドを使いたい。
そして、バナーが一つの場合、二つの場合、それ以外で表示幅や出力内容を変えたい。

例えば
一つの場合だと幅33.33%表示でPC、SP共にスライド無し。
二つの場合は幅66.66%表示でPCではスライド無し。SPではスライド有り。
それ以外の場合は幅100%表示でPC、SP共にスライド有り。

こんな限定的な条件はあまりないですが、クライアントから要望があったので実装してみることに。

そのためにはAdvanced Custom Fields の繰り返しフィールドに入力された要素の数をカウント。
要素が一つの場合、二つの場合、それ以外で出力内容を分岐させる必要がありました。

出来上がったコードはこちら。

<?php if( have_rows('繰り返しフィールド名') ): ?>
<div class="ban-area-wrap">
    <?php $counter = count(get_field('繰り返しフィールド名')); ?>
    <?php
    if ( $counter == 2 ) {
        echo '<div class="ban-area count-2"><div class="swiper-container pat3">';
    } elseif ( $counter == 1 ) {
        echo '<div class="ban-area count-1"><div class="swiper-container pat2">';
    } else {
        echo '<div class="ban-area"><div class="swiper-container pat1">';
    }
    ?>
          <ul class="swiper-wrapper">
              <?php while ( have_rows('繰り返しフィールド名') ) : the_row(); ?>
              <li class="swiper-slide"> <a href="<?php the_sub_field('url'); ?>" target="_blank"><img src="<?php the_sub_field('画像'); ?>" alt=""></a> </li>
              <?php endwhile; ?>
          </ul>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
      </div><!-- /.swiper-container -->
    </div><!-- /.ban-area -->
</div><!-- /.ban-area-wrap -->
<?php endif; ?>

やや回りくどい書き方ですが、繰り返しフィールドの数をカウントし、パターンごとにクラス名を付与。
それぞれのケースで見た目やswiperの表示設定を行うことができます。

SPONSORED LINK

CONTACT

ご意見やご感想、お仕事のご依頼など
お気軽にご連絡ください。

CONTACT FORM