wp_img_tag_add_loading_optimization_attrs()


WordPressのwp_img_tag_add_loading_optimization_attrs()関数は、画像タグにloading属性やdecoding属性を追加するために使用されます。これにより、画像の読み込みパフォーマンスが最適化されます。

構文

wp_img_tag_add_loading_optimization_attrs( string $image, string $context );

引数の説明:

  • $image(string) — 画像タグのHTML文字列。
  • $context(string) — 画像が使用されているコンテキスト（例: ‘the_content’, ‘the_excerpt’）。

例1: 基本的な使用例

この例では、画像タグにloading属性を追加します。

echo wp_img_tag_add_loading_optimization_attrs( '<img src="image.jpg">', 'the_content' );

例2: decoding属性の追加

この例では、画像タグにdecoding属性を追加します。

echo wp_img_tag_add_loading_optimization_attrs( '<img src="image.jpg">', 'the_excerpt' );

例3: カスタムコンテキストでの使用

カスタムコンテキストで関数を使用する例です。

echo wp_img_tag_add_loading_optimization_attrs( '<img src="image.jpg">', 'custom_context' );

例4: 複数の画像タグを処理

複数の画像タグを処理する例です。

$images = '<img src="image1.jpg"><img src="image2.jpg">';
echo wp_img_tag_add_loading_optimization_attrs( $images, 'the_content' );

例5: フィルターフックとの併用

フィルターフックと併用して使用する例です。

add_filter( 'the_content', function( $content ) {
    return wp_img_tag_add_loading_optimization_attrs( $content, 'the_content' );
});

例6: 特定の画像のみに適用

特定の画像のみにloading属性を追加する例です。

$image = '<img src="specific-image.jpg">';
if ( strpos( $image, 'specific-image.jpg' ) !== false ) {
    echo wp_img_tag_add_loading_optimization_attrs( $image, 'the_content' );
}

例7: 属性の上書き

既存のloading属性を上書きする例です。

echo wp_img_tag_add_loading_optimization_attrs( '<img src="image.jpg" loading="eager">', 'the_content' );

注意点

  • この関数はWordPress 5.5以降で利用可能です。
  • loading属性はブラウザのサポート状況に依存します。
  • decoding属性は画像のデコード方法を指定しますが、すべてのブラウザでサポートされているわけではありません。

関連機能：