wordpressで読み込むscript要素にasync、defer属性を追加する方法とハマったこと

wordpressではwp_enqueue_script（）を使ってjavascriptの読み込み設定をすることができますが、wp_enqueue_script（）ではasyncやdefer属性の設定をすることができません。そのためasyncやdefer属性を追加するときはscript_loader_tagフックを使います。その他にはhead要素内、あるいはbody要素内に直接script要素をコーディングする方法もありますが、functions.phpでscriptの管理を一括でしたいため今回はscript_loader_tagを使用しました。個人的にはwp_enqueue_script（）で設定できるのが一番望ましいです。

script_loader_tagフックの使い方

functions.phpに関数を追加してscript_loader_tagフックに登録します。下記のコードはハンドルがhogeのscript要素を書き換えます。

add_filter('script_loader_tag', 'add_async_to_script', 10, 3);
function add_async_to_script($tag, $handle, $url) {
  if ('hoge' === $handle) {
    $tag = '<script src="' . esc_url($url) . '" async></script>';
  }
  return $tag;
}

add_async_to_script関数をscript_loader_tagフックに登録しています。script_loader_tagフックは引数を3つとることができます。$tagはscript要素、$handleと$urlはwp_enqueue_scriptやwp_register_scriptで設定したハンドルとURLです。

script_loader_tagフックを使う時にハマったこと

使い方自体は簡単ですが、管理画面のscript要素にも影響します。私の場合管理画面に影響することが抜けていたため、管理画面でエラーとなり、プラグインが動作しない状態となっていました。影響範囲が全体に及ぶので利用時には注意が必要です。