コンテンツへスキップ

ワードプレスのAMP対応でエラーが出て困った話

このブログをとりあえずAMP対応させておこうかと思いAMPプラグイン

AMP

を入れて満足してたところAMPでエラーが発生していた事に気がついた

原因の箇所は下記の通り

<script type='text/javascript' src='https://cdn.ampproject.org/v0.js' async charset='UTF-8'></script>

原因はAMPのプラグインを疑っていたが、ソース見てても原因がさっぱり分からず。

結論

自分でfunctions.phpに入れていたJSのasync付与するための関数に問題があった

if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;
    return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

どこかで見たものをjqueryだけ除外してasyncをつける関数なんだけれどこの関数のreturnを見てみるとcharsetにUTF-8を付与している

この関数がAMPにも作用していたので問題が起こっていた

AMPの場合だけ除外の方法が分からなかったので下記のように修正して問題を解決

	if (!(is_admin() )) {
	function add_async_to_enqueue_script( $url ) {
		if ( FALSE === strpos( $url, '.js' ) ) return $url;
		if ( strpos( $url, 'jquery.min.js' ) ) return $url;
		if ( strpos( $url, 'cdn.ampproject.org') ) return $url;
		return "$url' async charset='UTF-8";
	}
	add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
	}

あっさり解決できたらよかったんだけど気づくまで1時間ぐらい調べてた

タグ: