「Simplicity」がスマホでレスポンシブにならない問題を解消

運営しているどのサイトもスマホからのアクセスが多く、
だいたいアクセス数の半分はスマホです。

スマホの表示をパソコン版の表示のままにしておくと
字が小さすぎて読めない等の問題があるので、
スマホの場合はモバイル版の表示にしなければなりません。

しかし一部のページで切り替えが上手くいかず、悪戦苦闘しました。

レスポンシブ機能がおかしい?

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」を削除しました。
削除した際に生じた不具合はこちらに書いてあります。

WP Super Cacheを削除したら全ページ404エラーになって頭が真っ白に
以前、サイトの表示速度が遅かったので速くする方法を探していました。 検索していく中でWordPressプラグインの...
スポンサーリンク

シェアはこちらからどうぞ

コメント

  1. cyapu より:

    こんばんは
    同じことで悩んでいました。
    これで解決と思っていたのですが
    私のほうはこれでも解決出来ませんでした。
    残念です。

    • 宮島ムー より:

      cyapuさん
      コメントありがとうございます。

      ディベロッパーツールで
      cyapuさんのサイトを拝見したら
      レスポンシブになっていましたが
      解決していないページもあるということでしょうか。

      • cyapu より:

        そうなんですか?
        自分では見れないってことですかね!
        SNSや広告も自分のiPhone6 Plusから見たら表示されていませんでした。

        • 宮島ムー より:

          悩んでいらっしゃるのは
          スマホで見るとPC版のように
          SNSや広告が出ないということですね。

          この記事に書いてあるレスポンシブの問題というのは
          スマホでもモバイル版にならず、
          PCと同じ表示になってしまうということです。

          そのため、解決方法が異なると思われます。
          恐れ入りますが他のサイトをあたってください。

          • cyapu より:

            ありがとうございます。
            スマフォとPC表示もそうだったのですが、SNSも見れなかったので、その点はほかのサイトで検索してみます。
            ありがとうございました。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

答えを半角数字で入力してください *