【WordPress】複雑なループでもシンプルに書こう 〜IF文 地獄にならないために〜｜Blog｜株式会社トライム

記事をn件ごとにタグで囲みたい

WordPressでサイトを制作していてよくある、記事を任意の数ごとにタグで
囲みたいという場合ですが、普通に IF文 を使って書くと下記のようになります。

通常の書き方

<?php if ( have_posts() ) : ?>
  <?php $i = 1; ?>
  <ul class="row">
  <?php while( have_posts() ) : the_post(); ?>
 
    <?php if ( $i % 3 == 1 && $i != 1 ) : ?>
      </ul>
      <ul class="row">
    <?php endif; ?>
 
     <li class="col">
       <h2 class="title"><?php the_title(); ?></h2>
       <p class="date"><?php the_time('Y.m.d');?></p>
       <div class="detail"><?php the_content();?></div>
     </li>
 
  <?php $i++; ?>
  <?php endwhile;?>
  </ul>
<?php endif; ?>

<ul class="row"> が何度も登場して、ひと目見ただけでは、一体今どこなのか分かりません。
閉じタグ </ul> が開始タグの前に入っているのもなんだか気持ちが悪いです。

また、プログラムとHTMLは出来る限り分離したいところです。
そこで一度、配列として都合の良い形に整形してしまいます。

配列化

<?php
  if ( have_posts() ) {

    $separate = 3; // 何件ずつ処理するか
    $index    = 0; // 現在のブロックをカウント

    while ( have_posts() ) { the_post();

      // 必要な情報を配列化
      $deta = array(
        'title'   => get_the_title(),       // タイトル
        'date'    => get_the_time('Y.m.d'), // 日付
        'content' => get_the_content()      // 本文
      );

      if ( ( $count % $separate ) === 0 ) { // $count を $separate で割った余りが 0 の場合
        $index++;   // 現在のブロックをプラス1
        $count = 0; // ブロック内の記事数リセット
      }

      $entries[$index][$count] = $deta; // $detaを配列に入れる
      $count++; // ブロック内の記事数をプラス1
    }
  }
?>

<ul class="row">
  <?php foreach ( $entries as $entry ) : ?>

    <li class="col">
      <?php foreach ( $entry as $detail ) : ?>

        <h2 class="title"><?php echo $detail['title']; ?></h2>
        <p class="date"><?php echo $detail['date']; ?></p>
        <div class="detail"><?php echo $detail['content']; ?></div>

      <?php endforeach; ?>
    </li>

  <?php endforeach; ?>
</ul>

シンプルなコードで比較しているので、コードが長くなってしまったように見えますが、
今どこにいてどういう処理をしているのか、見通しが良くなりました。

複雑な構造になりそうな場合は以上のように配列化してしまうと楽なことが多いです。