今回は記事一覧の最新の投稿記事のみ画像を大きく見せるなどが出来るように、最新の記事を判別する方法の解説です。
ループの使い方
まず、WordPressで記事一覧のような投稿記事や固定ページを表示させるための基本的な「ループ」のPHPコードを説明します。
1 2 3 4 5 | <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> //通常ここに繰り返し表示するHTML,CSSを書き込んで the_title();などのWordPressタグを入れていきます。 <?php endwhile; ?> <?php endif; ?> |
上記が基本的なループになりますが、その前に。
ループ内で使用するテンプレートタグの例
1 2 3 4 5 6 7 8 | //投稿記事のタイトルを取得して出力 <?php the_title(); ?> //投稿記事の本文を取得して出力 <?php the_content(); ?> //投稿記事のURLを取得して出力 <?php the_permalink(); ?> |
上記のようなループ処理したい内容を「ループ」内に記述してあげることで、それが処理され繰り返し表示されるわけです。 次に、「ループ」のPHPコードを小分けにして意味を説明します。 「if (have_posts())」は投稿記事があるかどうかを判定している部分です。もし1つでも記事があれば表示させるという意味になります。
「while (have_posts()) : the_post()」部分について
「while」・・・処理を繰り返す構文 「have_posts()」・・・次の記事があるかを判定 「the_post()」・・・次の記事を取得 こちらを合わせ、whileループによって、投稿を表示させます。 「endwhile」まで1つの投稿を表示させたら、「while」に戻って繰り返し処理を実行(表示させる投稿がなくなったらループを終了) これまでの「ループ」をまとめて下記のように書くこともできる。
1 2 3 | <?php if(have_posts()): while(have_posts()): the_post(); ?> // ループ処理 <?php endwhile; endif; ?> |
最新記事を判別する方法
先ほどまでの「ループ」に下記のように追加してあげます。
1 2 3 4 5 6 7 | <?php if(have_posts()): while(have_posts()): the_post(); $counter++; ?> <?php if ($counter <= 1): ?> // 最初の記事の内容を記述する <?php else:?> // 2件目以降の記事をループ処理する内容を記述する <?php endif;?> <?php endwhile; endif; ?> |
以上、簡単に1件目とそれ以降の記事表示を変更することが可能になりました。