投稿記事を○件目で条件分岐させる処理は個人的にもよく利用するため、
「投稿記事の1件目だけ記事本文を表示させて、2件目以降では記事本文を表示させない」
「記事を奇数件と偶数件でデザインを変更する」
「1件目と2件目の記事の間に広告を挟みこむ」
など、ブログや企業サイト問わず使えそうな事例を中心にまとめてみました。
（１）投稿記事の1件目だけ、デザインやレイアウトを変更する
1件目の記事と2件名以降の記事でデザインやレイアウトを変更する場合、1件目の記事にclassAを、2件目以降の記事にclassBを付与してあげれば、CSS側でデザイン制御が可能になります。まず最初にfunctions.phpに以下のコードを挿入します。
|
1 2 3 4 5 6 |
<?php function isFirst(){ global $wp_query; return ($wp_query->current_post === 0); } ?> |
次にindex.phpやarchive.phpなどのテーマファイルで、振分処理を行いたい場所に以下のコードを挿入します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="post-<?php the_ID(); ?>" <?php //1件目の記事には classA 付与 if (isFirst()) { post_class('classA'); } //2件目以降の記事には classB 付与 else { post_class('classB'); }?>> ブログの中身 </div> |
（２）投稿記事の1件目だけ記事本文を表示させて、2件目以降では記事本文を表示させない
この場合（１）にようにclassを振り分けることでも実装可能ですが、isFirst()を利用して1件目の記事にだけthe_content()で記事本文を表示させた方が楽かもしれません。（１）同様functions.phpに以下のコードを挿入します。
|
1 2 3 4 5 6 |
<?php function isFirst(){ global $wp_query; return ($wp_query->current_post === 0); } ?> |
続いてテーマファイルに、1件目の記事には記事本文を表示させるが、2件名以降は記事本文を表示させない（記事タイトルのみを表示）という処理を施してあげます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div id="post-<?php the_ID(); ?>"> <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <?php //1件目の記事では記事本文を表示 if (isFirst()) { ?> <div class="entry"> <?php the_content(); ?> </div> <?php } //2件目以降の記事には、記事本文を表示させない else { ?> <?php } ?> </div> <?php endwhile; ?> <?php endif; ?> |
出力させる情報を振り分けることで「1件目の記事にだけ画像（投稿画像、またはアイキャッチ画像）を表示させる」などなど、他にも応用できます。
参考ページ
WordPressの記事ループの中で、最初や最後の記事とかを判別する
（３）奇数件数、偶数件数でデザインやレイアウトを変更する
（１）の「投稿記事の1件目だけ、デザインやレイアウトを変更する」カスタマイズと考え方は同じで、奇数件、偶数件でそれぞれ別のclassを付与してあげます。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <?php global $wp_query; if ((($wp_query->current_post+1) % 2) === 1) { ?> <div id="post-<?php the_ID(); ?>" <?php //奇数件目の記事には oddクラス（odd）付与 post_class('odd') ; ?>> <?php } elseif ((($wp_query->current_post+1) % 2) === 0) { ?> <div id="post-<?php the_ID(); ?>" <?php //偶数件目の記事には evenクラス（even）付与 post_class('even') ; ?>> <?php } ?> <?php endwhile; ?> <?php endif; ?> |
（１）の処理同様、functions.php内にまとめてしまうことも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php function isOdd(){ global $wp_query; return ((($wp_query->current_post+1) % 2) === 1); } function isEvery(){ global $wp_query; return ((($wp_query->current_post+1) % 2) === 0); } ?> |
isOdd()、isEvery()を利用して、奇数件と偶数件とで記事の出力内容を変えてしまうことも出来そうですね。
参考ページ
http://docs.yumeka.org/bg_p/667.html
（４）1件目と2件目の記事の間に広告を挿入する
1件目と2件目の記事の間にバナー広告が掲載されているブログをよく見かけますが、前述の考え方と同様、isFirst()を利用して1件目の記事を取得し、その記事直下にバナーを設置することができます。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div id="post-<?php the_ID(); ?>"> <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <div class="entry"><?php the_content(); ?></div> <?php //1件目の記事の後ろに広告を挿入。 if (isFirst()) { ?> 広告コードを挿入; <?php } //2件目以降の記事には広告は表示させない。 else { ?> <?php } ?> </div> <?php endwhile; ?> <?php endif; ?> |
2件目以降の記事には広告は表示されません。
また、以下のようなコードを書いても記事の1件目と2件目の間に広告を挟み込むことができるようです。
今回は記事の「1件目と2件目」なので、$counter <=2 とします。
|
1 2 3 4 5 |
<?php if ($counter <= 2) { print <<<EOD 広告コードを挿入 EOD; } ?> |
参考ページ
WordPressで1件目の記事と個別ページだけに処理をする
（５）記事を「2件目」から表示させる
「1件目の記事はサイトやブログの上部でピックアップ記事として大々的に取り上げ、2件目以降の記事は比較的小さくリスト表示させる」なんて場合に便利なカスタマイズだと思います。記事を2件目から表示させる方法ですが、この場合、query_posts()の引数としてoffsetを指定します。
例として、1件目を除いた記事を5件表示させるには以下のように記述します。
|
1 |
<?php query_posts('showposts=5&offset=1'); ?> |
参考ページ
http://nejimaki-act.com/wp73/entry-offse/
注意点ですが、offsetを利用する場合、WP-pagenaviでページ送りをさせると正常にページ送りできない場合がありますので、以下の記事を参考に回避処理も同時に施してあげます。
参考ページ
http://wald-grun.biz/blog/wp/350/
コメント