wordpressの崩れたメニューデザインの原因と対処法【JIN】Chromeで確認しよう

wordpressと日々戦っているmafiです。

今回、wordpressのメニューデザインが崩れました。
様々な方法を試しましたが、最後はなんともあっけらかんとした解決でした。

今現在、WPのメニューデザインが崩れて困っている人
wordpressのテーマを「JIN」を使っている人
記事の確認を、特定のブラウザでしかしていない人
キャッシュ系プラグイン『WP Fastest Cache』を使っている人

などの方々の参考になればと思います。

事件は、Google Chromeで起こった

僕は、いつもパソコンの検索ブラウザは、Windowsの「Edge」を使います。

でもその日は、『Google Chrome』のデベロッパーツールで確認したいことがあったので、たまたま『Google Chrome』で自分のブログを見た時のことでした。

[chat face=”sakana1.jpg” name=”mafi” align=”right” border=”gray” bg=”none”] あれ！？ [/chat]

メニューのデザインが、大きく崩れているではありませんか。

スマホからも『Google Chrome』で見てみたところ、人気記事ランキングがズレて記事内容に覆いかぶさっているではありませんか。

当時の僕のスペック

Windows
wordpress
エックスサーバー
テーマは「JIN」
前日fanction.phpを触りエラーを起こしていた
前日プラグインを２つ新規追加していた

てっきり、僕は前日のfanction.phpが悪かったのだと思い、再アップロードしました。
前日使っていた時に、エラーが出ていたのです。

きちんと直したつもりだったのですが・・・

しかし、fanction.phpを再アップロードしようが、症状は変わりません。

キャッシュを削除
メニューを停止してから、再度表示
前日入れたプラグインを削除

しましたが、数分は正常な状態に戻るのです。
でも10分後にはもうダメ、最初の画像のように、デザインが崩れてしまいます。

原因は、キャッシュ系プラグイン『WP Fastest Cache』

ドメインの初期化までして、ブログを作り直しても、症状全く変わらない。

そんな時に、コチラの記事を見つけます。

VanBlog

Wordpressでカスタマイズしたらレイアウトが崩れた！その原因の見つけ方

ワードプレスブログのテーマをカスタマイズしていたら、レイアウトが崩れてしまった！原因が分かれば解決できますが、いったいどうやって？そんな原因の見つけ方・問題の切り分け方を解説します。

キャッシュ系プラグインで、WPのデザインが崩れる記事でした。
しかしここには、
[chat face=”man2.jpg” name=”？？” align=”left” border=”blue” bg=”none”] 『WP Fastest Cache』は影響ないようだから大丈夫 [/chat]
と書かれています。

[chat face=”sakana1.jpg” name=”mafi” align=”right” border=”gray” bg=”none”] そっか・・・でももしや・・・ [/chat]

そう、そのもしやです。

『WP Fastest Cache』プラグインを停止したところ、すっかりきれいなデザインに戻りました。

『WP Fastest Cache』は、ブログ開設日から入れていたのです。
もしかしたら、もっと早い時期から、このエラーが出ていたのかもしれません。