私がこのコードを使ったのは、投稿一覧で表示されるアイキャッチ画像に対して、2つめ以降の投稿は、ファーストビューに入る可能性が少ないので、画像の遅延ロード(lazyload)をさせたかったからです。
というのは、Google PageSpeed Insightsで分析した時、すべての画像に遅延ロード属性を加えると、最初に表示される画像(ファーストビューの画像)を遅延ロードさせないでとアドバイスを受けたからです。
どういうことなのかを簡単に説明すれば、lazyload属性が付与された画像(imageやvideoタグなど)は、ページを読み込む際に一旦飛ばして後からゆっくり読み込めばいいですよ!とゆるーく処理されるので、Google PageSpeed Insightsの分析では、その画像が後から処理されることによって、画像の読み込みに時間がかかりすぎてますよ!と言われるのです。
これを解消するには、前述したように、ファーストビューに入る可能性のある画像のみ遅延させないという処理が必要となるのです。
WordPressに少し明るい方なら、「5.9からは、最初の画像にlazyload属性を加えないようになった」んじゃなかったっけ?」と思われるかも知れません。
確かに画像の自動遅延処理は機能するのですが、それは一覧ではなく単一ページで、the_contentを使った本文の呼び出しをした時や、アイキャッチ画像の表示に特定の関数を使った時など自動適用されるケースが限られており、条件を満たさない投稿アーカイブなどでは機能しません。
特にWordPressでは、固定ページをトップページにするよりも、デフォルトの投稿一覧が表示される形でトップページが公開されていることが多いので、対策の必要性を感じて、本サイトで配布している【HABONE】テーマで実装することにしました。
投稿ループの1件目のみに別の処理をさせるコード
1件目は遅延させず、2件目以降はすべて遅延させる..これを達成するために使ったのが以下のコード体系です。
下記のコードは1件目だけに何か別の処理を施すためのものです。
1行目と最終行はループの開始と終了コードです。このコードの間に3~7行目の内容を書くことで機能します。
<?php if(have_posts()): while(have_posts()): the_post(); //ループ開始?>
<?php if ( $wp_query->current_post === 0 ): ?>
1件目の記事のみに反映させる内容
<?php else: ?>
2件目以降の記事に反映させる内容
<?php endif; ?>
<?php endwhile; endif; //ループ終了?>
コードの書き方が単一のphpで処理されているテーマでは、コードの書き方を変更する必要があります
コード中の「current_post === 0」が0ですけど1件目という意味になりますので、2件目のみなら1..という風にすれば任意指定ができます
冒頭で書いたように、アイキャッチ画像の遅延読み込み(lazyload)属性を追加するなら、上記コードの「1件目の記事のみに反映させる内容」と「2件目以降の記事に反映させる内容」にアイキャッチ画像を出力するコードを入れ、前者のimageタグには「loading=”eager”」属性を、後者のimageタグには「loading=”lazy”」を入れるだけです。
これで、ファーストビュー画像の処理が完全に的確にできる訳ではありませんし、スコア的には【HABONE】テーマでは数ポイントの改善にしかなりませんでしたが、やっておいて損はないのではないかと思います。
参考:Display WordPress loop with first item formatted differently?