WordPress FontAwesome 5.11をwp_enqueue_scriptで正しく追加する方法

WordPressでFontAwesome 5.11以降のスクリプトを wp_enqueue_script で付加したい時に crossorigin="anonymous" もちゃんと埋め込む方法。

近年のFontAwesome

FontAwesome 5.11（5.10？）以降はアカウント登録必須となった。で、FontAwesomeのサイトでKitを作成し、生成されたスクリプトタグをサイトに貼る必要がある。

WordPressのwp_enqueue_scriptで使うときの問題

<script src="https://kit.fontawesome.com/f73796a947.js" crossorigin="anonymous"></script>

そこで問題がひとつ。WordPressでJavaScriptを読み込ませるには wp_enqueue_script を使うのがお作法だが、普通に wp_enqueue_script しても crossorigin="anonymous" が付加できない。というわけで対応策。

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

フックの記述は省略。第1引数の fontawesome の部分は任意。第2引数にはコードのURL。

<?php
wp_enqueue_script('fontawesome', 'https://kit.fontawesome.com/f73796a947.js', array(), '', true);

crossorigin=”anonymous” を付加するフィルターフック

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

handle !== のところに、crossorigin="anonymous" を入れたいスクリプトの名前（wp_enqueue_script の第1引数。今回は fontawesome ）を入れます。

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

function custom_script_loader_tag($tag, $handle) {
  if($handle !== 'fontawesome') {
    return $tag;
  }
  
  return str_replace('></script>', ' crossorigin="anonymous"></script>', $tag);
}

埋め込まれたコードを確認

crossorigin="anonymous" がちゃんとついてました。