サーバー移転で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がちゃんと読み込めていない場合が多いと思います。