blogスタッフブログ
HOME > スタッフブログ > CMS > WordPress >WordPressにおけるtype属性の省略

WordPressにおけるtype属性の省略

コードの品質管理の際によく利用される下記サイトですが、今回はその中でもtype属性エラーへの対処法をご紹介します。

Nu Html Checker
https://checker.html5.org/

type属性の省略

HTML5では 'script' にtype属性は不要であり、構文チェックの際にエラーが表示されます。

Warning:The type attribute is unnecessary for JavaScript resources.

静的ファイルならば、そのままtypeの記述を削除すれば良いのですが、WordPressでは 'enqueue'系の関数を使用するのが一般的な手法です。("wp_enqueue_script")

'enqueue'系の関数で付与されたtype属性を削除するために、フィルターフックを使ったコードがあります。

function remove_script_type($tag)
{
    return str_replace("type='text/javascript'", '', $tag);
}
add_filter('script_loader_tag', 'remove_script_type');

このコードで多くは対応できますが、Contact Form7などのプラグインで付与されるコードには効かない場合があります。

そこで、テンプレートが読み込まれる前にアクションフックを使い、type属性を削除する方法があります。 それが下記のコードです。

add_action('template_redirect', function () {
    ob_start(function ($buffer) {
        $buffer = str_replace(array('type="text/javascript"', "type='text/javascript'"), '', $buffer);
        return $buffer;
    });
});

WordPressのフックは利用する場面も多く、覚えておいて損はありません。
公式のリファレンスをよく読んで理解しておくことが重要です。