WordPressで管理画面のレイアウトが崩れた時の解決方法

WordPressのダッシュボード、管理画面のレイアウトが崩れる時の解決方法 ネットやパソコンについての勉強メモ

Cocoonをバージョン 2.6.4にアップデートして

WordPressを6.3にアップデートして

その後、何度かの更新を経てCocoonをバージョン 2.6.4.4に更新して

ワードプレスは特に問題なく動作していたのですが、何の前触れもなく突然

WordPressのダッシュボード、管理画面のレイアウトが崩れました。

白い背景に、メニューが青文字のテキストリンクで表示される状態です。

ダッシュボード自体はいつも通り表示されていたのですが、投稿一覧や外観、テーマなど

ダッシュボードメニューの先に進むと、レイアウトが崩れたページになってしまう状態でしたが

ダッシュボードのみ通常通り表示されていたのはブラウザキャッシュが残っていたからだと思います。ダッシュボードすらレイアウトが崩れると、何もできなくなる、できたとしても一つ一つの動作が至難になると思ったので、WordPressにログインしているブラウザのCookieの削除は行わず、

私のサイトのキャッシュがない別のブラウザで自分のワードプレスにログインしたところ、ダッシュボードすらテキストリンクのみのレイアウトが崩れたページになっていました。

ワードプレスの更新後もテーマであるコクーンの更新後も、アップデートした後に普通に問題なく動いていたのに突然レイアウトが崩れてページを何度読み込み直しても変わらず、これといった心当たりがなくてどうしたらいいのか見当もつかなくて困りました。

結果的には解決できたので、私が試してみた事と、解決に至った対処方法を書きます。

スポンサーリンク

WordPressのダッシュボードが壊れた、管理画面のレイアウトが崩れたことを解決するために試したこと

今までこうなったことは一度もなかったのに、突然ダッシュボードや、投稿一覧などダッシュボードメニューから進んだ先のページが大量のテキストリンクで表示されるようになってしまい、何が原因なのかわからなくて色々試しました。

検索しようにもなんていう言葉で検索すればいいのかわからない。

意外と、同じ状況の人を私はあまり見つけられませんでした。

WordPress6.3へのアップデートが原因なのかなと思ったので「WordPress6.3 不具合」などの言葉で検索してみたのですが、更新により私と同じ状態に悩まされている人を私は見つけることができませんでした。

そして自分で考えて、あれこれ試しました。試してみたことを以下に書きます。

WordPress管理画面のレイアウトが崩れる不具合を解決すべくブラウザのキャッシュ削除を試してみた

WordPressやレンタルサーバーで設定する自分のサイトのブラウザキャッシュではなくて、ブラウザの機能でCookieなどが保存されているキャッシュを削除します。たいていのブラウザでは設定を開けばCookieの削除、キャッシュの削除、履歴の削除、サイトデータの削除など、ブラウザのキャッシュを削除する項目があります。

ブラウザのキャッシュの機能によってかろうじてダッシュボードのトップページのみは通常通り表示されていて、ログインしているブラウザのキャッシュを削除してしまったらダッシュボードすらレイアウトが壊れてしまうと思ったので、自分のサイトにログインしたことがない他のブラウザやプライベートブラウズから自分のサイトにログインしました。私のサイトのキャッシュがないブラウザからログインしてもダッシュボードのレイアウトが壊れていたので、ブラウザのキャッシュの削除は私の環境においては無意味だと思いました。

これで直る人、解決する人もいるのかもしれないので、今ワードプレスをログインしているブラウザ以外のブラウザ、又はプライベートブラウズでログインすれば簡単で、あまりリスクもないので試してみる価値はあると思います。

ワードプレス管理画面のレイアウトが壊れる不具合を解決すべくCocoonのバージョンをダウングレードしてみた

ワードプレスのレイアウトが壊れる直前に何をしたか思い出すとCocoonを更新してバージョンアップしたことくらいしか思いつかなかったので、CocoonのHPから以前のバージョンをダウンロードして、本来はWordPress内からダウングレードできるのですが、レイアウトが崩れて、

WordPress、ワードプレスのダッシュボード、管理画面のレイアウトが崩れて記事投稿などの操作をすることが難しい時の解決方法、対処方法

