運営しているどのサイトもスマホからのアクセスが多く、
だいたいアクセス数の半分はスマホです。
スマホの表示をパソコン版の表示のままにしておくと
字が小さすぎて読めない等の問題があるので、
スマホの場合はモバイル版の表示にしなければなりません。
しかし一部のページで切り替えが上手くいかず、悪戦苦闘しました。
レスポンシブ機能がおかしい？
WordPressのテーマの多くには自動で切り替えを行ってくれる
「レスポンシブ機能」が備わっています。
わたしが運営しているサイトもレスポンシブのテーマを使っているので
特に何もしなくても大丈夫だと思っていました。
しかもわたしはスマホを持っていないため、
スマホ版の表示を確認していませんでした。
Google Chromeでスマホでの見え方を確認
たまには確認してみようと思い、
GoogleChromeのディベロッパーツールで
iPhoneからの見え方をチェックしました。
ちなみにGoogleChromeでスマホ版の表示を見るには
「設定→その他のツール→ディベロッパーツール」を選択します。
iPhoneやAndroid携帯、タブレットなど、各種デバイスが用意されています。
モバイル版になっていない!?
レスポンシブになっているかと思いきや、PC版の表示のままでした。
具体的にはスマートフォン表示でもモバイル版のページにならず、
パソコン用の大きなサイズのサイトが縮小して表示されていました。
GoogleのPageSpeed Insightsでも
モバイル画面での見え方を確認することができます。
「このページはモバイルフレンドリーテストに合格しません」
と書かれていて衝撃を受けたものです。
一方でパソコンの画面でモバイル表示されることがあり、
本格的に何かがおかしいように思われました。
レスポンシブにならない原因を探る
当サイトは「Simplicity」というテーマを使っています。
非常に使いやすく、レスポンシブ機能も付いているというテーマです。
開発者の方のサイトでサポートもされています。
まさかこんなメジャーなテーマで不具合があるはずもなく
わたしのほうで問題があるのだろうと考えました。
しかしわたしはカスタマイズなどしておらず、
再インストールなどしてみても直りません。
しかもレスポンシブになっているページもあれば
レスポンシブになっていないページもあります。
同じサイトでも、モバイル版になるページとならないページがあるのです。
これはスタイルシート等の問題ではないと思いました。
レスポンシブにならない答えを発見
もう自分でやっていてもらちが明かないので、
Googleでひたすらそれらしい文言を検索しました。
すると開発者の方のサイトに答えが載っていました。
わたしが使っていたプラグイン「WP Super Cache」のせいで
表示がおかしくなっていたことが判明。
解決法まとめ
1 Simplicityのカスタマイズ画面→レイアウト（全体・リスト）から
「完全レスポンシブデザインにする」をオフにする
2 WP Super Cacheの設定画面→詳細から
「Mobile device support.」をオンにする
ひとまずこの2工程で、
スマホでの表示がきちんとモバイル版サイトになりました。
上記サイトにはもっと詳しく書いてありますが
いまのところこの2工程だけでも改善が見られたので
ちょっと様子を見たいと思います。
キャッシュ系プラグインが原因
一部直っていないページがあったのですが
「WP Super Cache」をいったん停止して、
その後有効化したら直りました。
キャッシュ系プラグインが原因らしいと判っただけでも
かなりの前進です。
先生方ありがとうございました。
【追記】WP Super Cacheを削除
結局「WP Super Cache」を削除しました。
削除した際に生じた不具合はこちらに書いてあります。
