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

概要

wp_iframe_tag_add_loading_attrフィルタは、iframe要素にloading属性を追加するために使用されます。このフィルタを利用することで、iframeの読み込みを遅延させることができ、パフォーマンスの向上やページの初期表示速度を改善することができます。このフィルタは以下のような機能を実装する際によく使われます：

1. ページロード時のパフォーマンス向上
2. 初期表示速度の最適化
3. バーのないロード状態の改善
4. ユーザーエクスペリエンスの向上
5. リソースの効率的な使用
6. Lazy loadingの実装
7. Web Core Vitalsの最適化
8. SEOの向上

構文

add_filter('wp_iframe_tag_add_loading_attr', 'my_custom_loading_attr', 10, 2);

パラメータ

• $loading_attr (string): loading属性に設定される値。
• $tag (string): iframeタグのコンテンツ。

戻り値

• フィルタを通過した後のloading属性の値。

関連する関数

wp_iframe_tag_add_loading_attr

使用可能なバージョン

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

コアファイルのパス

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

function add_loading_attribute($loading_attr, $tag) {
    return 'lazy';
}
add_filter('wp_iframe_tag_add_loading_attr', 'add_loading_attribute', 10, 2);

このサンプルコードは、すべてのiframe要素に対してloading属性をlazyに設定します。

サンプルコード 2

function conditional_loading_attribute($loading_attr, $tag) {
    if (strpos($tag, 'my-iframe-source.com') !== false) {
        return 'lazy';
    }
    return $loading_attr;
}
add_filter('wp_iframe_tag_add_loading_attr', 'conditional_loading_attribute', 10, 2);

特定のソースからのiframeにのみloading=lazy属性を追加します。

サンプルコード 3

function custom_loading_attribute($loading_attr, $tag) {
    return 'eager'; // すべてのiframeに対してeager読み込みを設定
}
add_filter('wp_iframe_tag_add_loading_attr', 'custom_loading_attribute', 10, 2);

すべてのiframeにloading=eager属性を追加します。

サンプルコード 4

function set_default_loading_attribute($loading_attr, $tag) {
    return 'lazy'; // デフォルトでlazy属性を追加
}
add_filter('wp_iframe_tag_add_loading_attr', 'set_default_loading_attribute', 10, 2);

デフォルトでloading=lazy属性がすべてのiframeに設定されます。

サンプルコード 5

function modify_loading_for_specific_tag($loading_attr, $tag) {
    if (strpos($tag, 'important-iframe') !== false) {
        return 'auto'; // 特定のタグに対してautoを設定
    }
    return $loading_attr;
}
add_filter('wp_iframe_tag_add_loading_attr', 'modify_loading_for_specific_tag', 10, 2);

特定のiframeタグにのみloading=auto属性を追加します。

引用元がない場合はその旨を記載してください。