ACFの繰り返しフィールドの数によってページネーションをつけたい！

SUGOYOKU BLOG

はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。

カスタムフィールドの値を取得して、それを固定ページに何件ずつ表示したいということはありませんか？
今回は、Advanced Custom Fieldsの繰り返しフィールドを使用して、その件数によってページネーションを実装するという機会がありましたので書き残しておきます。

→「CSSの縦書きで文字がガタガタになるときのfont-feature-settings」はこちらから

繰り返しフィールドの数によってページネーションを実装したい！

おおまかな動きとしては、カスタムフィールドの値が何番目のものであるかをカウントして、その数とページスラッグのパラメーターの数値によってページングの処理を行っています。

こちら↓↓のコードをそのままコピペして、「！！」のコメントをつけている1ページに表示するアイテム数とカスタムフィールドの名前を変更してください。

<?php
  if( get_query_var('paged') ) { // 現在のページ数の取得
    $page = get_query_var( 'paged' );
  } else {
    $page = 1;
  }
  // いろいろな数値の設定
  $row              = 0;
  $images_per_page  = 10; // ！！1ページに表示させたいアイテムの数に設定する！！
  $images           = get_field( 'item_group' ); // ！！繰り返しフィールドの名前を設定！！
  $total            = count( $images ); // 繰り返しフィールドの中身の数
  $pages            = ceil( $total / $images_per_page ); // 何ページ必要になるか
  $min              = ( ( $page * $images_per_page ) - $images_per_page ) + 1; // そのページの最初のアイテムが繰り返しフィールドの何番目か
  $max              = ( $min + $images_per_page ) - 1; // そのページの最後のアイテムが繰り返しフィールドの何番目か

  // 繰り返しフィールドの中身をループで表示
  if( have_rows( 'item_group' ) ) : ?>
  
  <div class="content">
    <?php while( have_rows( 'item_group' ) ): the_row();
      $row++; //1アイテムごとにカウントアップ
      // $minの値よりも$rowの値が小さいときはサブフィールドの出力に進まずループを続ける。たとえば2ページ目は11番目のアイテムからしか出力しない
      if($row < $min) { continue; }
      // $maxの値よりも$rowの値が大きいときはサブフィールドの出力に進まずループを抜ける。たとえば2ページ目は20番目のアイテムまでしか出力しない
      if($row > $max) { break; } ?>

      <div class="content-item">
        <?php the_sub_field('item'); ?>
      </div>
    <?php endwhile; ?>
  </div>

  <div class="pagenation">
    <?php 
      // ページネーションの表示・設定
      echo paginate_links( array(
        'base' => get_permalink() . 'page%#%' . '/', // '現在のページスラッグ/page/数字' の形のリンクを生成
        'format' => '?page=%#%',
        'current' => $page,
        'total' => $pages,
        'prev_text' => 'PREV', //「前の記事へ」などのテキスト
        'next_text' => 'NEXT', //「次の記事へ」などのテキスト
      ) );
    ?>
  </div>

<?php endif; ?>

<?php

if( get_query_var('paged') ) { // 現在のページ数の取得

$page = get_query_var( 'paged' );

} else {

$page = 1;

}

// いろいろな数値の設定

$row = 0;

$images_per_page = 10; // ！！1ページに表示させたいアイテムの数に設定する！！

$images = get_field( 'item_group' ); // ！！繰り返しフィールドの名前を設定！！

$total = count( $images ); // 繰り返しフィールドの中身の数

$pages = ceil( $total / $images_per_page ); // 何ページ必要になるか

$min = ( ( $page * $images_per_page ) - $images_per_page ) + 1; // そのページの最初のアイテムが繰り返しフィールドの何番目か

$max = ( $min + $images_per_page ) - 1; // そのページの最後のアイテムが繰り返しフィールドの何番目か

// 繰り返しフィールドの中身をループで表示

if( have_rows( 'item_group' ) ) : ?>

<?php while( have_rows( 'item_group' ) ): the_row();

$row++; //1アイテムごとにカウントアップ

// $minの値よりも$rowの値が小さいときはサブフィールドの出力に進まずループを続ける。たとえば2ページ目は11番目のアイテムからしか出力しない

if($row < $min) { continue; }

// $maxの値よりも$rowの値が大きいときはサブフィールドの出力に進まずループを抜ける。たとえば2ページ目は20番目のアイテムまでしか出力しない

if($row > $max) { break; } ?>

<?php the_sub_field('item'); ?>

</div>

<?php endwhile; ?>

</div>

<?php

// ページネーションの表示・設定

echo paginate_links( array(

'base' => get_permalink() . 'page%#%' . '/', // '現在のページスラッグ/page/数字' の形のリンクを生成

'format' => '?page=%#%',

'current' => $page,

'total' => $pages,

'prev_text' => 'PREV', //「前の記事へ」などのテキスト

'next_text' => 'NEXT', //「次の記事へ」などのテキスト

) );

</div>

<?php endif; ?>

おわりに

こちらのサイト→　How to add Pagination on an Advanced Custom Fields Repeater を参考に、そのままではうまく動かなかったのですこし修正を加えています。

日本語の記事がなかなか見つからなかったので、どなたかのの参考にしていただけたら幸いです。

HP無料診断

【実践マーケティング手法２２選】無料ダウンロード

助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

SUGOYOKU BLOG