ワードプレスのwp_img_tag_add_auto_sizesフィルタの使用方法・解説

概要

wp_img_tag_add_auto_sizesフィルタは、WordPressの画像タグにおいて、sizes属性にautoを追加するために使用されます。このフィルタは、画像の表示に関するレスポンシブな設計をサポートし、画像が異なる画面サイズに適応することを容易にします。特に、次のような機能を実装する際に役立ちます。

1. モバイルファーストのデザインの実現
2. ブレークポイントに基づく画像の適切なサイズの提供
3. 画像読み込みの最適化
4. CSSメディアクエリに基づくスタイルの適用
5. ブロックエディタでの画像オプションの改善
6. コンテンツ制作時の画像管理の簡素化
7. サイトのパフォーマンス向上
8. アクセシビリティの向上

構文

add_filter( 'wp_img_tag_add_auto_sizes', 'callback_function' );

パラメータ

• $attr (array): 画像要素の属性を含む配列。
• $attachment_id (int): メディアライブラリ内の画像のID。

戻り値

• 変更後の属性を含む配列。

関連する関数

wp_img_tag_add_auto_sizes

使用可能なバージョン

• WordPress 4.4以降

コアファイルのパス

• 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

サンプルコード

サンプル1: sizes属性に自動で’auto’を追加する

このコードは、画像タグにsizes属性がない場合にautoを追加します。

add_filter( 'wp_img_tag_add_auto_sizes', function( $attr ) {
    if ( ! isset( $attr['sizes'] ) ) {
        $attr['sizes'] = 'auto';
    }
    return $attr;
});

サンプル2: 特定の条件下で’sizes’を変更する

特定の条件に基づいて、異なるsizes値を設定する例です。

add_filter( 'wp_img_tag_add_auto_sizes', function( $attr, $attachment_id ) {
    if ( is_single() ) {
        $attr['sizes'] = '(max-width: 600px) 100vw, 600px';
    }
    return $attr;
}, 10, 2);

サンプル3: プラグインでの使用例

プラグイン内で、このフィルタを利用して特定の画像サイズを設定する方法です。

add_filter( 'wp_img_tag_add_auto_sizes', 'my_custom_image_sizes' );

function my_custom_image_sizes( $attr ) {
    if ( isset( $attr['class'] ) && strpos( $attr['class'], 'custom-class' ) !== false ) {
        $attr['sizes'] = '100vw';
    }
    return $attr;
}

サンプル4: 特定のIDの画像に対して’sizes’を変更する

特定のIDの画像に対してのみsizes属性を変更するサンプルです。

add_filter( 'wp_img_tag_add_auto_sizes', function( $attr, $attachment_id ) {
    if ( 42 === $attachment_id ) {
        $attr['sizes'] = '50vw';
    }
    return $attr;
}, 10, 2);

サンプル5: レスポンシブ画像における最適化

レスポンシブな画像設定に基づき、異なるsizes属性を動的に設定します。

add_filter( 'wp_img_tag_add_auto_sizes', function( $attr ) {
    $attr['sizes'] = '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw';
    return $attr;
});