wp_enqueue_scriptsで読み込まれるscriptタグにasync属性を追加する方法

WordPressサイトにて、wp_enqueue_scriptsで読み込んでいるscriptファイルに対して、async属性を追加する方法をご紹介いたします。

通常、wp_enqueue_scriptsで読み込まれたscriptタグには、async属性は付きません。サイトのソースを確認すると、以下のようになっていることがわかります。

<script type='text/javascript' src='https://example.com/wp-content/themes/themename/js/script.js'></script>

ここにasync属性を追加し、非同期処理を行うようにするための方法をご紹介したいと思います。

wp_enqueue_scriptsで読み込まれるscriptタグにasync属性を追加する方法

適用しているテーマのfunctions.phpに以下のようなコードを追加します。

function load_scripts(){
  wp_enqueue_script( 'script-handlename', get_theme_file_uri('/js/script.js'), array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts',  'load_scripts' );

function add_async_scripts( $tag, $handle ) {
  if ( 'script-handlename' === $handle ) {
    return str_replace( 'src', 'async src', $tag );
  } else {
    return $tag;
  }  
}
add_filter( 'script_loader_tag', 'add_async_scripts' );

script_loader_tagを使うと、wp_enqueue_scriptで読み込まれるscriptタグに対して、$tag(scriptタグ全体)・$handle(ハンドル名)・$src(スクリプトファイルのURL)の3つの値が渡されます。この渡される値を変更することによって、最終的に出力されるscriptタグをカスタマイズできます。

上記の例だと、ハンドル名が”script-handlename”のscriptタグ内の”src”を”async src”に変更することで、async属性を追加しています。”script-handlename”以外のscriptタグは通常通りの出力(async無し)になります。

これにより、出力されるscriptタグが以下のように変更されます。

<script type='text/javascript' async src='https://example.com/wp-content/themes/themename/js/script.js'></script>

特定のハンドル名のscriptタグだけでなく、すべてに適用したい場合はif文による条件を消します。

function add_async_scripts( $tag, $handle ) {
  return str_replace( 'src', 'async src', $tag );  
}
add_filter( 'script_loader_tag', 'add_async_scripts' );

あとがき

script_loader_tagを使うと、WordPressサイトにwp_enqueue_scriptsで読み込んでいるscriptタグを自由にカスタマイズ可能です。

今回はasync属性を追加する方法を紹介しましたが、環境に合わせて色んな変更を加えることができますね。