【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

【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は下記の引数を持つことができます。

$tagscriptタグ
$handlescriptタグのハンドル
$srcscriptのソース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属性を追加する方法のご紹介でした!

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