WordPressで最新記事を判別して大きく見せるなど、表示を変更する条件分岐のカスタマイズ方法

こんにちは、メディア事業部ウェブディレクターのコネル飯塚です。

WordPressでブログを運営していると、トップページなどに記事一覧を表示させている場合が多いと思います。
かっこ良いWordPressテンプレートもたくさんありますが、通常のループの使い方では記事一覧のすべてが同じ投稿形式の表示方法になります。

そこで、今回は記事一覧の最新の投稿記事のみ画像を大きく見せるなどが出来るように、最初の記事を判別する方法を説明していきます。
この方法を使えば、「最初の１つ」だけではなく、「最初から３つすべて」や「４つ目だけ」など、応用して見せ方に変化をつけることができます。

同じ形式の記事一覧をループさせている状態から少し変化やアクセントを付けて、見せ方を変えてみませんか？とても簡単なカスタマイズ方法なので、是非参考にしてみてください！

ループの使い方

まず、WordPressで記事一覧のような投稿記事や固定ページを表示させるための基本的な「ループ」のPHPコードを説明します。

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
// ループ処理する内容を記述する
<?php endwhile; ?>
<?php endif; ?>

上記が基本的なループになりますが、その前に。

ループ内で使用するテンプレートタグの例

ループ内で使用するテンプレートタグを例として挙げてみます。

//投稿記事のタイトルを取得して出力
<?php the_title(); ?>

//投稿記事の本文を取得して出力
<?php the_content(); ?>

//投稿記事のURLを取得して出力
<?php the_permalink(); ?>

上記のようなループ処理したい内容を「ループ」内に記述してあげることで、それが処理され繰り返し表示されるわけです。

「ループ」のPHPコードについて

次に、「ループ」のPHPコードを小分けにして意味を説明します。

「if (have_posts())」は投稿記事があるかどうかを判定している部分です。もし1つでも記事があれば表示させるという意味になります。

「while (have_posts()) : the_post()」部分の

「while」は、処理を繰り返す構文
「have_posts()」は、次の記事があるかを判定
「the_post()」で、次の記事を取得

こちらを合わせ、whileループによって、投稿を表示させます。

「endwhile」まで1つの投稿を表示させたら、「while」に戻って繰り返し処理を実行します。そして表示させる投稿がなくなったらループを終了させます。

これまでの「ループ」をまとめて下記のように書くこともできます。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
// ループ処理する内容を記述する
<?php endwhile; endif; ?>

最新記事を判別する方法

いよいよ本題ですが、先ほどまでの「ループ」に下記のように追加してあげます。

<?php if(have_posts()): while(have_posts()): the_post(); $counter++; ?>
<?php if ($counter <= 1): ?><!–　最初の記事判別　–>
// 最初の記事の内容を記述する
<?php else:?>
// 最初の記事以降のループ処理する内容を記述する
<?php endif;?><!–　/最初の記事判別　–>
<?php endwhile; endif; ?>

こちらの「最初の記事の内容を記述する」部分でidやclassを追加してあげたり、1つ目以降とは異なる設定をしてあげることで、見た目や画像の大きさを変更することができますね！

<?php if ($counter <= 1): ?><!–　最初の記事判別　–>

こちらの「$counter <= 1」で最初の1記事目を判別しております。 この部分を変更することにより自由にカスタマイズすることができます。

参考として例を上げてみます。

最初から3記事目までの3つの表示を変更したい場合。

<?php if ($counter <= 3): ?>

3記事目のみ、その１つだけの表示を変更したい場合。

<?php if ($counter == 3): ?>

このように数字や「=」の部分を変更するだけです。

まとめ　最新記事を判別する方法

このようにWordPressで最新記事を判別して、条件分岐で表示する内容を分けてあげることで、いろいろな見せ方ができると思います。
記事一覧の1番最初の投稿の下にだけ、バナーやアドセンスを入れたい場合なんかにも活用できますね！

トップページは分岐させ表示方法を変えるが、カテゴリーページはすべて同じ形式の表示にしたりとindex.phpやcategory.phpなど書き分けることで見せ方を変えることもできます。
少し変化を付けて、自分の好みにあった記事一覧ページを作ってみてはどうでしょうか？