投稿一覧テンプレート(home.php archive.phpなど)で、特定のコンテンツにだけ何かの処理を加える方法

公開日:2022(令和4)年4月14日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



私がこのコードを使ったのは、投稿一覧で表示されるアイキャッチ画像に対して、2つめ以降の投稿は、ファーストビューに入る可能性が少ないので、画像の遅延ロード(lazyload)をさせたかったからです。

というのは、Google PageSpeed Insightsで分析した時、すべての画像に遅延ロード属性を加えると、最初に表示される画像(ファーストビューの画像)を遅延ロードさせないでとアドバイスを受けたからです。

どういうことなのかを簡単に説明すれば、lazyload属性が付与された画像(imageやvideoタグなど)は、ページを読み込む際に一旦飛ばして後からゆっくり読み込めばいいですよ!とゆるーく処理されるので、Google PageSpeed Insightsの分析では、その画像が後から処理されることによって、画像の読み込みに時間がかかりすぎてますよ!と言われるのです。

これを解消するには、前述したように、ファーストビューに入る可能性のある画像のみ遅延させないという処理が必要となるのです。

WordPressに少し明るい方なら、「5.9からは、最初の画像にlazyload属性を加えないようになった」んじゃなかったっけ?」と思われるかも知れません。

確かに画像の自動遅延処理は機能するのですが、それは一覧ではなく単一ページで、the_contentを使った本文の呼び出しをした時や、アイキャッチ画像の表示に特定の関数を使った時など自動適用されるケースが限られており、条件を満たさない投稿アーカイブなどでは機能しません。

特にWordPressでは、固定ページをトップページにするよりも、デフォルトの投稿一覧が表示される形でトップページが公開されていることが多いので、対策の必要性を感じて、本サイトで配布している【HABONE】テーマで実装することにしました。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

投稿ループの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?



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
特定のショートコードが本文内にあるかどうかによって処理を分岐する方法