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

概要

wp_get_loading_attr_defaultフィルタは、WordPressが画像やiframesなどのメディア要素において使用するデフォルトのloading属性を取得するために利用されます。このフィルタを使用することで、デフォルトのloading属性の値（lazyやeager）を変更することができます。具体的には、以下のような機能を実装する際によく使われます。

1. ページのパフォーマンス向上
2. ユーザーエクスペリエンスの改善
3. SEO対策としての画像の遅延読み込み
4. レスポンシブデザインにおけるメディア管理
5. カスタムテーマやプラグインにおけるメディアの処理の調整
6. 特定の条件に基づく読み込み属性の動的変更
7. 画像の読み込みを制御するAPIの統合
8. アナリティクスやトラッキングのためのカスタム設定

構文

add_filter('wp_get_loading_attr_default', 'custom_loading_attribute');

パラメータ

• $loading (string): デフォルトのloading属性の値（例: lazy, eager）。
• $context (string): 現在のコンテキスト。画像やiframeがどのように使用されているかに依存します。

戻り値

• (string): 修正されたloading属性の値。

関連する関数

wp_get_loading_attr_default

使用可能なバージョン

このフィルタはWordPress 5.5.0以降で使用可能です。

コアファイルのパス

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 – デフォルトのloading属性をeagerに変更

function custom_loading_attribute($loading) {
    return 'eager';
}
add_filter('wp_get_loading_attr_default', 'custom_loading_attribute');

このコードは、すべてのメディア要素においてデフォルトのloading属性をeagerに変更します。

サンプルコード2 – 特定の条件に応じたloading属性の変更

function conditional_loading_attribute($loading, $context) {
    if ($context === 'example_context') {
        return 'eager';
    }
    return $loading;
}
add_filter('wp_get_loading_attr_default', 'conditional_loading_attribute', 10, 2);

このコードは、特定のコンテキストでのみloading属性をeagerに変更します。

サンプルコード3 – カスタムフィルタを使用する例

function custom_loading_with_filter($loading) {
    return apply_filters('custom_filter_for_loading', $loading);
}
add_filter('wp_get_loading_attr_default', 'custom_loading_with_filter');

このコードは、外部フィルタを使用してloading属性を変更することができます。

サンプルコード4 – クラスに基づく条件

function loading_attr_based_on_class($loading, $context) {
    global $post;
    if (has_class($post->ID, 'custom-class')) {
        return 'eager';
    }
    return $loading;
}
add_filter('wp_get_loading_attr_default', 'loading_attr_based_on_class', 10, 2);

このコードは、特定のクラスが付与された投稿においてloading属性をeagerに変更します。

サンプルコード5 – リアルタイムでのloading属性変更

function real_time_loading_attribute($loading) {
    if (is_page('about')) {
        return 'lazy';
    }
    return $loading;
}
add_filter('wp_get_loading_attr_default', 'real_time_loading_attribute');

このコードは、特定のページ（この場合は「about」ページ）においてloading属性をlazyに変更します。

これらのサンプルコードはすべて、WordPressのフィルタを利用してデフォルトのloading属性を変更する方法を示しています。