WordPress の表示が崩れる・画像や CSS が読み込めないとき
このグループの不具合は、ページ本体が正常(HTTP 200)で返っています。壊れているのはページの中で読み込む CSS・JS・画像のほうです。
見えている症状から選ぶ
| 見えているもの | まず疑う |
|---|---|
| CSS が効かない / JS が動かない | アセットが 404 か 403 |
| 画像が表示されない(アップロードは成功) | 404 か 403 か、URL が違うか |
| スマホだけレイアウトが崩れる | キャッシュ。サーバーは同じ HTML を返している |
| SSL 化したら画像・CSS が読み込めない | 混在コンテンツ |
| 投稿だけ 404(トップは出る) | .htaccess が無い・効いていない |
| ブロックエディターが真っ白 | エディタの JS が読めていないか REST が止まっている |
| 管理画面だけ表示が崩れる | load-styles.php / load-scripts.php |
直前にやった操作から探す場合は 直前にやったことから引く へ。
このテーマの記事
- WordPressでCSSが効かない・JavaScriptが動かない時の対処法WordPressでCSSが効かない・デザインが崩れる・JavaScriptが動かない時の対処法。まず読み込まれているかを確認する。存在しないCSSは404でも20KBのHTMLが返るため転送量では判断できない実測。
- WordPressで画像が表示されない時の対処法(アップロードは成功している)アップロードは成功したのに画像が表示されない・壊れたアイコンになる時の対処法。404か403かで原因が割れる(ファイル欠け/権限)。メディアライブラリに並んでいても実ファイルが無いことがある実測。
- WordPressでスマホだけレイアウトが崩れる時の対処法PCでは正常なのにスマホだけレイアウトが崩れる時の対処法。まずサーバーが同じHTMLを返しているかを確認すると原因が半分に絞れる。キャッシュがPC版を返す、viewport欠落、横スクロールの犯人の探し方を実測。
- SSL化したら画像・CSSが表示されない(混在コンテンツ)の対処法SSL化(https化)したら画像やCSSが読み込めない・鍵マークに警告が出る時の対処法。原因は混在コンテンツ。DB内のhttp://の検出と置換手順、guidを除外する理由、wp-config.phpの定数の落とし穴を実測。
- WordPressで投稿・記事だけ404になる時の対処法(トップは表示される)トップページは表示されるのに投稿・固定ページ・カテゴリだけ404になる時の対処法。「パーマリンクを保存し直す」が実際に何をしているか(.htaccessの再生成)、書き込めない場合に成功表示でも直らない罠を実測。
- WordPressのブロックエディターが真っ白・使えない時の対処法投稿・固定ページの編集画面(ブロックエディター/Gutenberg)が真っ白で使えない時の対処法。REST APIとJavaScriptの読み込みが原因。ログイン不要で外から確認できる方法を実測で解説。
- WordPressの管理画面だけ表示が崩れる時の直し方WordPressの管理画面だけレイアウトが崩れる・CSSが効かない時の対処法。load-styles.php / load-scripts.php が通っているかを確認するだけで原因が絞れる。セキュリティ設定やキャッシュが原因のケースを実測。