WordPress の AMP ページで amp-iframe の js スクリプトが重複しているよという警告が出た件

WordPress の AMP 対応を AMP プラグインに任しているサイトで、

The tag ‘amp-iframe extension .js script’ appears more than once in the document. This will soon be an error.

という警告が出るとのこと。amp-iframe 用の js スクリプトが重複して指定してあるよ、ってこと。まあ警告なので、とりあえずは放置しておいてもいいんだけど、まもなくエラーになるとのことだ。

このサイトでは AMP 用テンプレートの <head> タグ内に

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

と記述してあったので、まあこれを削除すればいいんだろうってことで、これを削除。

すると、今度は

The tag ‘amp-iframe’ requires including the ‘amp-iframe’ extension JavaScript.

と、js スクリプトが指定していないよ、というエラーが生じるページが出てきてしまった。

なんでだろと調べてみたら、問題のサイトでは広告がらみですべてのページで amp-iframe を使用。なので、上記のようにすべてのページの <head> タグ内に amp-iframe 用のスクリプトを指定していたのだ。

んで、なんで重複の警告が出るのかと見てみたら、記事内に iframe を使用してあると、AMP プラグインのほうで

<?php do_action( 'amp_post_template_head', $this ); ?>

によって、<head> タグ内に amp-iframe 用のスクリプトを追加していることがわかった。

じゃあどうしたらいいのかなと調べてみたら、こちらのプラグインの GitHub で以下のページを発見。

https://github.com/ampproject/amp-wp/issues/1095

<head> タグ内に直接入れた

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

を削除して、さらに functions.php に

add_filter( 'amp_post_template_data', function( $data ) {
    $data['amp_component_scripts'] = array_merge(
        $data['amp_component_scripts'],
            array(
                'amp-iframe' => 'https://cdn.ampproject.org/v0/amp-iframe-latest.js',
            )
        );
        return $data;
} );

を追加してやればよい。amp_post_template_data のフィルターフックで、amp-iframe 用のスクリプトを追加するってわけだね。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル