アーカイブで投稿記事3件ごと、4件ごとにdivで囲みたい

本記事にはプロモーションが含まれています。

アーカイブページなどでエントリーを3件とか4件とかで横並びにしたいことってたまにありますよね

通常の記事ループ

<?php if(have_posts()): while( have_posts()) : the_post() ; ?>
	<div class="post">
		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<div>
			<?php the_content(); ?>
		</div>
	</div>
<?php endwhile; endinf; ?>

4記事ごとにdivで囲みたい

<?php if (have_posts()) : ?>
<?php $hoge = 1;  ?>
	<div class="row">
<?php while (have_posts()) : the_post(); ?>
<?php if ( $hoge % 4 == 1 && $hoge != 1 ): ?>
	</div>
	<div class="row">
<?php endif; ?>
  <div class="post">
    <?php the_content();?>
  </div>
<?php $hoge++;  ?>
<?php endwhile; ?>
	</div>
<?php else : ?>
<?php endif; ?>

$hoge = 1;

ループの回数を入れる変数

$hoge % 4 == 1 && $hoge != 1

4で割った余りが1で、かつカウンターが1(最初)でなければdivを閉じて次のdivタグを出力 します。

$hoge++;

ループ回数を1つ増やす。

参考にさせてもらった記事

[解決済み] [閉] 記事を決められた数毎にタグ(div等)で囲みたい
http://ja.forums.wordpress.org/topic/1101

WordPressのエントリーを横並びにしてぴったり揃える
http://www.webopixel.net/wordpress/140.html

web pixelさんではoverflow:hidden を使ってcssだけで横並びする方法も記載されています。

current_postを使ってループ内の投稿数を取得する方法はこちら

この記事を書いた人

sorami

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。
2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 » 
もっとくわしく