アーカイブページなどでエントリーを3件とか4件とかで横並びにしたいことってたまにありますよね
ちゃんとプログラムを理解している人ならすごく簡単なことだと思うのですが、ノンプログラマの私には毎回戸惑います。
なのでこれを機会にあらためておさらいを。
通常の記事ループ
|
1 2 3 4 5 6 7 8 |
<?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で囲みたい
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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
４で割った余りが１で、かつカウンターが１（最初）でなければ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だけで横並びする方法も記載せれています。
