WordPressで自動的に読み込まれるスクリプト(script)タグには、【type属性】が自動的に挿入されます。 上記の赤字部分ですね。
<script type="text/vavascript">
HTML5では、【type属性】を記述しなくても構わなくなりました。
<script>
上記のような記述でOKです。
記述しなくても良くなったわけですから、WordPressで読み込まれるタグからも不要な【type属性】を除外したいですね。
フィルターフック【script_loader_tag】(WordPress V4.1以降に実装)を使えば、スクリプト(script)タグから【type属性】を除外することができます。
今回は、【script_loader_tag】を使ってスクリプト(script)タグから【type属性】を除外する方法をご紹介いします。
【script_loader_tag】を使って【type属性】を除外する方法
今回は、スクリプトタグから【type属性】を除外する2種類の方法をご紹介します。
- 単純に【type属性】を除外する方法
- 【type属性】を除外して非同期で動かす方法
個別に見ていきましょう。
単純に【type属性】を除外する方法
まずは、単純に【type属性】を除外する方法です。
以下のコードをfunctions.phpに追記して保存してください。
// スクリプトコードから【type属性】を除外
function remove_script_type($tag) {
return str_replace("type='text/javascript' ", "", $tag);
}
add_filter('script_loader_tag','remove_script_type');
上記のコードを記述することで、WordPressで自動的に読み込まれるスクリプトタグから【type属性】を除外することができます。
<script type="text/vavascript">
上記のように出力されていたスクリプトコードが、以下のように変化します。
<script>
【type属性】が除外されているのが確認できますね。
【type属性】を除外して非同期で動かす方法
続いて、【type属性】を除外+スクリプトが非同期で動くようにする方法をご紹介します。
以下のコードをfunctions.phpに追記して保存してください。
// スクリプトコードから【type属性】を除外して非同期にする
function remove_script_type($tag) {
return str_replace("type='text/javascript'", "async='async'", $tag);
}
add_filter('script_loader_tag','remove_script_type');
こちらのコードを使うと、WordPressで自動的に読み込まれるスクリプトタグから【type属性】を除外した上、スクリプトタグを非同期で動かすための【async属性】が追加されます。
<script type="text/vavascript">
上記のように出力されていたスクリプトコードが、以下のように変化します。
<script async='async'>
【type属性】が除外され【async属性】が追加されたのが確認できます。
【type属性】を除外して非同期で動かす方法の注意点
【type属性】を除外して非同期で動かす方法を採用すると、管理画面のテーマエディターや一部のプラグイン編集画面で不具合が確認される場合があります。
サイトの確認に加え、管理画面のチェックを行ったほうが良いでしょう。
不具合が確認さえる場合、単に【type属性】を除外する方法を採用するようにしましょう。
【type属性】を除外して非同期で動かす方法を採用した段階で不具合が生じていなくても、後にプラグインなどを追加したとき、不具合が生じる可能性があります。
このような場合は、今回追加したコードが原因の可能性があることを覚えておくと良いでしょう。
まとめ
WordPressで自動的に読み込まれるスクリプトタグから【type属性】を除外する方法をご紹介しました。
- 単純に【type属性】を除外する方法
- 【type属性】を除外して非同期で動かす方法
いずれの方法も、1つのコードをfunctions.phpに追記するだけでOK。
コピペだけで行えます。
コメントを残す