【WordPress】特定の回数サブループを回し、そのブロックをラッパーで囲む方法

こんにちは、ゆうや（@yuyaphotograph）です！

この記事では、

WordPressサブループで特定の回数ループを回して、そのブロックをなんらかのラッパー（div）で囲む方法が知りたい

という方のお悩みを解決します！

このTips、ぼくは実際のWeb制作案件で2回ほどお世話になりました。

通常ループを回すときには、display:flexを指定した親要素（div）の中で展開するだけですが、特定の回数でループを回し終えたところでdivを閉じ、また新たな親要素（div）の開始タグを設置、その中にループ要素を展開、そしてまた閉じる、といった仕様にしたい場合には少し工夫が必要となります。

以下で紹介するコードを真似れば簡単に実装することができますので試してみてください。

WordPressにおけるWeb制作の作業で躓いている方のお役に立てれば幸いです。

特定の回数でループを回し終えたところでdivを閉じ、また新たな親要素の開始タグを設置

任意のテンプレートファイルの該当箇所で以下のコードを貼り付けましょう。

このコードでは、4回ループを回し終えたところで親要素のdivを閉じ、新しい親要素の開始タグを設置する仕様となっております。

投稿タイプはよしなに設定してください。

page-news.php

<?php
$args = array(
  'post_type' => "投稿タイプスラッグ",
);
?>

<?php
  $my_query = new WP_Query($args);
  if ($my_query->have_posts()):
?>
<?php $post_count = 1; // カウンター初期化
echo '<div>' . "\n"; // 最初の開始タグを出力
?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<?php if ( $post_count % 4 == 1 && $post_count != 1 ) { echo '</div>' . "\n" . '<div>' . "\n"; } // 4で割った余りが1及び最初のdivでなければ閉じdivと次の開始divタグを出力
?>

ループさせたい要素

<?php $post_count++; // カウンターを+1 ?>
<?php endwhile; ?>
<?php echo '</div>' . "\n"; // 最後に閉じる ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

ループを抜ける回数を変更したい場合は、

コード