投稿記事を○件目で条件分岐させる処理は個人的にもよく利用するため、
「投稿記事の1件目だけ記事本文を表示させて、2件目以降では記事本文を表示させない」
「記事を奇数件と偶数件でデザインを変更する」
「1件目と2件目の記事の間に広告を挟みこむ」
など、ブログや企業サイト問わず使えそうな事例を中心にまとめてみました。
（１）投稿記事の1件目だけ、デザインやレイアウトを変更する
1件目の記事と2件名以降の記事でデザインやレイアウトを変更する場合、1件目の記事にclassAを、2件目以降の記事にclassBを付与してあげれば、CSS側でデザイン制御が可能になります。まず最初に functions.php に以下のコードを挿入します。
[php] <?php
function isFirst(){
global $wp_query;
return ($wp_query->current_post === 0);
}
?>
[/php]
次に index.php や archive.php などのテーマファイルで、振分処理を行いたい場所に以下のコードを挿入します。
[php] <div id="post-<?php the_ID(); ?>"
<?php
//1件目の記事には classA 付与
if (isFirst()) {
post_class(‘classA’);
}
//2件目以降の記事には classB 付与
else {
post_class(‘classB’);
}?>>
ブログの中身
</div>
[/php]
（２）投稿記事の1 件目だけ記事本文を表示させて、2 件目以降では記事本文を表示させない
この場合（１）にようにclass を振り分けることでも実装可能ですが、isFirst() を利用して1件目の記事にだけ the_content() で記事本文を表示させた方が楽かもしれません。（１）同様 functions.php に以下のコードを挿入します。
[php] <?php
function isFirst(){
global $wp_query;
return ($wp_query->current_post === 0);
}
?>
[/php]
続いてテーマファイルに、1 件目の記事には記事本文を表示させるが、2 件名以降は記事本文を表示させない（記事タイトルのみを表示）という処理を施してあげます。
[php] <?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; ?>
[/php]
出力させる情報を振り分けることで「1 件目の記事にだけ画像（投稿画像、またはアイキャッチ画像）を表示させる」などなど、他にも応用できます。
（３）奇数件数、偶数件数でデザインやレイアウトを変更する
（１）の「投稿記事の1件目だけ、デザインやレイアウトを変更する」カスタマイズと考え方は同じで、奇数件、偶数件でそれぞれ別のclassを付与してあげます。[php] <?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; ?>
[/php]
（１）の処理同様、functions.php 内にまとめてしまうことも可能です。
[php] <?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);
}
?>
[/php]
isOdd()、isEvery() を利用して、奇数件と偶数件とで記事の出力内容を変えてしまうことも出来そうですね。
参考サイト
奇数件目と偶数件目で違う情報を表示する方法
奇数件目と偶数件目で違う情報を表示する方法
（４）1 件目と2 件目の記事の間に広告を挿入する
1 件目と2 件目の記事の間にバナー広告が掲載されているブログをよく見かけますが、前述の考え方と同様、isFirst() を利用して1 件目の記事を取得し、その記事直下にバナーを設置することができます。[php] <?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; ?>
[/php]
2件目以降の記事には広告は表示されません。
また、以下のようなコードを書いても、記事の1 件目と2 件目の間に広告を挟み込むことができるようです。
今回は記事の「1 件目と2 件目」なので、$counter <=2 とします。
[php] <?php if ($counter <= 2) {
print <<<EOD
広告コードを挿入
EOD;
} ?>
[/php]
（５）記事を「2件目」から表示させる
「1 件目の記事はサイトやブログの上部でピックアップ記事として大々的に取り上げ、2 件目以降の記事は比較的小さくリスト表示させる」なんて場合に便利なカスタマイズだと思います。記事を2件目から表示させる方法ですが、この場合、query_posts() の引数として offset を指定します。
例として、1件目を除いた記事を5 件表示させるには以下のように記述します。
[php] <?php query_posts(‘showposts=5&offset=1’); ?>
[/php]
注意点ですが、offset を利用する場合、WP-pagenavi でページ送りをさせると正常にページ送りできない場合がありますので、以下の記事を参考に回避処理も同時に施してあげます。
コメントを残す