グリッドを使って記事を横並びに並べたい場合に、単純にループさせちゃうと margin をいじったり、いろいろと CSS を調整しないといけなくなるので面倒くさい。
なので、例えば3つ毎に横に並べたい場合はこんな風にすると楽。
<pre class="lang:php decode:true"><?php if (have_posts()) : ?>
<?php $post_count = 1; // カウンター初期化
echo '<ul class="row">' . "\n"; // 最初の開始 ul タグを出力
?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( $post_count % 3 == 1 && $post_count != 1 ) { echo '</ul>' . "\n" . '<ul class="row">' . "\n"; } // 3で割った余りが1及び最初の ul でなければ閉じ ul と次の開始 ul タグを出力
?>
<li class="col">
<?php the_content();?>
</li>
<?php $post_count++; // カウンターを+1 ?>
<?php endwhile; ?>
<?php echo '</ul>' . "\n"; // 最後に ul を閉じる ?>
<?php else : ?>
<?php endif; ?>こんな風に出力されます。
<pre class="lang:default decode:true"><ul class="row">
<li class="col">Post 1</li>
<li class="col">Post 2</li>
<li class="col">Post 3</li>
</ul>
<ul class="row">
<li class="col">Post 4</li>
<li class="col">Post 5</li>
<li class="col">Post 6</li>
</ul>
<ul class="row">
<li class="col">Post 7</li>
<li class="col">Post 8</li>
<li class="col">Post 9</li>
</ul>JS でも出来るけど、こんな感じでやっといたほうがスマートですね。
ちなみに、ul 1つで CSS で解決するには、こんな感じでネガティブマージン使うやり方が一番定番かな。もしくは display: inline-block; とか nth-child を使う方法もありますね。
See the Pen sCweJ by johnykei (@johnykei) on CodePen.
参考記事：