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

概要

wp_sizes_attribute_includes_valid_autoフィルタは、画像のsizes属性に自動的に割り当てられる値が含まれているかを調べるために使用されます。このフィルタは、特にレスポンシブ画像の最適化や画像の読み込み時のパフォーマンスを向上させるための実装に役立ちます。以下は、このフィルタがよく使用される機能の例です。

1. レスポンシブデザインのための画像サイズの管理
2. SEOの向上のための画像最適化
3. ページの読み込み速度の改善
4. モバイルユーザー向けの画像表示最適化
5. アセットの効率的な利用
6. メディアライブラリの管理
7. カスタムテーマでの画像処理
8. プラグインとの連携による機能拡張

このフィルタの構文は以下の通りです。

apply_filters( 'wp_sizes_attribute_includes_valid_auto', $valid, $image, $size );

パラメータ

• $valid (bool): sizes属性がautoを含むかの初期値。
• $image (array): 処理対象の画像情報。
• $size (string): 現在のsizes属性の値。

戻り値

• bool: 更新されたsizes属性の値に基づいた真偽値。

関連する関数

• wp_sizes_attribute_includes_valid_auto

使用可能なバージョン

• 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

サンプルコード

サンプルコード1

add_filter( 'wp_sizes_attribute_includes_valid_auto', function( $valid, $image, $size ) {
    if ( strpos( $size, 'auto' ) === 0 ) {
        return true;
    }
    return $valid;
}, 10, 3 );

説明: このサンプルでは、sizes属性の先頭がautoであるかどうかを確認し、先頭がautoであればtrueを返します。

サンプルコード2

add_filter( 'wp_sizes_attribute_includes_valid_auto', function( $valid, $image, $size ) {
    // 画像サイズが指定されていない場合はautoを有効にする
    return empty( $size ) ? true : $valid;
}, 10, 3 );

説明: 画像サイズが指定されていない場合、sizes属性をautoとみなし、trueを返す例です。

サンプルコード3

add_filter( 'wp_sizes_attribute_includes_valid_auto', function( $valid, $image, $size ) {
    if ( $image['width'] > 1200 ) {
        return true; // 大きな画像の場合、autoを有効
    }
    return $valid;
}, 10, 3 );

説明: 画像の幅が1200ピクセル以上であれば、sizes属性がautoであると見なすコードです。

サンプルコード4

add_filter( 'wp_sizes_attribute_includes_valid_auto', function( $valid, $image, $size ) {
    return $valid || strpos( $size, 'wide' ) !== false; // 'wide'が含まれればtrue
}, 10, 3 );

説明: sizes属性にwideという単語が含まれていれば、自動的に有効にする例です。

サンプルコード5

add_filter( 'wp_sizes_attribute_includes_valid_auto', function( $valid, $image, $size ) {
    // 設定に基づいてautoを有効にするか決定
    return get_option( 'enable_auto_sizes' ) ? true : $valid;
}, 10, 3 );

説明: WordPressのオプション設定に基づき、sizes属性にautoを有効にするかどうか決めるサンプルです。