テキストが何重にも重なって、メニューのリンクが効いたり利かなかったりして、この現状でワードプレス内でCocoonの旧バージョンをアップロードするのは「絶対に無理というわけではないけど難しい」という状態だったので、サーバーから上書きインストールでダウングレードしました。WordPress内でのテーマのアップロードが難しい場合はFTP経由でダウングレードするという方法があります。

Cocoonのバージョンダウングレード方法については「Cocoon ダウングレード」などでインターネット検索をしてCocoon作者様のHPに詳しく説明がありました。

コクーンのバージョンをダウングレードしましたが、WordPressのダッシュボードのレイアウトが崩れる不具合は改善されませんでした。今回の不具合に関してワードプレスのテーマ、Cocoonは全く関係なかったと思います。

WordPressダッシュボードのレイアウトが崩れた不具合を解決すべくPHPのバージョンを変更してみた

PHPのバージョンは最新です。私はエックスサーバーを利用していて、エックスサーバーの場合、最新より2つ前くらいのものに(推奨)とついていて、以前は推奨に設定していたのですが、先日のWordPress6.3へのアップデート後に503エラーが出た件で、PHPバージョンを推奨のついていない一番新しいものにしていたので

WordPressのアップデート後、更新後の503エラー解決方法
WordPressのアップデート後に503エラーが出て管理画面のダッシュボードを表示できなくなり、私のサイトにもアクセスできなくなりました。解決することができたので解決方法を書きました。ワードプレス更新後の503エラーの対処方法です。

PHPのバージョンを2つくらい下げて、エックスサーバーではこれが推奨とされているものに変更してみました。しかし、相変わらずレイアウトは乱れていて何も変化がないのでPHPのバージョンはまた最新のものに戻しておきました。

WordPressダッシュボードのレイアウトが崩れても自分のサイト、ブログは問題なく表示されていた

ワードプレスのダッシュボードやメニューに進んだ先が全部青文字のテキストリンクになってしまいレイアウトが崩れる不具合に見舞われて

これではどうにも記事を書いていける状態ではないので

不具合を改善したくて試行錯誤をして、どれもうまくいかないことを繰り返したのですが

唯一、自分のブログは何も問題なく正しく表示されていて、サイトの閲覧には影響が及ばなかったため、私の中での深刻度は低く、又エラーが起きたのは普段あまり書いていないブログだったこともあって、気長に思いついた可能性を試していました。

そして最後に、解決できる対処方法にたどり着きました。

WordPressの管理画面やダッシュボードのレイアウトが崩れることを解決できた方法

私はエックスサーバーを使用しているので

エックスサーバーのサーバーパネルにログインして

サーバーキャッシュをOFFにした後に

XアクセラレータもOFFにしました。

私はエックスアクセラレーターのXアクセラレータ Ver.2を使用していましたが

不具合が改善されたら後ほどONに戻すのでXアクセラレータをオフにしました。

その後、パソコンのキーボードのF5を押してみたり、アクセスし直したり、ブラウザの更新ボタンを押したりして何度リロードして読み込み直しても改善されなかったWordPressの管理画面のレイアウトが崩れて白い背景に青文字のテキストリンクになってしまう不具合が改善されて

いつものワードプレスの画面に戻っていました。

ワードプレスの管理画面のレイアウトが崩れる不具合の解決方法は

サーバーキャッシュの類を全てOFFにすることです。

WordPressのダッシュボードのレイアウトが崩れる不具合が直った後は

サーバーキャッシュとXアクセラレータ Ver.2を再びONにしても

不具合なく利用できています。

他のサーバーを利用している場合もサーバーキャッシュの類を全てオフにすることを試してみると良いかもしれません。

その後の続きがあるので以下に書きます。

WordPressに再びレイアウトが崩れる不具合が起きてXアクセラレータ Ver.1に変更した

※2023年8月17日追記です。

この記事は2023年8月14日に初投稿しました。その後また不具合が起きたので対処方法も含めて今から追記します。

サーバーキャッシュの類を全て、一度OFFにしてからONにするというただスイッチを入れ直す、OFFとONを設定し直すだけで、その時はWordPress管理画面のレイアウトが崩れる不具合は直り、解決しました。しかし半日~1日くらい経つと、またダッシュボードから記事投稿に進んだ時に壊れたレイアウトで表示されるなど、レイアウトが崩れるエラーが発生しました。

