投稿記事の最新の記事だけ大きくしたり表示を変更する方法

更新日:2022年02月25日 /  投稿日:2022年02月26日

投稿記事の最新の記事だけ大きくしたり表示を変更する方法

WordPressで作られたサイトなどを見ているとブログ記事の一覧ページや、トップページでブログ記事の最新記事を5件程取得し、最新のきじだけをサイズを大きくするサイトを見かけます。

今回は投稿記事の最新の記事のサイズを変更する方法についてご紹介していきたいと思います。

まずはループ分を書いていきます

まずは、以下のように投稿記事を呼び出すループ分を書いていきます。
ここではメインループで説明しますが、サブループでも同じ処理になります。

<ul>
<?php if(have_post()): while( have_posts()): the_post(); ?>
    <li>投稿の処理</li>
<?php endwhile; endif; ?>
</ul>

ここまでは普通のループ分にになります。
では、ここから最初の投稿だけ表示を変更するようにコードを編集していきます。

ループ分を、最初の投稿だけ表示を変更するように編集する

<ul>
<?php if(have_post()): while( have_posts()): the_post(); $count++; ?>
  <?php if ($count <= 1): ?>
    <li>最初の投稿の処理</li>
  <?php else: ?>
    <li>2番目以降の投稿の処理</li>
  <?php endif; ?>
<?php endwhile; endif; ?>
</ul>

お分かり頂けますでしょうか?
ループの開始時にカウンター($count++;)でループのカウントを開始します。
後はその中に条件分岐で最新の投稿記事と2番目以降の投稿記事を分けてあげる事で、投稿記事の表示が分かれるようになります。

まとめ

投稿記事の最新の記事だけ大きくしたり表示を変更する方法についてご紹介いたしましたが、いかがだったでしょうか?

もしご興味のある方は一度お試しください!

この記事を書いた人

KNOWLEDGE BASEの中の人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

その他の関連記事はこちら