【WordPress】scriptタグにcharset属性を追加する

こんにちは、Ryohei（@ityryohei）です！

本記事では、WordPressでscriptタグにcharset属性を追加する方法をご紹介しています。wp_footer()などで読み込むキューに登録されたscriptタグに対して有効な方法となります。

WordPressで読み込まれるscriptタグにcharset属性を追加したいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

scriptタグの内容を変更する方法

scriptタグの内容の変更するには、script_loader_tagというフィルターフックを使用します。script_loader_tagはエンキューされたscriptタグをフィルタリングし、出力するscriptタグの内容を変更することができます。

add_filter( 'script_loader_tag', 'add_attribute_script', 10, 3 );

function add_attribute_script($tag, $handle, $src){
　　//実行する処理を追記
}

script_loader_tagは下記の引数を持つことができます。

$tag	`script`タグ
$handle	`script`タグのハンドル
$src	`script`のソースURL（src）

上記の引数を使用することでscriptタグの情報を取得し、内容を変更します。

では上記のフィルターフックを使用して、実際にscriptタグにcharset属性を追加してみます。

scriptタグにcharset属性を追加する

例として下記の2パターンでscriptタグにcharset属性を追加する方法をご紹介します。

キューに登録されているすべてのscriptタグにcharset属性を追加する
指定したハンドル名と一致するscriptタグにcharset属性を追加する

キューに登録されているすべてのscriptタグに属性を追加する

function add_charset_scripts($tag, $handle, $src){
    $tag = '<script type="text/javascript" src="'.esc_url($src).'" charset="utf-8"></script>'."\n"; 
    return $tag;
}
add_filter( 'script_loader_tag', 'add_charset_scripts', 10, 3 );

ハンドルが一致するscriptタグに属性を追加する

function add_charset_scripts($tag, $handle, $src){

    //charsetを追加したいscriptのハンドル名を配列に追加する
    $scripts = array('my-script');

    if(in_array($handle, $scripts)){
        $tag = '<script type="text/javascript" src="'.esc_url($src).'" charset="utf-8"></script>'."\n"; 
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_charset_scripts', 10, 3 );

これでキューに登録されているscriptタグのフィルタリングして内容を変更することができます。