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

WordPress

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属性を空文字に変更して削除します。

filterフックとactionフックの知識が必要

コピペするだけでそのまま使えちゃうのですが、この辺をいじるにはfilterフックやactionフックの知識が必要になってきますね。

ちょっと難しそうな感じはしますが、この辺を勉強するとWordPressでできる事が増えるのでオススメです。

三上 龍志|株式会社シンシエイト
この記事を書いた人
三上 龍志|株式会社シンシエイト
2005年からWeb制作に従事。システム開発ベンチャーでエンジニアとしてWeb開発、Webコンサルティング会社でマーケター・新規事業開発を経て2015年に当社を創業。顧客の成果に顧客よりも本気になることをテーマに、Webを通じて顧客の事業を加速させるために日々奮闘中。
関連する記事
ワードプレス画面
WordPressとは?ワードプレスのメリットとデメリットを徹底解説!
WordPress
WordPress
WordPress管理画面のエディタ内だけにCSSを適用する方法
WordPress
NO IMAGE
【WPエラー】Warning: dynamic sitemap generation must have parmalinks enabled.
WordPress
WordPress
WordPressのマルチサイト化は超カンタン!初心者でもラクラク設置する5ステップ
WordPress
ワードプレスの投稿者アイコンを表示する「Gravatar」にアバターアイコンを登録しよう
WordPress
ワードプレス iPhone アプリダウンロード
ワードプレスの iPhone アプリ初期設定方法
WordPress
WordPress
なぜホームページを作るならWordPressがおすすめなのか!
WordPress
ワードプレスの Android スマホアプリ
ワードプレスの Androind アプリ初期設定方法
WordPress
NO IMAGE
WPのiPhoneアプリとウェブブラウザで出来る・出来ない機能比較
WordPress
ワードプレスのテーマとは?デザインテンプレートを変更する2つの方法
WordPress
マーケティングとWeb制作で
貴社の経営課題を解決します

市場調査や競合調査を始め、企業やサービスの優位性を理解した上で、UI/UX設計やコンテンツマーケティング、SEO・ネット広告を中心としたWebマーケティングを通じて、ビジネスを加速させるご提案をしています。