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の表示設定を行うことができます。