当サイトでも実装しましたが、WordPressでは記事一覧ページにおいて最新の記事だけレイアウトを変える方法があります！
この方法を実践することで上の画像のように最新の記事がどれなのか一目瞭然ですし、デザインに一工夫できてよいかと思いますので、是非ともこの方法を覚えておきましょう！
1. 最新記事とそれ以外でレイアウトを分けるPHP構文を覚える
それではまず、最新記事とそれ以外とでレイアウトを分けることができるPHP構文を紹介したいと思います。
<?php
$count=0; while(have_posts()) : the_post();
?>
<?php $count++; ?>
<?php if($count==1): ?>
最新記事のレイアウトを記述
<?php else : ?>
それ以外のレイアウトを記述
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
こちらの構文を当てはめることでレイアウトを分けることができます！
上の構文の5行目の
<?php if($count==1): ?>
にて、そのページ内の一番最初の記事のみを選択することが可能となり、7行目の
<?php else: ?>
にてそれ以外の記事について読み込ませることができます。この条件分岐を使うことによって、最新記事とそれ以外の記事のレイアウトを変更させることができるようになる…ということですね！
2. 実際にWordPressの記事一覧ページを表示させているphpファイルにコードを記述する
それでは実際に構文を適用させていきましょう。今回は見本として以下のようにHTMLを組みました。
<ul> <li id="top">最新記事のみのレイアウト</li> <li>それ以外のレイアウト</li> <li>それ以外のレイアウト</li> <li>それ以外のレイアウト</li> <li>それ以外のレイアウト</li> </ul>
この見本コードを、最新記事とそれ以外でレイアウトを変えさせる、以下のPHP構文に当てはめていきます。
<?php
$count=0; while(have_posts()) : the_post();
?>
<?php $count++; ?>
<?php if($count==1): ?>
<li id="top">最新記事のみのレイアウト</li>
<?php else : ?>
<li>それ以外のレイアウト</li>
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
このように記述することで、最新記事とそれ以外の記事とで条件分岐させることが可能となり、レイアウトを変更させれるようになります！
まとめ
以上が解説となります。構文自体はわりとシンプルなものですが、この方法を覚えておくと他のブログとは一味違ったデザインにさせることができたり、最新記事を目立たせることが可能となりますので、かなりオススメです！
それ以外でいえば、恐らく
<?php if($count==1): ?>
上の$count==○○のところの数字を変更させれば、レイアウトを変えたいところを指定できると思いますので、記事一覧ページの○件目と○件目のレイアウトを他のとは別のにしたい…ということも可能になると思います！
この方法を使って、インパクトのあるデザインをしてみるのもよいのではないでしょうか(^^)？
