WordPressのトップページで記事数を取得してデザインを変える

WordPress関連の記事をひとつも書いてなかったことに気づき、いそいそと執筆してます@marronmodeですw
実はreportカテも一切書いておりませんw
ネタはあるので早くかきます、急ぎますw

 
 
 

さて、WordPressのトップページで、最新記事だけ見出し記事のように大きく表示し、次の記事からは小さく並べて表示させたいことってあると思います。
また、記事と記事の間に広告バナーやキャンペーン情報を表示させたいなぁとか。
こんなイメージで↓雑ですいませんw
wpimage

 

offsetとページ送りの相性が悪い件

この場合は「offset」を使うと思うんですが、「offset」を使うとページナビゲーションがうまく動作しない場合があるんです。
わたくし、これで大変悩みましたorz

色々ぐぐって、方法を試してみたのですが、全くうまくいかず・・・
 

offset使うのやーめた

文系脳のわたしにはもう限界でした\(^o^)/
offsetにこだわる理由がわたしにはなかったので、発想を切り替えました。
 

offsetを使わずに記事毎にデザインを変えればいいじゃないか!

counterを使って、最初の記事だけデザインを変更すればいいんじゃないかと。

下記のコードをindex.phpに記述することでうまくいきました!

<?php $paged = get_query_var('paged'); ?>
<?php query_posts($query_string . '&' . 'posts_per_page=10&paged='.$paged); ?>
// posts_per_page には1ページの表示件数を記述
<?php while (have_posts()) : the_post(); $counter++; ?>

<?php if ($counter <= 1) {
  require("post-a.php");
  // 最新記事(大きい記事)のデザインphpを呼び出す
  }else if ($counter == 2) {
    require("campain.php");
  // 1番目と2番目の記事の間にキャンペーンphpを呼び出す
}else{
  require("post-b.php");
  // 小さい記事のデザインphpを呼び出す
  }?>

<?php endwhile;
wp_reset_query();
?>

簡単に解説すると、6行目の記述で、記事が1番目以下の場合は、大きい記事のデザインphpを呼び出し、
1番目以外(つまり2番目以降)の記事については、小さい記事のデザインphpを呼び出すように指定しています。

<?php if ($counter <= 1) {
  require("post-a.php");
  // 最新記事(大きい記事)のデザインphpを呼び出す
  }else if ($counter == 2) {
  require("campain.php");
  // 1番目と2番目の記事の間にキャンペーンphpを呼び出す
}else{
  require("post-b.php");
  // 小さい記事のデザインphpを呼び出す
  }?>

正直、phpについて詳しいとは言えないので、counterの記述の仕方に関して、こちらの記事がとても勉強になりました!
これでかなりのアレンジがきくと思います。
参照:phpを使い表示順番を操作する

また、2行目の記述で、

<?php query_posts($query_string . '&' . 'posts_per_page=10&paged='.$paged); ?>

1ページに大1と小8の計9記事表示されるように、posts_per_pageの値を10にしました。
何故10かというと上記のcampain.php(広告)を引っ張ってくるのに1カウントされるからです。

今回はphpを呼び出してますが、アドセンスなどの広告を○記事目と指定して表示させることもできます。
こちらで詳しく解説されております↓ いやはや参考になります!
参照:WordPressでトップページの記事の間に広告を表示する方法
 

offsetがうまくいかないときはcounterを使おう!

何度も言いますが文系脳故、phpもそんなにわかってないです。
そんなわたしがたどり着いた方法なので、非効率な部分もあると思いますし、もっといい方法もあると思います。
その点、ご指導・アドバイスいただければありがたい限りです!
とりあえず、これで問題なく動いてるので、一件落着ということで・・・!

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です