Wordoressのアーカイブページで４記事ごとにDivタグで括る方法

こんばんは、トウコ（@at_tokotoko）です。

カスタマイズにあたって一番ナゾだった部分に手をつけました。
ほんとみんなどうやってるんだ？？と謎だったので、今回なんとか実装できてホッとしました。

いろんなやり方があると思うので、他の方法も知りたい…

WordPressのアーカイブページで記事を横並びにしたい

記事を並べる時、横に２列、３列、４列…とやっていくと、記事が二行目になったときにレイアウト崩れする問題です。

floatでレイアウトするとき、１列目の記事が短かったり長かったりすると派手にレイアウト崩れして記事一個だけが残って３行目に行ってしまったりと意図しない動きをします。

なので記事４個横に並べたいのなら、その記事をまとめて<div>でくくってしまえばいいとと思うのですが、Wordpressの場合自動でループで生成されるわけですから、生成される前に<div>でくくる…ということができないです。

でもDivで括りたいんだよ〜！

そういう時に検索して教えていただいた方法です。

<?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"; } // ４で割った余りが１で、なおかつカウンターが１（最初）でなければ閉じdivと囲みの開始タグを出力
?>
  <div class="post">
    <?php the_content();?>
  </div>
<?php $post_count++; // カウンターを１増やす ?>
<?php endwhile; ?>
<?php echo '</div>' . "\n"; // 最後にdivを閉じる ?>
<?php else : ?>
<?php endif; ?>

groupにclear:both;を当てます。
%4の部分を3にすれば３記事というようにカスタマイズできます。

今回はこちらがとても参考になりました。
ありがとうございます。

サポートフォーラム

記事を決められた数毎にタグ(div等)で囲みたい 記事を決められた数毎にタグ(div等)で囲みたい 解決済 developer (@6flat) 15年、 11…

とくしよネット

アーカイブで投稿記事3件ごと、4件ごとにdivで囲みたい アーカイブページなどでエントリーを3件とか4件とかで横並びにしたいことってたまにありますよね 通常の記事ループ

まとめ

今回はfloatでのレイアウトだったのでこの技が必要でしたが、flexでレイアウトすればこれは必要ない気がします。
むしろもうレガシーなレイアウトかも…

まあでもせっかく覚えたので備忘録的に残しておきます。