WordPressのscript_loader_tagを使ってscriptタグをすっきりする

WordPressでJavascriptを読み込むに使われるwp_enqueue_script()があります。wp_enqueue_script()の使い方は、wp_register_scriptとwp_enqueue_scriptの使い方とその違いとはに書いてある通りにしていただければ大丈夫です。WordPressで使われるwp_enqueue_script()は、Javascriptの依存関係やプラグインが使うJavascriptとの調整に使えてとても便利なのですが、今までwp_enqueue_script()に不満に思っていた点がありました。

wp_enqueue_script()の不満点

それは、wp_enqueue_script()が出力する<script>タグにありました。wp_enqueue_script()が出力する<script>は、こんな感じです。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'></script>

昨今のHTML5時代において、<script>タグで省略できるtypeを入れるのはどうかと思っていたのと、deferやasyncといったHTML5から加わった属性をいれるのが出来なかったことです。WordPress 4.0まではプラグインを入れて対応するか、こちらに書いてある方法で対応するしかありませんでした。

script_loader_tagフィルターが増えた

こんな不満点もWordPress 4.1からとあるフィルターフックが用意されたことによって楽にできるようになりました。そのフィルターの名はscript_loader_tagです。script_loader_tagは、<script>タグの変更ができるフィルターフックで以下のような引数をもつことが出来ます。

$tagは、その名の通りの<script>タグそのもので、$handleは、wp_enqueue_script()やwp_register_script()で使われる$handleとおなじものです。$srcはwp_enqueue_script()やwp_register_script()に登録したURLが入っています。

script_loader_tagの使用例

script_loader_tag()を使ったサンプルで、<script>タグのtypeを消し、asyncを入れるサンプルを作ってみました。

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

これでtypeが消えてasyncが増えているはずです。サンプルを使ってみたい場合はお使いのテーマのfunctions.phpに入れれば動きます。もしJQueryプラグインなどでasyncが使えない場合は、サンプルにあるasyncをdeferに変えればいい感じになるでしょう。

まとめ

いままで不満に思っていた<script>タグの出力がいい感じになりますし、<script>タグにasyncやdeferを入れると非同期になってブラウザのレンダリングの邪魔をしなくなるのでサイトの高速化に期待が持てます。<script>タグのためにWordPressプラグインでやっていたことをちょっとのコードでできるようになるのでぜひとも試してみてください。