WordPressのwhileで出力した投稿を指定数ごとにdivで囲む

wordpress

以前書いた「WordPressのwhile文を強制的に1回で終わらせる方法」という記事を書きました。
「whileで書いておいてなぜ一回しか表示させないんだ」というツッコミが出てきそうなぐらい非常にニッチな状況なだけあって、誰も見てくれていません(笑)

今回も少々ニッチな内容ですが、whileで出力した投稿をdivでグルーピングする方法をご紹介します。

出来上がりのイメージはこんな感じです。

グルーピング前

<h2>カスタムフィールドのタイトル1</h2>
<a href="#">カスタムフィールドのタイトル1のリンク</a>
<h2>カスタムフィールドのタイトル2</h2>
<a href="#">カスタムフィールドのタイトル2のリンク</a>
<h2>カスタムフィールドのタイトル3</h2>
<a href="#">カスタムフィールドのタイトル3のリンク</a>
<h2>カスタムフィールドのタイトル4</h2>
<a href="#">カスタムフィールドのタイトル4のリンク</a>
<h2>カスタムフィールドのタイトル5</h2>
<a href="#">カスタムフィールドのタイトル5のリンク</a>
<h2>カスタムフィールドのタイトル6</h2>
<a href="#">カスタムフィールドのタイトル6のリンク</a>
<h2>カスタムフィールドのタイトル7</h2>
<a href="#">カスタムフィールドのタイトル7のリンク</a>
<h2>カスタムフィールドのタイトル8</h2>
<a href="#">カスタムフィールドのタイトル8のリンク</a>

グルーピング後

<div class="group">
    <!-- グループA -->
    <h2>カスタムフィールドのタイトル1</h2>
    <a href="#">カスタムフィールドのタイトル1のリンク</a>
    <h2>カスタムフィールドのタイトル2</h2>
    <a href="#">カスタムフィールドのタイトル2のリンク</a>
    <h2>カスタムフィールドのタイトル3</h2>
    <a href="#">カスタムフィールドのタイトル3のリンク</a>
    <h2>カスタムフィールドのタイトル4</h2>
    <a href="#">カスタムフィールドのタイトル4のリンク</a>
</div>
<div class="group">
    <!-- グループB -->
    <h2>カスタムフィールドのタイトル5</h2>
    <a href="#">カスタムフィールドのタイトル5のリンク</a>
    <h2>カスタムフィールドのタイトル6</h2>
    <a href="#">カスタムフィールドのタイトル6のリンク</a>
    <h2>カスタムフィールドのタイトル7</h2>
    <a href="#">カスタムフィールドのタイトル7のリンク</a>
    <h2>カスタムフィールドのタイトル8</h2>
    <a href="#">カスタムフィールドのタイトル8のリンク</a>
</div>

作った背景

今回も例によってAdvanced Custom Fieldsの有料アドオン「Repeater Field」を使っている時に直面した問題です。Repeater Fieldは用意したひな形を繰り返し使える便利なプラグインなんですが、whileでしか出力出来ません。また特定のarchive.phpが存在するわけではないので、ページネーションを設置することが出来ないのです。jQueryを使って擬似的にページネーションをするには上記のようにdivで囲む必要があったので、作ってみました。

ソースはこんな感じです。

<?php if (has_sub_field('フィールド名')) : ?>
  <?php $post_count = 1; // カウンターの初期化
    echo '<div class="group">' . "\n"; // まず最初の囲みを出力
  ?>
  <?php while(has_sub_field('フィールド名')): ?>
    <?php if ( $post_count % 4 == 1 && $post_count != 1 ) {
      echo '</div>' . "\n" . '<div class="group">' . "\n";
    } // 4で割った余りが1で、なおかつカウンターが1(最初)でなければ閉じdivと囲みの開始タグを出力
  ?>
    <h2><?php the_field('サブフィールド_タイトル'); ?></h2>
    <a href="<?php the_field('サブフィールド_リンク'); ?>"><?php the_field('サブフィールド_タイトル'); ?>のリンク</a>
    <?php $post_count++; // カウンターを1増やす ?>
  <?php endwhile; ?>
  <?php echo '</div>' . "\n"; // 最後にdivを閉じる ?>
<?php endif; ?>

最初に$post_countという変数を用意して、変数が4の倍数ごとに<div class=”group”>で囲むようになっています。こちらはRepeater Fieldを使用した場合で、通常のwhileの場合は以下のようになります。

<?php if (have_posts()): ?>
  <?php $post_count = 1; // カウンターの初期化
    echo '<div class="group">' . "\n"; // まず最初の囲みを出力
  ?>
  <?php while (have_posts()) : the_post(); ?>
    <?php if ( $post_count % 4 == 1 && $post_count != 1 ) {
      echo '</div>' . "\n" . '<div class="group">' . "\n";
    } // 4で割った余りが1で、なおかつカウンターが1(最初)でなければ閉じdivと囲みの開始タグを出力
  ?>
    <h2><?php the_title();?></h2>
    <?php the_content(); ?>
    <?php $post_count++; // カウンターを1増やす ?>
  <?php endwhile; ?>
  <?php echo '</div>' . "\n"; // 最後にdivを閉じる ?>
<?php endif; ?>