[ワードプレス]スマホの表示が崩れる原因解決方法

ワードプレスでブログを書いているともっとPVを増やしたい気持ちからいろんな「ブログおすすめプラグイン」を入れてしまいますが、それがときには問題の原因になります。

数日前に親しい人から「ブログの中に記事用コードが出てしまってますよ」とコメントがありました。PCサイトで見ても「あれ？普通表示されてるのに」と思ったりもしたのですが、もしかやと思いスマホで自分のブログをチェックしてみたら

コメントの通りになっているどころか、サイト自体の表示がおかしい「えーなんやねんコレー」みたいな感じで原因を追求するため朝方4時までwordpressとにらめっこしてました。

表示不具合は

• スマホで表示するとサイドバーが表示さされない
• 記事上、記事したの広告がでない
• のコード表示のため共通コンテンツコードを挿入すると
• cc id=0000 title=というコード自体が表示されてしまう

CSSをチェックしたりプラグインを切ったりテーマの設定を見直したりても解決できませんでした。そもそも、CSSってなんやねん？HTMLってなんやねん？っていう人ですから、見ても何がなんやらです

当然googleで調べるわけですが私の不具合について書いてあるサイトを発見することができません。こうなれば総当りと思いすべての設定項目およびCSS、プラグインを見直しをしてみました。そして見つけました。

原因はJetPackでした。

Jetpackとは

WordPressを利用する上で便利なアクセス解析や問い合わせフォーム、SNS自動共有など約30種の機能をパックにしたものということですが、正直これは必要だから入れたというわけではなく、SEOについて色々とサイトを調べていたら「入れた方がいいよー」という話でいれただけのもの駄目ですね。こういう理解していないものを入れてしまうのは…原因となる設定は

Jetpack-Writing-テーマの編集

スマートフォン向けにサイトを最適化このチェックを外すことで問題は解決しました。

原因は？

使っているテーマのスマホ表示とjectpackのスマホ表示と喧嘩してしまったのではないか？と推測しています。

さいごに

解決するのに数十時間くらいかかりました。苦手意識しかなかったWordpressで原因を解明できたのは自分にとって大きな一歩でした。同じような症状でお困りの方参考にしてみてください。