どうやら「PHPプログラムの高速化」を含むキャッシュを使用することによって、この不具合が起きているようです。

私はエックスサーバーを使用しているので、サーバーのキャッシュ類であるXアクセラレータ Ver.2をXアクセラレータ Ver.1に変更することによって、ワードプレスのダッシュボードのレイアウトが崩れる不具合を解決しました。

サーバーのキャッシュ類を全てOFFにして、1~2分程度待ってから、不具合が改善されたことを確認したら、すぐにまたXアクセラレータVer.2も含めて全てのキャッシュ類をONにしても一時的には解決するのですが、そこから半日~1日程度経過すると、また明日も明日も同じ不具合が再発するので、その都度、サーバーのキャッシュ類をOFFにしてからONに設定し直すことは手間に感じて

XアクセラレータVer.2をXアクセラレータVer.1に変更したまま、XアクセラレータVer.1に設定して使い続けることにしました。

XアクセラレータVer.2のキャッシュにはPHPに関するものも含まれますが、XアクセラレータVer.1にはPHPに関するものは含まれないため、XアクセラレータVer.1を使用することがレイアウトが崩れる不具合への対処方法となりました。(XアクセラレータをOFFにしてもいいのなら、OFFにすることでも解決できます。)

エックスサーバー以外のサーバーを利用している方も、PHPを含むキャッシュをOFFにすることが解決策へとつながるかもしれません。

WordPress管理画面のレイアウトが乱れる問題についてまた何かあったら、この下に追記します。

何も追記がなければ、これ以降レイアウトの不具合は起きていません。

何もせず放置してもワードプレスのレイアウトが崩れる不具合が改善した

※2023年10月29日追記です。

エックスサーバーのキャッシュの機能でXアクセラレータVer.1にすればワードプレスの管理画面、ダッシュボードなどのレイアウトが崩れる不具合は起きなくなったのですが

  • XアクセラレータVer.2と比べたらXアクセラレータVer.1は表示速度が遅く感じる
  • 管理画面のレイアウトが崩れるのみで第三者がサイトを閲覧することには問題がない

という理由から、XアクセラレータVer.2に戻しました。

そしてやはりしばらくすると、私が所持するブログのうちの一つにログインした管理画面でのレイアウト崩れが起きました。

しかし、そのブログは更新頻度も低く、自分のサイトにログインして投稿するなど管理画面としては不便だけど、https://サイトURLにアクセスして第三者に閲覧していただく分には何の不具合もなく、レイアウト崩れは管理画面のみの問題として起きていました。

そこでふと「レイアウト崩れが起きたブログを、そのまま放置していたら何もしなくてもそのうち勝手に直っていたりしないのかな?」と思いついて、それを検証すべく何もしないで放置してみました。

その結果、数日という少し長い時間、レイアウト崩れが続いていましたが1週間もすればレイアウト崩れが勝手に直っていて元の正常のダッシュボードメニューが表示されていました。

Xアクセラレータによるキャッシュは自動的に更新されるので、更新された時にサーバー側のキャッシュとテーマやプラグインなど何かとの相性が合わなかったり何かがうまくいかなくてレイアウトが崩れたり、その後、自動的にサーバー側のキャッシュが更新されることによって、また正常に表示できるようになったりしているのかもしれません。

ブログを頻繁に更新している場合は不便なのでサーバー側のPHP関連を含むキャッシュをオフにするなどして今すぐ対処したほうがいいかもしれないけど、ブログの表示には差し支えないので記事の投稿やブログの更新が頻繁ではない場合は放置するのも一つの方法かもしれません。

私が所持するブログをAとBとCとEとDだとして、Cにレイアウト崩れが起きて放置したら直っていたけど、今度はDにレイアウト崩れが起きていたけど放置したら何もしなくても直っていたというような感じです。

今はXアクセラレータVer.2を使用しています。503エラーが出た時だけ、第三者が見た時にもサイトが表示されないので、その時は一時的にXアクセラレータVer.1にして、数日経過してからVer.2にしても503エラーが出ないことを確認して、またXアクセラレータVer.2に戻しています。

コメント

タイトルとURLをコピーしました