こんにちは、webエンジニアのゾノ( @ozonosho )です。
今回はWordPressエラー復旧サービスの作業ログになります。
症状：画像やデザインが表示されず、テキストが並ぶだけのページになる
今回起きていたトラブルは『ページ内の画像やデザインが表示されない』というものでした。
各ページにアクセスすることはできますが、画像や動画、デザイン（＝CSS）が反映されず、どのページを開いてもデザイン無しのテキストが縦にずらーっと並んでしまっていました。昔のHTMLだけのサイトのような状態です。
原因
今回はWordPress管理画面「一般設定」で下記２つの条件を満たした場合にのみ起こる、かなりレアなケースでした。
- ２つの条件
-
- 「WordPressアドレス」と「サイトアドレス」に異なるドメインを設定している
- 「サイトアドレス」のドメインはSSL対応しているが「WordPressアドレス」のドメインはSSL対応していない
僕もはじめて知りましたが、WordPressアドレス側のデータを読み込む場合「サイトアドレス」の設定に合わせてhttpかhttpsを判断するみたいです。
具体例を見てみましょう。
- 例
-
WordPressアドレス：http://aaa.com（SSL対応していない）
サイトアドレス：https://bbb.com（SSL対応している）
↓↓↓
サイト内でaaa.comの画像を読み込む際に「https://aaa.com/{画像のパス}」のURLから読み込んでしまう！
上記の例だとaaa.comはSSL対応していないのにhttpsで画像が読み込まれるので、当然ながら画像を取得できず、サイトに画像が表示されないという結果になりました。
うーん、こんな特殊な条件が重なること自体珍しいのでこの仕様は知らない人が多い気がします。
解決方法
今回は不具合ではなく「WordPressアドレス」に設定しているドメインがSSL対応していないことが原因のため、SSL対応すれば解決します。
「サイトアドレス」に設定しているドメインもSSL対応しないでどちらもhttp形式にすることでこの症状を防ぐこともできますが、SSL対応していないドメインはChromeで警告が表示されたりセキュリティに宜しくなかったりと別の問題が発生します。
そのためSSL対応する方針で解決したほうが長期的に良いでしょう。
