WordPressでiframeの遅延読み込みを無効にする方法

最終更新日:

WordPressでiframeの遅延読み込みを無効にする方法をご紹介します。特定のiframeだけ無効にしたいなどソースコード付きで説明しています。

iframeの遅延読み込みとは?

WordPressでは、WordPress 5.7からiframeの遅延読み込みがデフォルトで有効になりました。

iframeタグに「loading=”lazy”」が自動的に追加されます。

iframeの遅延読み込みを無効にする

テーマ内のfunctions.phpに下記のコードを追加します。

iframeだけ無効にする

コンテンツ内すべてのiframeの遅延読み込みをデフォルトで無効にする場合は、下記のフィルターを使用します。

function disable_post_content_iframe_lazy_loading( $default, $tag_name, $context ) {
    if ( 'iframe' === $tag_name && 'the_content' === $context ) {
        return false;
    }
    return $default;
}
add_filter(
    'wp_lazy_loading_enabled',
    'disable_post_content_iframe_lazy_loading',
    10,
    3
);

特定のiframeだけ無効にする

特定のiframeの遅延読み込みをデフォルトで無効にしたい場合は、下記のフィルターを使用します。

下記のコードはYouTubeだけ遅延読み込みを無効にする例です。コード内の「youtube.com」を適宜変更ください。

function skip_loading_lazy_youtube_iframes( $value, $iframe, $context ) {
    if ( 'the_content' === $context && false !== strpos( $iframe, 'youtube.com' ) ) {
        return false;
    }
    return $value;
}
add_filter(
    'wp_iframe_tag_add_loading_attr',
    'skip_loading_lazy_youtube_iframes',
    10,
    3
);

画像とiframeを無効にする

画像とiframeの両方とも遅延読み込みをデフォルトで無効にする場合は、下記のフィルターを使用します。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

よく見られている記事

  1. WordPress 5.6で何が新しくなったのか?新機能や変更点を紹介
  2. WordPressのサーバー要件とは?各バージョンの推奨環境
  3. WordPressをローカル環境にインストールする方法
  4. WordPress 5.5で何が新しくなったのか?新機能や変更点を紹介
  5. WordPress 5.6におけるjQueryのバージョンアップ内容と対策
  6. WordPress 5.5.3の更新内容は?1件のバグ修正
  7. WordPressで画像にwidthとheightを追加する方法
  8. WordPressで現在のユーザーが管理者かどうか判定する方法
  9. WordPressにログインできない?13の解決方法
  10. WordPressプラグイン「File Manager」の脆弱性と対応方法

新しい記事

go to top