WordPressでwp_enqueue系の<style>や<script>から[type属性]を削除する方法。

HTML5では外部CSSやjsの読み込みにtype=”text/javascript”や、type=”text/css”などのtype属性が不要になりました。

type属性を出力しているとW3Cのバリデーターなどでエラーが出ます。

テーマやHTML構築時には基本的にW3Cのチェックに通るように開発するのが基本ですので、このエラーを消したいところです。

通常のHTML開発であれば書かなければいいだけですが、WordPressのテーマですとwp_enqueue_style()やwp_enqueue_script()の関数が勝手にtype属性を付与します。

だからと言って<head>~</head>内に<style>や<script>を直接書くのもWordPressテーマの開発趣旨から外れます。

そこで、今回はWordPressのwp_enqueue系関数を使いつつもtype属性を削除する方法をご紹介します。

functions.php追記用スクリプト
1. WPバージョン5.3～
2. WPバージョン4.1～
add_theme_supportを使用してHTML５に対応する
「syle_loader_tag」「script_loader_tag」でtype属性削除フィルタを作る

functions.php追記用スクリプト

解説が必要ない方向けに、まずはfunctions.phpに追記するだけのスクリプトです。スクリプトの設置は自己責任でお願いします。

WPバージョン5.3～

最新のWordPressを使っている場合は以下のようにadd_theme_support()を使用します。

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

5.3以降add_theme_support()にstyleとscriptが追加されました。上記のように記載することでHTML5では不要なtype属性を出力しなくなります。

WPバージョン4.1～

5.3以前の方やtype属性以外の部分も変更したい場合は、フィルタフックの「syle_loader_tag」や「script_loader_tag」を使用して下さい。

function remove_type_attr( $tag ) {
    return preg_replace( "| type='.+?'s*|", "", $tag );
}
add_filter( 'style_loader_tag', 'remove_type_attr' );  // <link>からtype属性を削除
add_filter( 'script_loader_tag', 'remove_type_attr' ); // <script>からtype属性