WordPress Logo

WordPressでスクリプトを読み込むとき、通常は「wp_enqueue_script」が使われ、<script>タグには自動で「type」属性 type="text/vavascript" が挿入されます。

HTML5の仕様では「type属性」は省略可能なので、どうにかしてこの文字列 type="text/javascript" を削除したいところです。

実はWordPressのバージョン「4.1」以降から、新たに「script_loader_tag」というフィルターフックが追加され、この機能を使うことで出力される<script>タグをカスタマイズすることが可能になりました。

フィルターフック「script_loader_tag」について

以下のコードをテーマファイルの中の［functions.php］に記述しましょう。

function remove_script_type($tag) {
	return str_replace("type='text/javascript' ", "", $tag);
}
add_filter('script_loader_tag','remove_script_type');

出力されたHTMLを見ると <script>タグの中から「type='text/javascript’」が削除されていることを確認できるはずです。

さて。ここでもう少し欲張って、スクリプトを非同期で動かすために「async属性」や「defer属性」を付与してみましょう。
これにはPHPの str_replace() 関数の第2引数を利用して、上記コードを以下のように書き換えます。

function remove_script_type($tag) {
	return str_replace("type='text/javascript'", "async='async'", $tag);
}
add_filter('script_loader_tag','remove_script_type');

これでHTMLを確認すると以下のように出力されているはずです。

<script async='async' src='http://sample.com/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>

フィルターフック「style_loader_tag」について

同様にスタイルシートを出力する際にも「script_loader_tag」のCSS版で「style_loader_tag」というフィルターフックが用意されています。
使い方は基本的にどちらも同じになりますので、「script_loader_tag」と同様に<link>を自由にカスタマイズできるようになります。

<script>タグと同じように、WordPressが出力する<link>には「type属性」や「id属性」それと終了タグ「/」も挿入されています。

試しに、これらをまとめて削除するサンプルコードを書いてみましょう。

function remove_style_type($tag) {
	$tag = preg_replace( array( "| type='.+?'s*|","| id='.+?'s*|", '| />|' ), array( ' ',' ', '>' ), $tag );
	return $tag;
}
add_filter('style_loader_tag','remove_style_type');

やっていることは「script_loader_tag」のときと同じで、このケースでは配列の中に正規表現で各文字列を代入して type="text/css" 等の文字列を出力させないようにしています。

……以上。
「script_loader_tag」と「style_loader_tag」の使い方でした。