memocarilog

WordPress で Javascript ファイルを読み込む際に function.php などで wp_enqueue_script() を使用し、JSファイルを読み込んでいる場合が多いと思います。プラグイン側で wp_enqueue_script() にてJSファイルを自動的に読み込んでいる場合もあります。

wp_enqueue_script() で script タグを出力している場合、デフォルトでは以下のようなコードがフッター又はヘッダーへ出力されます。

<script type="text/javascript" src="https://memocarilog.info/wp-content/memocarilog/js/scripts.js?ver=5.0.3"></script>

この script タグへ defer 属性や async 属性を付与したい、idを追加したいなど script タグの内容を変更したい時には、script_loader_tag フォルターフックで自由に内容を加工することが可能です。

script_loader_tag フォルターフックの使い方

以下のように add_filter() を使ってフィルターフックと加工処理をする関数を登録します。

add_filter( 'script_loader_tag', '処理を行う関数名', 10, 3 );
function 処理を行う関数名( $tag, $handle, $src ){
	加工する処理;
	return 加工された script タグ;
}

script_loader_tag フィルターを使用すると、 wp_enqueue_script で呼び出されてる script タグに対して個々に $tag, $handle, $src の3つの値が渡されてきます。その渡される値を使って実際に出力される script タグを加工します。

関数内で var_dump( $tag, $handle, $src ); してみると以下のように値がとれるのが分かります。

第1引数でデフォルトで表示される script タグ、第2引数で wp_enqueue_script で設定したハンドル名、第3引数で挿入される src 属性値（JSファイルまでのパス）が取得できます。

script_loader_tag フォルターフックの使用例

例）テーマの JS ファイルを読み込んでいる script タグへ async 属性を付与する

属性を script タグへ追加したい場合は、function.php へ以下のように記述します。
3行目の ‘memocarilog’ === $handle の部分で変更を加えたい script のハンドル名を指定し、処理するスクリプトタグを選択します。

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

これで以下のように script タグへ async 属性が追加されました。

プラグイン側で自動的に読み込まれていて諦めていた、script タグへの adefer / async 属性の付与や、type属性の削除など、このフィルターフックを使うことで自由に簡単に加工できるようになります。