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」の使い方でした。