ループのカウントと連番の出力 ~ACFの繰り返しフィールドを使用して~

ループのカウントと連番の出力 ~ACFの繰り返しフィールドを使用して~

Webサイトにおいて、リスト形式の項目に連番をふる、という表示はよく見かけます。これが動的なコンテンツとなると、静的に1、2、3…と記述するわけにはいきません。
この記事では、WordPressのループにおいて、項目数に応じて自動的に連番を表示させる方法をご紹介します!さまざまな場面で応用できますが、今回はプラグイン:Advanced Custom Field Pro 通称ACFの「繰り返しフィールド」を使用したループを想定しています。

繰り返しフィールドの出力

定型の入力欄をカスタマイズすることができるプラグイン Advanced Custom Field。繰り返しフィールドでは、その名前の通り、繰り返す項目(=ループする項目)を設定することができます。
※繰り返しフィールドの使用は、Pro版へのアップグレードが必要です

今回は、画像とテキストを1つのセットとしたフィールドを作成しました。

その上で、下記コードで出力します。


<section class="sample">
  <div class="sample_wrap">
  <?php if(have_rows('repeater')): ?> <!--繰り返しフィールド'repeater'に入力があるとき -->
    <ul class="sample_list">
      <?php while(have_rows('repeater')): the_row(); ?>
    <?php
    $image = get_sub_field('repeater_image'); //フィールド'repeater_image'を取得し、変数に格納
    $text = get_sub_field('repeater_text'); //フィールド'repeater_text'を取得し、変数に格納
    ?>
      <li class="sample_listItem">
        <figure class="sample_img">
          <img src="<?php echo $image['url']; ?>" alt=""> <!--$imageの配列から画像URLを出力 -->
        </figure>
        <p class="sample_text"><?php echo $text; ?></p> <!--$textを出力 -->
      </li>
      <?php endwhile;?>
    </ul>
    <?php endif; ?>
  </div>
</section>

入力画面から3つの項目を登録した状態がこちらです。

ループのカウントと出力

上記のコードに少し付け加えるだけでループのカウントが可能になります。


<section class="sample">
  <div class="sample_wrap">
  <?php if(have_rows('repeater')): ?>
    <?php $count=1; ?> <!-- ループ開始前に最初の数字を設定 -->
    <ul class="sample_list">
      <?php while(have_rows('repeater')): the_row(); ?>
    <?php
    $image = get_sub_field('repeater_image');
    $text = get_sub_field('repeater_text');
    ?>
      <li class="sample_listItem">
        <!--カウントした数字を出力 ↓ -->
        <p class="sample_count">サンプル<span><?php echo sprintf("%02d",$count); ?></span></p>
        <figure class="sample_img">
          <img src="<?php echo $image['url']; ?>" alt="">
        </figure>
        <p class="sample_text"><?php echo $text; ?>
      </li>
      <?php $count++; ?> <!-- 次のループ開始前に1つ数字を増やす -->
      <?php endwhile;?>
    </ul>
    <?php endif; ?>
  </div>
</section>

“%02d”の記述を入れることで、01, 02, 03…といった2桁の表示にすることができます。
下図の赤文字の部分がループをカウントした数字を出力している部分です。

以上、ループでの連番のカウントと出力でした!文字として表示させるだけでなく、id名やクラス名に付与するなど応用できるので、上手に取り入れて活用していきたいです。

SNSシェア

WP TECH WordPress技術専門 Tips

コーポレートサイトへ

WP TECH WordPress技術専門 Tips

採用サイトへ