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

こんにちは!サラです。
ここ3日ほど、この水彩時間のレイアウトの修正に時間を取られていました。

この「水彩時間」は、CMSというサイトを作成するためのシステムを使っています。

CMSの中でもWordPress(ワードプレス)というのは、世界的にもユーザー数が多く、年々その数も増加中。
PCとスマホの画面の大きさに合わせて、レイアウトが変わるレスポンシブデザインの機能を盛り込んだものです。

また、プラグインという小プログラムをインストールすることで、いろんな機能を追加することが出来ます。
ただし、プラグイン同士の相性が悪いと不具合を起こしたりすることもあるので注意が必要です。

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

サラは、仕事上、ある程度HTMLやCSSといったコードを書けるのですが、Webのデザインの仕事から離れている間に、WordPress(ワードプレス)が普及し、いまではさっぱり書けなくなっています。
ですが、

レイアウト崩れを起こしたという時にまず考えられるのが、
CSSというレイアウト(デザイン、スタイル)にかかわるコード。
元に戻すためにやったことは、以下の通りです。同じように悩んでいる方の参考になればと思います。

 

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

今回はAdSense Plugin WP QUADSというプラグインを入れ、有効化したことでトップページの3PRエリアの画像がスマホ画面で拡大表示されるという事態だったので、まずこのプラグインを削除しました。

 

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

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

 

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

これは意外と盲点なのですが、
このプラグインがあるために古いCSSや、レイアウト崩れのもとになっているデータが残り続けてしまいます。

どんな機能を持っているプラグインか忘れている場合はググって調べて下さい。

 

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 

 

以上です。

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

 

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

1)レイアウトの崩れは、CSSが原因であることが多い。

2)プラグインを削除して、すぐに再インストールすると、キャッシュというおりこうさん機能が働いて、古いレイアウト(デザイン)が反映されてしまう

3)パソコンでの不具合も気分が大事
削除して、慌ててすぐまたインストール・・・ではなく、
削除したら1日くらい置いて、気分を仕切り直して、また再インストール。
落ち着いてレイアウトをしなおす・・という余裕が大事。

 

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

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