管理画面にログインする画面が化けてしまった(汗

この記事を読む およそ時間 < 1

管理画面にログインする画面が化けてしまった(汗

この現象数ヶ月前から知ってはいたけど、いつかなおせばいいかなって感じで、放置してたのですが、いよいよ重い腰を上げる事にしました。といっても、結局確定申告をするのが嫌で、目が違う方を向いただけで、それがなければ、まだやってなかったでしょうね。

原因を考えて見る

色々考えられるけど、結局の所CSSが当たってないんだろうな?ってのは、容易に想像がつく話ではあるのだが、それが何故?問われるとこっちも困るって事で、想定される原因を探ってみる。

  • モジュールのアップデートなどで不具合がある場合
  • フレームワークを更新せず、モジュールをアップデートした場合
  • 表示高速化の為、キャッシュモジュールをいれているのだが、それのCSSマージなどが悪さをしている場合

まあ、この辺りだと思われる。考えたくないけど、脆弱性を突かれて突入されていて、不正な改造をされている場合もまあまあ、あるかなって気がする。過去2万通のメールを送ってしまった事例も目の当たりにしているだけの!ただ、今回はそういうのはなさそう。リソースも毎日確認しているし、トラフィックもアクセス相当のトラフィックを維持しているといった所からの判断である。

上記、とりあえず辺りをつけて、全てのモジュールをいったんOFFにしてみる。
結果は、何も変わらずorg 色々みたけど、やっぱりなんだか分からない・・・。

負けた感が半端ないので、力でねじ伏せる作戦に出る。
ログインだけのCSSを別途設定して、強制的にカスタマイズしたCSSを当てる暴挙にでたw
トップのファンクションに、使用しているテーマのディレクトリにログイン用のCSSを配置して、それを読み込ませる作戦。

wp-includes/functions.php

function login_logo() {
echo ‘<link rel=”stylesheet” type=”text/css” href=”‘.get_bloginfo(‘template_directory’).’/login.css” />’;
}
add_action(‘login_head’, ‘login_logo’);

wp-content/themes/使用テーマ/login.css

これに、適当なCSSを作成して当てる。そうすると、CSSの微調整はまだまだで若干崩れていますが、それなりに出るようになりました。

ただ、これを修復するために、動いているサーバからホットでスナップショットをとって、別インスタンス立てて修正した感じですが、メインの方に同じ実装をしたら同じ挙動にならず・・・。結局、色々やってたらDBが壊れて締まったようで、サーバ毎replaceをしました。DNSを昨日の夜中にレコードを変更して、この後アクセスみて、何も来てないようならインスタンスを削除して終わりにします。

全く、たまにこういうことがあるんですよねぇ。何故か、同じ事をやっても同じ状況にならないんですよ。1日前のインスタンスから戻したので若干アクセスカウンターが200~300の間でしょうけど、戻っちゃってます。まあ、誤差の範囲なので、仕方が無いです。

そのうち、このログイン画面ももう少しちゃんとCSSを調整して枠とがちゃんとしたいと思います。Wordpressの画像は、別のに差し替える予定で今は出してません。

2020/05/04 追記

WordPressのフレームワークを最新化したら、また同じ状況になったので、コロナだし、気合いを入れて調べて見ました。
原因は、分かった。そして、対策も講じた。そして、ちゃんと出るようになった。これは、筆者のサーバ設定に起因する原因で、そのような対策をしてないWordpressはきっと発生しない。CONTENTSタイプがtext/css が普通だが、何故か管理画面のページだけ、text/htmlで認識されていて、CSSだとは思ってもらえなかった用です。上記CONTENTSを出しているCSSは3つあって、それらのCSSが読み込まれなかった為に、フォームが崩れて表示されていた用です。nginxで強制的にCSSはtext/cssで返すように設定をいれて、完了にしました。

Related posts