WordPressのトップページなどの記事一覧で一番最初の記事だけ違うデザインにしたいときは？

マナビシェアというサイトのデザインをしたときに「記事一覧の1記事目だけ大きく見せたい」という要望がありました。

いくつか並んで見せるもののうち一番最初のものだけデザインを変えたいというケースはよくあるんですよね。

というわけで、1つ目だけという条件で分岐させる方法をご紹介します。

1つ目のものとそれ以外のものという条件分岐

これから紹介する方法は下記の記事を元にして僕なりにアレンジを加えたものです。

まず、functions.phpに下記の記述を書きます。

function is_first(){
  global $wp_query;
  return ($wp_query->current_post === 0);
}

PHPを良く知らないとかfunctions.phpをいじりなれてないという方は分かりづらいかもしれませんが、<?phpと?>の間に入れる必要がありますのでご注意ください。

あとは分岐させたい箇所で下記のように記述すればおっけーです。

<?php if (is_first()) :?>
ここに1記事目の記述を入れる
<?php else: ?>
ここに2記事目以降の記述を入れる
<?php endif; ?>

▼マナビシェアではこのようになってます。
wordpress-is-first-01

デザインを変えるために、1つ目とそれ以外のものはID名やクラス名を別々にしてあります。あとはCSSで整えるだけ。

いろんな条件分岐の仕方がある中で、1つ目だけという条件は今回初めて使いました。今後いろんなところで使えそうだなと思いましたね。

慣れてる人は分かってると思いますが、functions.phpのバックアップを取っておくようにしてくださいね。突然真っ白になることもありますので。