【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属性を追加する方法のご紹介でした!

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