ワードプレスのwp_get_loading_optimization_attributes関数の使用方法・解説

概要

wp_get_loading_optimization_attributes関数は、ローディング関連の最適な属性を取得するために使用されます。この関数は、特にウェブサイトのパフォーマンスを向上させるために、画像の遅延読み込みやリソースの最適化に関連する属性を定義する際に役立ちます。以下のようなシナリオでよく使われます。

1. 画像の遅延読み込みを設定する
2. 動画コンテンツの最適化を行う
3. リソースの読み込み時間を短縮する
4. アクセシビリティの向上に寄与する
5. SEO対策を強化する
6. キャッシュ戦略の最適化を支援する
7. ページの初期読み込みを改善する
8. ネットワークトラフィックの負荷を軽減する

構文

wp_get_loading_optimization_attributes( $src, $is_image = true, $attributes = array() );

パラメータ

• $src (string) – リソースのURL。
• $is_image (bool) – 画像かどうかを示すフラグ（デフォルトはtrue）。
• $attributes (array) – その他の属性が含まれる連想配列。

戻り値

• (string) – 最適なローディング属性を含むHTMLの文字列を返します。

関連する関数

• wp_get_loading_optimization_attributes

使用可能なバージョン

この関数は、WordPress 5.5以降で利用可能です。

コアファイルのパス

wp-includes/media.php

この関数のアクションでの使用可能性

アクション	使用可能
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

以下は、wp_get_loading_optimization_attributes関数を使用したサンプルコードです。

1. 基本的な使用例

   $image_src = 'path/to/image.jpg';
   echo '<img src="' . esc_url( $image_src ) . '"' . wp_get_loading_optimization_attributes( $image_src ) . '>';
   

   • 画像の遅延読み込み属性を自動的に取得して、<img>タグを出力する。

2. 属性を追加する例

   $image_src = 'path/to/image.jpg';
   $attributes = array( 'class' => 'my-image-class' );
   echo '<img src="' . esc_url( $image_src ) . '"' . wp_get_loading_optimization_attributes( $image_src, true, $attributes ) . '>';
   

   • 追加のHTML属性（ここではクラス）を設定して画像を出力する。

3. 動画での使用例

   $video_src = 'path/to/video.mp4';
   echo '<video src="' . esc_url( $video_src ) . '"' . wp_get_loading_optimization_attributes( $video_src, false ) . '></video>';
   

   • 動画要素に適用することで、最適なローディング属性を設定する。

4. 複数のリソースに適用する例

   $resources = array( 'image1.jpg', 'image2.jpg', 'image3.jpg' );
   foreach ( $resources as $src ) {
      echo '<img src="' . esc_url( $src ) . '"' . wp_get_loading_optimization_attributes( $src ) . '>';
   }
   

   • 複数の画像のリストに対して、最適な属性を一括で出力する。

5. カスタム属性を使った例

   $image_src = 'path/to/image.jpg';
   $custom_attributes = array( 'loading' => 'lazy', 'alt' => 'Description of image' );
   echo '<img src="' . esc_url( $image_src ) . '"' . wp_get_loading_optimization_attributes( $image_src, true, $custom_attributes ) . '>';
   

   • カスタムの読み込み属性やalt属性を設けて画像を表示する。