WordPress Katsuya

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

wordpress

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

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

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

グルーピング前

<h2>カスタムフィールドのタイトル１</h2>
<a href="#">カスタムフィールドのタイトル１のリンク</a>
<h2>カスタムフィールドのタイトル２</h2>
<a href="#">カスタムフィールドのタイトル２のリンク</a>
<h2>カスタムフィールドのタイトル３</h2>
<a href="#">カスタムフィールドのタイトル３のリンク</a>
<h2>カスタムフィールドのタイトル４</h2>
<a href="#">カスタムフィールドのタイトル４のリンク</a>
<h2>カスタムフィールドのタイトル５</h2>
<a href="#">カスタムフィールドのタイトル５のリンク</a>
<h2>カスタムフィールドのタイトル６</h2>
<a href="#">カスタムフィールドのタイトル６のリンク</a>
<h2>カスタムフィールドのタイトル７</h2>
<a href="#">カスタムフィールドのタイトル７のリンク</a>
<h2>カスタムフィールドのタイトル８</h2>
<a href="#">カスタムフィールドのタイトル８のリンク</a>

グルーピング後

<div class="group">
    <!-- グループA -->
    <h2>カスタムフィールドのタイトル１</h2>
    <a href="#">カスタムフィールドのタイトル１のリンク</a>
    <h2>カスタムフィールドのタイトル２</h2>
    <a href="#">カスタムフィールドのタイトル２のリンク</a>
    <h2>カスタムフィールドのタイトル３</h2>
    <a href="#">カスタムフィールドのタイトル３のリンク</a>
    <h2>カスタムフィールドのタイトル４</h2>
    <a href="#">カスタムフィールドのタイトル４のリンク</a>
</div>
<div class="group">
    <!-- グループB -->
    <h2>カスタムフィールドのタイトル５</h2>
    <a href="#">カスタムフィールドのタイトル５のリンク</a>
    <h2>カスタムフィールドのタイトル６</h2>
    <a href="#">カスタムフィールドのタイトル６のリンク</a>
    <h2>カスタムフィールドのタイトル７</h2>
    <a href="#">カスタムフィールドのタイトル７のリンク</a>
    <h2>カスタムフィールドのタイトル８</h2>
    <a href="#">カスタムフィールドのタイトル８のリンク</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++; // カウンターを１増やす ?>
  <?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++; // カウンターを１増やす ?>
  <?php endwhile; ?>
  <?php echo '</div>' . "\n"; // 最後にdivを閉じる ?>
<?php endif; ?>

RECOMMENDこちらの記事も人気です。