WordPressの表示崩れ、自分で直す前に確認したい5つのポイント

ある日サイトを開いたら、レイアウトがばらばらになっていた。文字が重なっている、画像が消えている、スマホだけ崩れている。WordPressで自社サイトを運用していると、こうした表示崩れに出会うことがあります。

慌ててしまいがちですが、原因を順番に切り分けていけば、ご自身で解決できるケースも少なくありません。この記事では、作業に入る前に確認したい5つのポイントと、自分で直す前の注意点をまとめました。

表示崩れが起きたらまず確認したいこと

■どのページ・どの端末で崩れているかを確認する

最初に、崩れている「範囲」を確かめます。

・サイト全体が崩れているのか、特定のページだけなのか

・PCとスマホのどちらで崩れているのか、両方なのか

・別のブラウザ（Chrome、Safari、Edgeなど）でも同じように崩れるのか

全ページで崩れていればテーマやサーバー側、特定のページだけなら記事の中身や個別の設定、特定のブラウザだけなら表示の読み込み側に原因がある可能性が高くなります。範囲が分かるだけで、調べる場所はかなり絞り込めます。

■直前に行った作業を書き出す

表示崩れの多くは、何かを変えた直後に起こります。プラグインやテーマの更新、設定の変更、記事の編集、ウィジェットの追加など、崩れる前に行った作業を思い出せる範囲でメモしておきましょう。自動更新を有効にしている場合は、知らないうちに更新されていることもあります。「いつから崩れているか」と合わせて記録しておくと、原因を探すときの大きな手がかりになります。

自分でできる5つの確認ポイント

■キャッシュが原因かどうかを確認する

実際にはサイトが正しく直っているのに、古いデータが表示されているだけ、というケースがあります。次の2つを順に試してみてください。

①ブラウザのキャッシュを削除して再表示する

WindowsならCtrl+F5、MacならCommand+Shift+Rで、キャッシュを使わずにページを読み込み直せます。シークレットウィンドウ（プライベートブラウズ）で開いてみるのも手軽な方法です。これで正しく表示されれば、サイト自体には問題がありません。

②キャッシュ系プラグインやサーバーキャッシュを削除する

キャッシュ用のプラグインや、レンタルサーバーのキャッシュ機能を使っている場合は、管理画面からキャッシュを削除してから再度確認します。CSSを変更したのに反映されない、という相談の多くはこのパターンです。

■最近の変更が原因かどうかを確認する

キャッシュで解決しない場合は、直前の変更点を1つずつ確かめていきます。

③プラグイン・テーマの更新履歴を確認する

直前に更新したプラグインがあれば、1つずつ停止して表示が戻るかを確認します。停止して直ったものが原因の候補です。ただし、管理画面に入れない状態のときは、サーバー上のファイル操作が必要になるため、慣れていない方は無理をしないほうが安全です。

④追加CSSやテーマファイルの編集内容を確認する

カスタマイザーの「追加CSS」や子テーマのファイルを編集した直後に崩れた場合は、その変更が原因かもしれません。編集前の内容に戻して表示を確認してみましょう。変更前のコードを残していない場合に備えて、編集の前にはコピーを取っておく習慣が役立ちます。

⑤PHPバージョンやサーバー設定の変更を確認する

レンタルサーバー側でPHPのバージョンが切り替わると、古いテーマやプラグインがうまく動かなくなり、表示や動作に影響が出ることがあります。サーバーの管理画面やお知らせメールで、最近変更がなかったかを確認してください。

自分で直す前に注意したいこと

■作業前にバックアップを取っておく

原因が分かっても、すぐに修正を始めるのは少し待ってください。WordPressのデータは「ファイル」と「データベース」の2つに分かれていて、両方を保存しておかないと元の状態に戻せません。バックアップ用のプラグインや、レンタルサーバーに用意されているバックアップ機能を使えば、比較的簡単に保存できます。万一のときに戻れる場所を作ってから作業することが、被害を広げないための大切な備えです。

■本番サイトで試さず、難しいときは早めに相談する

公開中のサイトで試行錯誤を続けると、別の不具合を呼び込んでしまうことがあります。特に、ファイルを直接書き換える作業や、データベースに触れる作業は慎重さが必要です。原因の見当がつかないときや、作業に不安を感じたときは、専門家に任せるのも立派な判断です。時間をかけて悩むより、早めに相談したほうが結果的に早く元に戻ることもあります。

まとめ

表示崩れが起きたときは、次の順番で確認すると原因を絞り込みやすくなります。

・崩れている範囲（ページ・端末・ブラウザ）を確認する

・直前に行った作業を書き出す

・キャッシュ、プラグインやテーマ、追加CSS、PHPバージョンの順に確かめる

・修正の前にバックアップを取る

それでも原因が分からない場合や、作業に不安がある場合は、ココナラの「WordPress・ECサイトを修正します」でご相談ください。サイトのURLと、どこがどう崩れているかを教えていただければ、原因の調査から一緒に進めます。

▶ WordPress・ECサイトを修正します