【初心者必見】ワードプレスのテーマのレイアウトが崩れたときやるべきこと

[voice icon="https://hikitaro.com/wp-content/uploads/2019/06/40089718.2b41005ba0d1899a3f0bf130c1f85933.19060315-1-e1561226485604.jpg" name=“ユウガ” type="l"]なんか何にもやってないのにいきなりページが変になった!![/voice]

ブログの記事を書いていて

何もやってないにいきなりテーマのレイアウトが壊れた!

ってこと結構ありますよね。今回はそんな時にやるべきことを紹介します。

テーマの崩れってどんなの?

朝起きて自分のブログにアクセスすると

うわああああ 何じゃこりゃあああああ

ヘッダーのメニューがバグってますね。このままでもブログとしては機能するのですが、なんか萎えますよね。。。

ブログは第一印象が大切

ファーストインプレッションでこの記事を読みたいか読みたくたいか決まってしまいます。なんでテーマの崩れによって読者が減ってしまうなんてことも起こり得ます。

今回はそんなテーマ崩れの原因を突き止める方法について解説していきたいと思います。

簡単にまとめると

では詳しく解説していきます。

1.プラグインを全て無効化

ワードプレスのバージョンに対応していないプラグインが原因で、サイトのデザインが壊れるのはよくあることです。

特にCSSに関係あるものが多いです。

全て無効化がポイント

全て無効化することによって、プラグインが原因かどうかすぐに突き止めれます。全て無効化して変化がなかったら、プラグインが原因ではなかったということになります。

プラグインの全無効によってテーマの崩れが治った場合

プラグインが原因であることはこれでわかったので、次はどのプラグインが原因か調べるために

一つ一つプラグインを有効にしていって、どれが原因が突き止めます

あとはそのプラグイン削除もしくは無効化して完了です。

必ずキャッシュを削除してから、プラグインの検証をしてください。
キャッシュを削除しないと、プラグインの効果が無効化されない場合があります。

その時は別の原因(後で紹介します)を探ります。

2.CSSを全て削除

CSSはページの見た目を整えるのに使うツールですが、それが原因でページのレイアウトが崩れることもあります。(ちなみに僕はそれが原因でした)

CSSは自分で追加したものを全削除

ワードプレステーマにもともとあるCSSは削除してはいけません。テーマ崩れの原因となっている可能性はめちゃくちゃ低いです。

また削除する際は、コードをメモやワードなどに貼り付けてから削除してください。全部1から打ち込まないといけなくなります。

CSSの全削除によってテーマの崩れが治った場合、次は一つ一つのCSSを有効化(コピペ&更新の繰り返し)

検証する際は必ずキャッシュを削除しましょう。プラグインと同様、変更が反映されない場合があります。

これでどのCSSが原因か突き止めましょう。

思い当たるCSS(もしかしたらこれが原因かも)がある場合

そのCSSだけ削除→キャッシュを削除→ページを開く

をして、レイアウトの崩れが治ってるか検証してください。

気をつけてほしいこと

  • レイアウトの崩れは突然くる。
  • キャッシュは必ず削除

レイアウトの崩れは突然くる

レイアウトが崩れた時、最近入れたプラグインCSSが原因だと考えがちですが

少し前に入れたプラグインCSSが時間差でレイアウトの崩れを起こした
ということも十分ありえます。(実際僕もそうでした。)

直近に入れたプラグイン/CSSだけでなく、全て検証することをお勧めします

キャッシュの削除

また、キャッシュの削除をしないと効果が反映されないことがあるので、必ず削除しましょう。

[voice icon="https://hikitaro.com/wp-content/uploads/2019/06/40089718.2b41005ba0d1899a3f0bf130c1f85933.19060315-1-e1561226485604.jpg" name=“ユウガ” type="l"]僕もプラグイン全無効化+CSS全削除してもテーマの崩れが直らず絶望していましたが、キャッシュを削除した瞬間に直りました。[/voice]

プラグインCSSが原因ではないとき

内部ファイルによるテーマ崩れ

プラグインCSSの検証をしても、レイアウト崩れが直らない時は、FTP経由で入れたファイルが原因になっていることがあります。

そのファイルを一度サーバーから削除し検証してみましょう。

htmlのコードエラー

ブログにhtmlを使っている人は、

  • タグがしっかり閉じられているか
  • タグの数は正しいか

を検証すると直ることもあります。

[voice icon="https://hikitaro.com/wp-content/uploads/2019/06/40089718.2b41005ba0d1899a3f0bf130c1f85933.19060315-1-e1561226485604.jpg" name=“ユウガ” type="l"]

ちなみに僕のサイトのレイアウトが崩れた原因は、

CSSに全てのリスト要素のバックグラウンドがグレーになるコードがありました。。。


なんでそんなことしたんだろ、、記憶にありません

[/voice]