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

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

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

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

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タグのフィルタリングして内容を変更することができます。

最後に

本記事では、scriptタグにcharset属性を追加する方法としてつらつらと解説してきましたが、charset属性だけでなくidやasync属性にも応用が利きます。ハンドルをid属性の値に指定したり、ソースURLで任意のスクリプトを読み込まないようにするといった細かい要望にも対応可能となります。

script_loader_tagのフィルターフックは便利ですので、覚えておくと良いかもしれませんね！

以上、WordPressでscriptタグにcharset属性を追加する方法のご紹介でした！