WordPress wp_enqueue_scriptで追加するscriptタグにdefer/asyncを付加する方法

WordPressにおいて、scriptタグは wp_enqueue_script で追加するのがお作法だが、defer とか async を付加したい時があるので、その方法。

これをやりたい

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>

この↑、 defer を付加したい。でも、普通に wp_enqueue_script してもダメなので、対応策。

とりあえず普通にscriptをキューに入れる

フックの記述は省略。最初の引数の fontawesome5 の部分は任意。今回はFontAwesome 5のスクリプトなのでこのようにつけました。

<?php
wp_enqueue_script('fontawesome5', 'https://use.fontawesome.com/releases/v5.0.9/js/all.js', array(), '5.0.9', true);

deferを付加するフィルターフック

お次は、上記で出力されるスクリプトに defer を付加するためのフック。単に置換してるだけです。script_loader_tag に引っかけます。

handle !== のところに、defer を入れたいスクリプトの名前（今回は fontawesome5 ）を入れます。

<?php
add_filter('script_loader_tag', 'add_defer', 10, 2);

function add_defer($tag, $handle) {
  if($handle !== 'fontawesome5') {
    return $tag;
  }
  
  return str_replace(' src=', ' defer src=', $tag);
}

asyncを付加するフィルターフック

やり方は同じ。

<?php
add_filter('script_loader_tag', 'add_async', 10, 2);

function add_async($tag, $handle) {
  if($handle !== 'fontawesome5') {
    return $tag;
  }
  
  return str_replace(' src=', ' async src=', $tag);
}