奇数、偶数で背景色を変えたり、はじめの記事だけデザインを変更したりする方法です。
まずは基本のWordpressのループタグから
詳細>>
<?php if(have_posts()): ?> <?php while(have_posts()): the_post();?> <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2> <div><p><?php the_content(); ?></p> <p><?php the_category(); ?></p></div> <?php endwhile; ?> <?php else: ?> <p>投稿されたものがありません。</p> <?php endif; ?>
これに、投稿記事の表示が何回目かわかるように変数と数える関数をいれます。
<?php if(have_posts()): ?> <?php $post_counter = 1; ?> <?php while(have_posts()): the_post();?> <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2> <div><p><?php the_content(); ?></p> <p><?php the_category(); ?></p></div> <?php $post_counter++; ?> <?php endwhile; ?> <?php else: ?> <p>投稿されたものがありません。</p> <?php endif; ?>
初期値を1として、ループの最後で$post_counter++で数を1づつたしています。
後は、何回目の投稿でどうするかという風にif文を使って分けてあげれば大丈夫！
例えば、
奇数と偶数の背景を変える
<?php if(have_posts()): ?> <?php $post_counter = 1; ?> <?php while(have_posts()): the_post();?> <?php if($post_counter %2 ==1): ?> <div style="backgraound-color:#ccc;"> <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2> <p><?php the_content(); ?></p> <p><?php the_category(); ?></p></div> <?php else: ?> <div style="backgraound-color:#fcc;"> <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2> <p><?php the_content(); ?></p> <p><?php the_category(); ?></p></div> <?php endif; ?> <?php $post_counter++; ?> <?php endwhile; ?> <?php else: ?> <p>投稿されたものがありません。</p> <?php endif; ?>
if($post_counter %2 == 1)を使うことで奇数と偶数を分けています。
%2は2で割ったあまりの値を返します。
例えば、
・$post_counterが1の場合 $post_counter%2 は1になります。
・$post_counterが2の場合 $post_counter%2 は0になります。
そのため奇数は始めのデータを読み込み、偶数では後のデータを読み込むことになります。
はじめだけ広告を出す方法
<?php if(have_posts()): ?> <?php $post_counter = 1; ?> <?php while(have_posts()): the_post();?> <?php if($post_counter == 1): ?> <div>広告</div> <?php else: ?> <div> <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2> <p><?php the_content(); ?></p> <p><?php the_category(); ?></p></div> <?php endif; ?> <?php $post_counter++; ?> <?php endwhile; ?> <?php else: ?> <p>投稿されたものがありません。</p> <?php endif; ?>
広告と書いている部分に広告タグを埋め込みます。
$post_counter が1の時だけ<div>広告</div>を読みこんで、後は表示されません。