【WordPress】5.9にバージョンアップでAMPエラー(属性「loading」はタグ「amp-img」で使用できません)

突然Search Consoleから問題検出のメールがきた。

許可されていない属性または属性値が HMTL タグにあります。

最近した事といえばWordPressを5.8から5.9にバージョンアップした事、これが原因。

WordPress5.5にバージョンアップした時(過去)の対処法

見てみると、

属性「loading」はタグ「amp-img」で使用できません。

との事だった。
実は、WordPress5.5にバージョンアップした時もこの現象があって、以前は、

// WordPress5.5以降の「loading="lazy"」自動付与を削除
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

function.phpにフィルタフックで「loading=”lazy”」自動付与を削除する事で回避できたのだが、フィルタフックが効かなくなってしまったらしい。

WordPress5.9にバージョンアップした際の対処法

どうやら最初に設置された画像は「loading=”lazy”」しない仕様に変わったようでしだ。

以下をfunction.phpに追加する事で上記のAMPエラーを回避できました。
詳細は下記サイトを参照ください。

WordPress 5.9のLazy LoadingでAMP実装エラーが発生した場合の対処法/get_the_post_thumnail関数

// WordPress5.9以降の「loading="lazy"」自動付与を削除
function gnr_stop_lazyloading_when_amp() {
    return !gnr_is_amp();
}
add_filter( 'wp_lazy_loading_enabled', 'gnr_stop_lazyloading_when_amp' );
function gnr_tail_pattern_matched($target, $pattern) {
    if(empty($target) && empty($pattern)) {
        return true;
    } else if(empty($target)) {
        return false;
    } else if(empty($pattern)) {
        return false;
    }
    $s_end = strlen($target);
    $s_len = strlen($pattern);
    $offset = $s_end - $s_len;
    if($offset < 0) {
        return false;
    }
    $pos = strpos($target, $pattern, $offset);
    return $pos === $offset;
}
//AMPページか否か判定する
function gnr_is_amp() {
    if(function_exists('is_amp') && is_amp()) {
        return true;
    } else if(function_exists('is_amp_endpoint') && is_amp_endpoint()) {
        return true;
    } else if(function_exists('ampforwp_is_amp_endpoint') && ampforwp_is_amp_endpoint()) {
        return true;
    } else if(@$_GET['amp'] === '1') {
        return true;
    }
    $uri = gnr_get_uri_full();
    return gnr_is_amp_pattern($uri);
}
 
function gnr_is_amp_pattern($uri) {
    if(gnr_tail_pattern_matched($uri, '/amp')) return true;
    if(gnr_tail_pattern_matched($uri, '/amp/')) return true;
    if(gnr_tail_pattern_matched($uri, '?amp=1')) return true;
    return false;
}
function gnr_get_uri_full() {
    return (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off' ? 'https' : 'http')
        . '://'
        . $_SERVER['SERVER_NAME']
        . $_SERVER['REQUEST_URI'];
}
 
function gnr_remove_amp_uri_part($uri, $pattern) {
    $s_end = strlen($uri);
    $s_len = strlen($pattern);
    $offset = $s_end - $s_len;
    if($offset < 0) {
        return $uri;
    }
    $pos = strpos($uri, $pattern, $offset);
 
    if($pos === $offset) {
        return substr($uri, 0, $pos);
    }
    return $uri;
}
function gnr_remove_amp_pattern($uri) {
    $uri = gnr_remove_amp_uri_part($uri, '/amp');
    $uri = gnr_remove_amp_uri_part($uri, '/amp/');
    $uri = gnr_remove_amp_uri_part($uri, '?amp=1');
    return $uri;
}
function gnr_get_amp_pattern($uri) {
    $ret = '/amp'; if(gnr_tail_pattern_matched($uri, $ret)) return $ret;
    $ret = '/amp/'; if(gnr_tail_pattern_matched($uri, $ret)) return $ret;
    $ret = '/?amp=1'; if(gnr_tail_pattern_matched($uri, $ret)) return $ret;
}
function gnr_delete_amp_lazyload($html_src) {
    if(!gnr_is_amp()) {
        return $html_src;
    }
    $html_src = preg_replace('#loading="lazy"#', '', $html_src);
    return $html_src;
}
add_filter('post_thumbnail_html', 'gnr_delete_amp_lazyload', 9999);

Yuki Nakata

中田デザイン事務所 代表

WEBデザイナー / WEB講師 / 海外販売 他

お仕事のご相談はお問い合わせフォームへお願いします。
事務所概要はコチラ