WordPress 記事3件ごと、4件ごとに〜する



アーカイブページなどでエントリーを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だけで横並びする方法も記載せれています。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする