WordPress管理画面のレイアウトくずれ発生とその対策

スマホで見たときのWordPressの管理画面がある日突然崩れるという現象に見舞われたものの、対策を施し正常な状態に戻すことができましたので、今後同じようなことが起きたときにすぐに対処できるように備忘録的にその対処法を書いておきたいと思います。

f:id:billiex:20180713120828p:plain

 

ある日突然WordPressの管理画面の表示がおかしくなる

先日、サーバー管理会社からPHPとApacheのバージョンアップ完了のお知らせメールが来ていました。事前にバージョンアップの予告がありましたのでバージョンアップのことはわかっていたのですが朝、いつものようにスマホで管理画面を開くとレイアウトが崩れていました。

f:id:billiex:20180713120950p:plain

↑レイアウトが崩れた管理画面

↓こちらが正常な管理画面

f:id:billiex:20180722172101p:plain

 

テキストの編集はできるが写真をアップロードできない

最初はブラウザのせいで崩れたものと思い、普段使っているBoatBrowserからGoogleChromeに切り替えてみましたが、Chromeで見ても同様に崩れていました。ちなみにPCではちゃんと表示されます。

次に端末の不具合を疑って、以前使用していた端末で管理画面に入ってみましたが、同じようにレイアウトは崩れていました。

この状態でも編集できなくはないのでそのまま放置しようかとも思いましたが、レイアウトの崩れた管理画面は非常に使いづらく実用に耐えないものでした。

まとまった時間が取れるときはPCでブログを書くのでよいのですが、細切れの空き時間を利用してスマホでも書いていましたので、このままでは非常に不便で困ります。

WordPressのアプリを入れれば、スマホでもアプリ経由でブログの編集ができることがわかり、とりあえずアプリを入れてみました。どうも勝手が違い慣れるまで時間がかかりそうでしたが、とりあえず編集できるようになったからまあいいかと一度は妥協しました。

しかし、管理画面から写真をアップロードできなくなっていることが発覚し(レイアウトが崩れていないPCでもダメ)、このままではイカンと思い重い腰を上げていよいよ対策に乗り出しました。

 

サーバー管理会社へ連絡

まずはサーバー管理会社のサポートに連絡しました。こういうお返事をいただきました。

サイト表示につきまして調査をしておりましたところ http://nyannyao.net/memo/wordpress-memo/entry258.html http://blog.mizoshiri.com/archives/3975
にあるように、プログラムの修正により解消されることがあるかもしれないことがわかりました。 お手数とは存じますがご確認いただけますでしょうか。

で、とりあえず案内に従い上記のリンク先を覗いてみましたが….htaccess?PHP?CGI?CSS? ちょっと何言ってるかわかんないです(^^; 管理画面が崩れるのはCSSが読み込まれていないためで、.htacsessファイルに必要なコードを書き込みばいいらしいということはかろうじて理解できましたが、コードの書き方すらわからない私にはかなりハードルの高い内容でした。

4年前に5インチ中華タブの原動N50を買って、悪戦苦闘しながらrootとったりファームウェアを更新したりして遊んでいたこともあり、自力で解決することは嫌いではないので時間があれば調べながら自力でなんとかしたいのですが、今回はすぐにでも直さないと困る状況でしたのですかさずサーバ管理会社のサポートに具体的な対処方法を聞くことにしました。

すると、

/home/○○○○/public_html/nahema.net/.htaccess に以下の 記述を行っていただけますでしょうか。
【記述内容】
PHP_value default_charset none
PHP_value output_handler none

という指示をいただき、さっそく上記コードを書き加える作業に入りました。

コードを書き加える方法はサーバ管理会社のサイトに「.htaccessの設置方法」というマニュアルがありましたので、それを参考にしました。

まずFFFTPというFTPソフトを使ってFTPサーバに接続してメモ帳で.htaccessファイルを開きます。

f:id:billiex:20180713122111p:plain

 

.htaccessファイル内の一番上に、

PHP_value default_charset none
PHP_value output_handler none

↑この2行をコピペしてから適当に名前をつけてPC内に一旦保存。わたしは「htaccess.text」という名前で保存しました。

f:id:billiex:20180713122639p:plain

 

保存したファイルを先ほどの.htaccessファイルがある場所にアップロードします。

f:id:billiex:20180713122705p:plain

アップロードしたファイルの名前を「.htaccess」に変更すると無事に.htaccessファイルが上書きされて作業終了です。

その後おそるおそるスマホでWordPressの管理画面を見てみたら、無事にもとどおりのレイアウトになっていました。

よかったー\(^o^)/