2021/09/11

WordPressのサイト移行で管理画面のレイアウトが崩れた時の対処法

サーバー移転でWordPress管理画面のレイアウトが崩れるトラブル発生!

先日このブログのサーバーをさくらからXserverに移行した時にいくつかのトラブルが起こりました。

  • WordPressのログイン画面のレイアウトが崩れてしまった
  • 投稿画面のレイアウトが崩れてしまった
  • メディアライブラリが表示されなくなってしまった

主にレイアウト崩れ。せっかく久しぶりにこのブログを更新する気になったのに、これじゃ三日坊主だ!と言うことで早速原因究明をしてみました。

今回はどの様な方法でサーバー移転を行ったか

前提として、今回さくらからXserverに移転するに当たって、行った手順は以下になります。

①あらかじめXserverにWordPressをインストール。

②プラグインAll-in-One WP Migrationでバックアップをエクスポートし、Xserver側にインポート。

③お名前.comでshibuya-pp.comのDNSを書き換える。

④Xserver側でSSL化

無事完了して安心したのもつかの間、上記のトラブルが起きました。

原因究明と解決策

まず、サイトをリロードしたときに、Chromeのコンソールで403エラーが鬼のようにたくさん出ていることに気付きました。具体的なファイルはwp-admin、wp-includesの配下にあるCSS、JavaScript、画像ファイルに関してです。旧サーバーと見比べて、ファイル内容に差異は無かったのですが、パーミッション(属性)が違うことに気付きました。問題のあるファイルに関して、旧サーバーで745のものが、新サーバーでは711になっていました。とりあえず、地道な作業ですが、コンソールでエラーが出ている全てのファイルのパーミッションを745に書き換えていきました。するとリロードする度にエラーが減っていきます。そして、やっていくうちに、みるみる症状が改善されていきました。メディアライブラリが表示され、投稿画面のレイアウト崩れが直り、最後にログイン画面のレイアウト崩れも直りました。

まとめ:今回の原因はパーミッションだった

All-in-One WP Migrationは、WordPressサイト全体を簡単に移行してくれますが、私の場合では、パーミッション(属性)がだいぶ変わってしまっていました。必ず同じ現象が起きるかは、私には分からないのですが、今回はそれに気づき、地道にパーミッションを書き換えることによって、問題が解決しました。このプラグインに限らず、WordPressのレイアウトが崩れたり、管理画面のボタンが効かなくなってしまった方は、まずは、コンソールを確認して、403エラーが出ていないかを確認しましょう。そして、もし403エラー出ていたら、1つの策としてパーミッション設定を確認してみてはいかがでしょうか?サイト崩れは、特にCSSやJavaScriptがちゃんと読み込めていない場合が多いと思います。

著者:TOPI

TOPI

2010年頃からYOUTUBEとニコニコ動画を開始。
パソコンやスマホやIT機器について色々解説する。
チャンネルを作っては消し、作っては消し、
しばらくの休養を経て現在に至る。
関連する記事