【WP】W3Cのマークアップバリデーションエラーを解決する方法

三上龍志｜株式会社シンシエイト

投稿日： 2020.05.11

WordPressで作ったサイトをW3Cのマークアップバリデーションに通すと、CSSとJSの読み込みでエラーが起きてしまいます。原因は「type=”~~~”」の属性が自動挿入されてしまうためなので、今回はこのtype属性を削除する方法を解説します。

やりたいこと

// W3Cエラーの出るタグ（CSS）
<link rel='stylesheet' id='style-css'  href='https://example.com/wp-content/themes/hoge/style.css' type='text/css' media='all' />

// W3Cエラーを解決するタグ（CSS）
<link rel='stylesheet' id='style-css'  href='https://example.com/wp-content/themes/hoge/style.css' media='all' />


// W3Cエラーの出るタグ（JS）
<script type='text/javascript' src='https://example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>

// W3Cエラーを解決するタグ（JS）
<script src='https://example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>

上記のように、タグから「type=”***/***”」の属性をなくすことで、W3Cのマークアップバリデーションのエラーを回避するため処理をfunctions.phpに書いていきます。

結論

add_action('template_redirect', function()
{
    ob_start(function($buffer){
        $scriptTags = [
            '<script type="text/javascript"',
            '<script type=\'text/javascript\'',
        ];

        $styleTags = [
            '<style type="text/css"',
            '<style type=\'text/css\'',
        ];

        $buffer = str_replace($scriptTags, '<script', $buffer);
        $buffer = str_replace($styleTags, '<style', $buffer);

        return $buffer;
    });
});

add_filter('style_loader_tag', function($tag)
{
    $tags = [
        ' type="text/css"',
        ' type=\'text/css\'',
    ];
    $tag = str_replace($tags, '', $tag);

    return $tag;
});

add_filter('script_loader_tag', function($tag)
{
    $tags = [
        ' type="text/javascript"',
        ' type=\'text/javascript\'',
    ];
    $tag = str_replace($tags, '', $tag);

    return $tag;
});

上記プログラムの説明

そんなに難しいことはないのですが、上記プログラムが何をしているか説明していきます。

add_action('template_redirect', function()
{
    ob_start(function($buffer){

        $styleTags = [
            '<style type="text/css"',
            '<style type=\'text/css\'',
        ];
        $buffer = str_replace($styleTags, '<style', $buffer);

        $scriptTags = [
            '<script type="text/javascript"',
            '<script type=\'text/javascript\'',
        ];
        $buffer = str_replace($scriptTags, '<script', $buffer);

        return $buffer;
    });
});

上の部分は、インラインのCSSとJSに関するタグの変更です。

$styleTagsと$scriptTabsでtype属性のついた部分を指定し、これらをstr_replace()でそれぞれのタグに変更するという記述です。

それぞれの$~~~Tagsの関数の2行目はバックスラッシュ（\）でシングルクォーテーション（’）をエスケープしています。

add_filter('style_loader_tag', function($tag)
{
    $tags = [
        ' type="text/css"',
        ' type=\'text/css\'',
    ];
    $tag = str_replace($tags, '', $tag);

    return $tag;
});

add_filter('script_loader_tag', function($tag)
{
    $tags = [
        ' type="text/javascript"',
        ' type=\'text/javascript\'',
    ];
    $tag = str_replace($tags, '', $tag);

    return $tag;
});

これは二つの add_filter() を使っていますが、上がCSSの置き換えで下がJSです。

基本的な操作はインラインと同じですが、それぞれのtype属性を空文字に変更して削除します。