wordpress add_theme_support html5 「The type attribute is unnecessary for JavaScript resources」エラー/警告

CATEGORY: WordPress

2020年1月12日

wp_enqueue_script で JavaScript を読み込むと今までは以下のように HTML5 では不要な script 要素の type 属性が出力されたため、W3C のバリデーションでチェックすると「The type attribute is unnecessary for JavaScript resources」のような警告（Warning）が出てしまいました。

<script type='text/javascript' src='http://xxxx/js/jquery.js'></script>
<!-- type='text/javascript' は不要 -->

このため、今までは例えば以下のように template_redirect フックなどを使って type 属性を削除する必要がありました。

//type="text/javascript" や type="text/css" を削除
//5.3 未満の場合の W3Cエラー対応）
add_action('template_redirect', function () {
  ob_start(function ($buffer) {
    $buffer = str_replace(array('type="text/javascript"', "type='text/javascript'"), '', $buffer);
    $buffer = str_replace( array( 'type="text/css"', "type='text/css'" ), '', $buffer );
    return $buffer;
  });
});

version 5.3 からは add_theme_support の html5 の機能に追加された 'script' や 'style' を指定することで script 要素や style 要素の type 属性を出力しないようにすることができるようになっています。

関連ページ： Miscellaneous Developer Focused Changes in 5.3

script 要素や style 要素の type 属性を出力しないようにするには、以下を functions.php に記述します（以下の例は script 要素と style 要素の両方の type 属性を出力しないようにするため、'script' と 'style' を指定しています）。

add_theme_support( 'html5', array( 'script', 'style' ) );

add_theme_support() は アクションフックを使わなくても動作しますが、アクションフックを使って記述する場合は、after_setup_theme フックを使います。

function my_theme_setup() {
   add_theme_support( 'html5', array( 'script', 'style' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup');

これにより、出力される JavaScritp の読み込みは以下のようになり、W3C のバリデーションのチェックでエラー（警告）が表示されません。

<script src='http://xxxx/js/jquery.js'></script>