WordPressのテーマLightningでレイアウト崩れを起こした時の対処法

こんにちは！サラです。
ここ３日ほど、この水彩時間のレイアウトの修正（スマホで見ると３PRエリアの画像が拡大していた問題）に時間を取られていました。

この「水彩時間」は、CMSというサイトを作成するためのシステムを使っています。PCとスマホの画面の大きさに合わせて、レイアウトが変わるレスポンシブデザインの機能を盛り込んだもので、プラグインという小プログラムをインストールすることで、いろんな機能を追加することが出来ます。
ただし、プラグイン同士の相性が悪いと不具合を起こしたりすることもあるので注意が必要です。今回のレイアウトの崩れはこのプラグインの相性による不具合で起こっていました。

今回いろいろ試して成功したので（はぁ・・・時間かかったー）
サラ自身の備忘録と共に、同じようにレイアウト崩れで頭を抱えている方の参考にしてもらえたら・・・と思い記事にしました。

１）レイアウトが崩れの原因となったと思われるプラグインを削除する。

今回はAdSense Plugin WP QUADSというプラグインを入れ、有効化したことでトップページの3PRエリアの画像がスマホ画面で拡大表示されるという事態だったので、まずこのプラグインを削除しました。
このプラグインの削除だけで数分後にレイアウトが戻る場合もあるようです。
同名のプラグインでなくても、レイアウト崩れを起こす原因はプラグインの相性にある場合があります。最近、何かプラグインをインストールしませんでしたか？
思い当たるプラグインがあればそれを一度削除してみて下さい。
キャッシュ（過去のレイアウトのデータを残す機能）が働いている時は、すぐにはレイアウトが戻らないこともあります。今回は念のために以下の手順を踏みました。

 

２）レイアウトを構成しているプラグインを削除する。

テーマLightningと同時開発され、推奨されている多機能統合型プラグインVK All in One Expansion Unit のウィジェットで３PRエリアを作成しているので、このプラグインを一旦削除。
注１）削除する前にCSSやグーグルアナリティクスなどの追加記述や、設定をスクリーンショットなどを取って後でまた設定しなおせるようにしておきます。
注２）削除後すぐにインストールしないこと。なぜなら、サーバーのキャッシュ機能で２分間は更新されません。

 

３）すでにインストール済みのプラグインの中で、表示速度を上げるために入れたキャッシュ系プラグインを削除。

これは意外と盲点なのですが、
このプラグインがあるために古いCSSや、レイアウト崩れのもとになっているデータが残り続けてしまいます。
どんな機能を持っているプラグインか忘れている場合はググって調べて下さい。

 

４）サーバーにアクセスして、サーバーキャッシュを削除。

サーバーキャッシュというのは、Webページの表示を早くするために、すでに構成されているレイアウト機能。キャッシュが機能していないと、サーバー上では、いちいちアクセスがあるたびにレイアウトを組み立てて構成しなければならず、表示速度が遅くなります。
ここでは、そのキャッシュを一旦削除します。（そうすることで過去の削除したプラグインが残している残骸を消去します）

 

５）同じくサーバー上で、ブラウザキャッシュを削除。

キャッシュという機能はブラウザにも働いていて、こちらも削除します。ブラウザキャッシュは７日間保存されているので、レイアウト崩れにかかわる過去のデータ（キャッシュ）を削除します。

キャッシュの削除のやり方がわからない場合は、サーバー会社に問い合わせると教えてくれます。
ネットでやり方も書いてあるのでググってみて下さい。

 

ここまでやった後に、
６）改めて２）で削除したプラグインを再インストール。

ここでは、削除したVK All in One Expansion Unitを再インストールしました。3PRエリアをウィジェットであらためてレイアウトしなおします。
※ここでは以前の正常時のCSSとグーグルアナリティクスなどの設定が反映されていますが、
不調和をきたすレイアウト崩れは治っているはずです。

 

８）サーバーにアクセスしてキャッシュの設定を元に戻す

正常なレイアウト戻っていたら、サーバーにアクセスして、サーバーキャッシュとブラウザキャッシュをONにする。（過去の履歴だけ削除したはずですが、一応確認します。基本は高速化のためにONにしておきます。）

 

９）キャッシュ系プラグインの再インストール

サイトの表示を早くするために入れていたプラグインを、ここで再インストールします。

 

 

以上です。

今回はプラグイン同士の相性で起こった、スマホ画面のレイアウト崩れでした。

 

まとめ：テーマLightningでレイアウト崩れを起こした時の対処法

１）今回レイアウトの崩れの原因はAdSense Plugin WP QUADSというプラグインでした。ちがう名前のプラグインでも、「最近入れたプラグイン」が原因かもしれません。

２）プラグイン同士の相性が悪いと、レイアウト崩れを起こすことがある。

３）プラグインを削除して、すぐに再インストールすると、キャッシュが働いて、古いレイアウト（デザイン）がそのまま反映されてしまう。

プラグインを削除して、慌ててすぐまたインストール・・・ではなく、
削除したら１日くらい置いて、気分を仕切り直して、再インストール。
落ち着いてレイアウトをしなおす・・という余裕も大事です。

なぜだか、余裕がない時って、続けざまに色々してしまいがちだけど、
そうすると上手くいかないんですよね。水彩画を描いていても同じなんです。

一旦、クールダウンの時間をとる方が、不思議に上手くいきます。