WordPressの「WPtouch」のテンプレートでエラー

前提・実現したいこと

WordPressのスマートフォン用ページの作成用プラグイン「WPtouch」で作成されたページの
HTMLの構文を「Another HTML-lint 5」のページでチェックしてみましたところ、

「<LINK> の HREF 属性の URI //fonts.googleapis.com/css?family=（省略） はうまく評価されないかも知れません。」
「<LINK> の MEDIA の属性値に空の値を指定することはできません。」という二つのエラーが見つかりました。

head内の「<link rel='stylesheet' id='foundation_google_fonts-css' ～」というタグが原因のようなのですが、こちらを「WPtouch」のテンプレート上から削除するには、どの部分をどのように操作すればよろしいでしょうか？

また、「このコンテクスト中では<STYLE>要素は<DIV>要素の子要素とはなれません」
というエラーも見つかりまして、こちらは

「<style>.page-wrapper { background-color: #fff7f7; }
body, header, .wptouch-menu, .pushit, #search-dropper, .date-circle, .list-view .list-carousel { background-color: #037add; }～」

という部分が原因のようでした。
こちらも一緒に削除したいのですが、このタグはどの位置に存在しますでしょうか？

どうぞよろしくお願いいたします。

発生している問題・エラーメッセージ

「<LINK> の HREF 属性の URI `//fonts.googleapis.com/css?family=（省略）` はうまく評価されないかも知れません。」

「<LINK> の MEDIA の属性値に空の値を指定することはできません。」

「このコンテクスト中では<STYLE>要素は<DIV>要素の子要素とはなれません」

該当のソースコード

<link rel='stylesheet' id='foundation_google_fonts-css'  href='//fonts.googleapis.com/css?family=　（省略）　' type='text/css' media='' />

<style>.page-wrapper { background-color: #fff7f7; }
body, header, .wptouch-menu, .pushit, #search-dropper, .date-circle, .list-view .list-carousel { background-color: #037add; }
.content-wrap a, #slider a p:after { color: #037add; }
.dots li.active, #switch .active { background-color: #037add; }
.bauhaus, form#commentform button#submit, form#commentform input#submit { background-color: #028dce; }
</style><!--Bauhaus v2.2.4-->

試したこと

ひと通りテンプレートを見たのですが、どの位置かよくわかりませんでした。

補足情報（FW/ツールのバージョンなど）

WPtouchは4.3.34のバージョンです。

行動規範の内容に同意します

回答2件

ベストアンサー

<LINK> の HREF 属性の URI //fonts.googleapis.com/css?family=（省略）はうまく評価されないかも知れません。

head内の「<link rel='stylesheet' id='foundation_google_fonts-css' ～」というタグが原因のようなのですが、こちらを「WPtouch」のテンプレート上から削除するには、どの部分をどのように操作すればよろしいでしょうか？

ところで、なぜ修正したいと思ったのでしょうか？

Another HTML-lint 5 の解説読みましたか？

Another HTML-lint 5 解説 241には、

241. <TAG> の ATTR 属性の URI `XXXX` はうまく評価されないかも知れません。 **

// で始まるURIは、正しいURIです。しかし、これはWWWブラウザによっては正しく評価されないかも知れません。

と書かれています。

「正しい URI」と書かれているのですが、何をどのように修正するのですか？　

「正しい URI」であれば、仕様上は問題がないということになります。あとはWebサイトのポリシーの問題ですので、どのように修正するかの正解は運営者の判断です。

<LINK> の MEDIA の属性値に空の値を指定することはできません。

wp-content/plugins/wptouch/core/class-wptouch-pro.php で出力していますね。

wp_enqueue_style( 'wptouch-admin-google-fonts', '//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic', false, md5( WPTOUCH_VERSION ) );

wp_enqueue_style の第5パラメータを指定してください。( 関数リファレンス/wp_enqueue_style 参照 )

プラグインを書き換えるとプラグインがアップデートされた際に元に戻るので、テーマの functions.php あたりで、wp_enqueue_scripts HOOK を利用して、プラグインが組み込んだ script をwp_dequeue_script で削除して、第5パラメータを追加したwp_enqueue_styleを追加でしょうか。

しかし、第5パラメータ( media )の省略時のデフォルトは、allのはずなんですけどね...

(追記)

wptouch のソース(modules/google-fonts/google-fonts.php)を見るとで、 wptouch_filter_google_fonts フィルターで、google フォントを無効化できそうなので、こっちの方が良いですね。

お使いのテーマで

add_filter( 'wptouch_filter_google_fonts', '__return_false' );

かな。

「このコンテクスト中では<STYLE>要素は<DIV>要素の子要素とはなれません」

<style>.page-wrapper { background-color: #fff7f7; }

body, header, .wptouch-menu, .pushit, #search-dropper, .date-circle, .list-view .list-carousel { background-color: #037add; }
.content-wrap a, #slider a p:after { color: #037add; }
.dots li.active, #switch .active { background-color: #037add; }
.bauhaus, form#commentform button#submit, form#commentform input#submit { background-color: #028dce; }
</style>

<div> 〜 </div> の中に <style> 〜 </style> というエラーですが、 と書かれていますから、お使いのテーマか別のプラグインが、<div> 〜 </div> の中に <style> 〜 </style> を出力しているということは、ないでしょうか？

ソースが不明ですが、テンプレートの中の get_footer() の位置が悪いのかもしれません。

投稿2019/03/05 08:01

編集2019/03/05 08:16

CHERRY

総合スコア25171

fileroad

2019/03/05 22:10 編集

ありがとうございます。「URI //fonts.googleapis.com/」のエラーの方、 add_filter( 'wptouch_filter_google_fonts', '__return_false' );　を導入することで、無事削除ができました。「Another HTML-lint 5では、-7点と結構低いマイナス点が出ていたため、削除しようと考えました。「このコンテクスト中では<STYLE>要素は<DIV>要素の子要素とはなれません」の方、試しに別のテンプレートや他のプラグインなし、TPtouchのインストールしたての初期状態でも確認してみたのですが、やはり同様に、同じエラーが出てしまいました。位置の方も、どの部分が問題でこのタグ配置になっているのか、やはり発見ができない状態です。またこちらのエラーはー9点と、さらに低い評価でした。