wordpress5.8にてモバイルフレンドリー非対応になる

[mai]

現在の環境は下記の通りです。
WordPress のバージョン：5.7.2 –> 5.8 –>5.7.2
Welcart のバージョン： 2.3.0
Welcart専用の拡張プラグイン：
ご利用のテーマ：voll(子テーマ)
画面は2カラム仕様
サーバー：（会社名、サービス名）xserver
SSLの利用：（独自　常時SSL）
プラグイン Redirection他
サイドwidgetは4種類を使い分けています。

早速でございますが、先日WordPress のバージョンを5.7.2から5.8に
バージョンをアップしたところ、googleのサーチコンソール内に

このページはモバイル フレンドリーではありません
クリック可能な要素同士が近すぎます
コンテンツの幅が画面の幅を超えています

コンテンツの幅が画面の幅を超えています

以上の2項目にわたり複数のURLがリストアップされました。
該当するURLは最近変更を加えていません。
コンテンツ内のタグをコメントアウトして
実質的にheader.phpとサイドバーwidgetとfooter.phpにしても
モバイルフレンドリーテストではフレンドリーになりませんでした。

モバイルフレンドリーテストに合格しているURLもあるので
その合格したURLのサイドバーwidgetと同じ仕様にしてテストしても不合格でした。
css周りをchromeのデベロッパーツールで各項目の幅をチェックするも
原因が分からないままでした。

そこで、モバイルフレンドリーテストに不合格になった日の前に
wordpressのバージョンを5.7.2から5.8に変更したことが原因かもと思い
バージョンを5.7.2に戻して、再度モバイルフレンドリーテストに不合格になったURLを
テストすると全て合格になりました。

どなたかVOLLをお使いの方で、同じ様な問題に対応された方が居られましたら
良きアドバイスをお願い申し上げます。

[furuta]

mai 様

こんにちは。
弊社のデモサイトでバージョンアップを行いましたが同じ症状は確認できませんでした。
不具合につきまして詳しい調査をご希望の場合は有償でございますが
こちらよりご連絡いただけますでしょうか。

[mai]

furyta 様

ご返信有り難うございます。

御社のvollテーマのデモサイトでもモバイルフレンドリーの判定を
確認して投稿をさせて頂きました。
投稿する前の状態はモバイルフレンドリーの判定は不合格の状態でした。

本日再度デモサイトを確認させて頂くと合格になっていました。
ただモバイルフレンドリー判定にて表示される画面は前回と別物でした。
何らかの変更があったのかもしれません？

[mai]

経過報告いたします。
色々なパターンを調べていくと、
header.php内で条件によりメニューを差し替えているのが原因の様です。
大丈夫なメニューとそうでないものがあります。
違いが何であるのかは不明です。
wordpress5.7.2では何ら問題なくモバイルフレンドリーテストで合格していました。
メニューの文字数？
5.8バージョンで何かが変更されているのかも？

[mai]

解決？
モバイルフレンドリーにi-padが含まれると仮定すると
アコーディオンメニューの下段のさらに副項目の数が多くあると
i-padの画面を横長にすると副項目の下段に位置するメニュー項目が
画面の枠外になる恐れがある？？？
そこで副項目の数を調節するとwordpredd5.8でもモバイルフレンドリーテストに合格
対処療法的なので本来の原因は不明です。

[mai]

原因がわかりました？・・・たぶん
ナビメニューの項目数(階層も含め)の上限がオーバーしていたことが原因かもしれません。
たぶんそうだと思います。
メニューの数を84以下にすることで解決しました。

ワードプレスのバージョンが5.9になったのを契機に
以前にモバイルフレンドリーの問題が発生していた件を思いだし
メニュー数を変更したところモバイルフレンドリーになりました。

ナビメニューの項目数の上限を変更することも可能なようですが
セキュリティーのリスクは増えるようです。

[sagawa]

mai様

こんにちは。
情報を共有いただきありがとうございます。

[投稿者]

投稿