仮想環境(virtualbox)の中でwordpressを動かし、それを外部公開する時に起きたwordpressのレイアウトのトラブルについて

Question

virtualboxでlamp環境を準備し、サーバーもデータベースも動くようにしてから、
wordpressを入れたのですが、
仮想環境をポートフォワーディングでホストポートも設定してから、ngrokを使って公開設定をし、アクセスをすると、このようにwordpressのレイアウトが崩れてしまい、その上ログインする事も出来ません。この場合どのようにすればよろしいでしょうか

環境は
Host-OS : macOS mojave 10.14.1
Guest-OS : Ubuntu 18.04
wordpress 4.9.8
Apache2 2.4.29
mysql ver14.14
php 7.2
です。

Comments

[CHERRY]

CSS か JavaScript の読み込みに失敗しているように見えます。 Web サーバーのログやWebブラウザの開発者ツールのコンソールにメッセージは、出ていないでしょうか？

Answer 1

あぁ、 ngrok 使っているのですね。

ngrok で、SSL 化した WordPress TOP ページを https://〜 でアクセスしている状態でしょうか。

おそらく WordPress の CSS や JavaScript のリンクが、http://〜 となっていて、 Webブラウザに 混合(混在)コンテンツ と解釈されて CSS や JavaScript が、読み込まれていないのではないでしょうか。

「質問への追記・修正の依頼」にも書きましたが、「Webブラウザの開発者ツールのコンソール」に 混合コンテンツの防止 に記載されているようなメッセージが出ていないでしょうか？

参考：

• 混合コンテンツの防止
• 混在コンテンツ - MDN Web docs

---

対応方法ですが、https を使うのであれば、https に統一するようにしてください。