httpsの環境にて、WordPressのサイトのcssなどがパスがhttpで読み込こまれてしまいます。

Question

httpsの環境にて、WordPressのサイトのcssなどがパスがhttpで読み込こまれてしまいます。
パスをhttpsで読み込まれるように修正したいのですが、
解決策がわかららず、ご教示いただきたくお願いいたします。

https://example.jp/recruit/

header.phpにてcssを以下の記述で読み込んでいるのですが、
実際に書き出されたサイトのソースを確認すると、httpから始まるパスになってしまいcssが当たっていない状況です。

<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/resources/css/style.css">

<link rel="stylesheet" href="http://example.jp/recruit/wp-content/themes/recruit/resources/css/style.css">

コンソールにはMixed Content:のエラーが出ているので、混合コンテンツになっている為だと思われますが、
こちらの解決策がわからずご教示お願いいたします。
クロームではアドレスバーに「保護されてない通信」とでております。

宜しくお願いいたします。

Comments

[SHOMI]

これですかね？
https://teratail.com/questions/22069

[m_a_u_v_e]

ご回答誠にありがとうございます。
こちらの記事はサクラサーバーのようでして、今回問題が出ているのではamazonのServerになりますので、
違うように思われます。

Answer 1

サーバ構成によってパスがhttpになることがあるようでした。
設定ファイル wp-config.php に $_SERVER['HTTPS'] = 'on'; を追加することで解決しました。
但し、 wp-settings.php が読み込まれる前に書く必要があるようです。

Comments

[CHERRY]

補足として、リファレンスの追記
とSSL化の方法を確認ですが...

> サーバ構成によってパスがhttpになることがあるようでした。

AWS をお使いと記載されていますが、 SSL 証明書はどのように設定しているでしょうか？

- ALB や ELB に設定されていますか？
- それとも EC2 に直接 SSL 証明書をセットアップされていますか？

解決方法からの推測だとロードバランサに SSL 証明書を設定して、HTTPS化してお使いなのだと思われますが、正しいでしょうか。

ロードバランサ ( ALB / ELB ) を使っている場合は、ロードバランサ -> EC2 側は、HTTP で接続されることになるので、WordPress は、HTTP と誤認識します。

ロードバランサを使っている場合は、WordPress リファレンスの is_ssl() https://developer.wordpress.org/reference/functions/is_ssl/ にあるように wp-config.php にコードを追記する必要があります。

[m_a_u_v_e]

ご教示誠にありがとうございます。
間接的にまた詳しく確認ができない状況でありまして、、
ロードバランサーを利用しているということは確認ができました。
EC2側は、HTTPで接続されることになるので、
WordPressは、HTTPと認識したということですね。
ありがとうございます。

Answer 2

もともと「http」でWordPressをインストールし、途中から「https」に変更したのであれば、URLを置換する必要があります。

WordPressの移管で非常にメジャーなツールとして「Search Replace DB」があります。聞いたことがないのであればこの機会に見てみてください。(DB内で置換するだけでは不足だそうです。)

参考URL:
https://wheelchair-coder.com/281/

Comments

[m_a_u_v_e]

ご回答誠にありがとうございます。
もともとhttpの環境で構築していて、本番がhttpsなのでデータベースの書き換えは「Search Replace DB」にて対応済みですので、別の問題があるようです。

[new1ro]

そうなのですね、ご教示ありがとうございます！

「http://example.com/」で置換した場合、
「http://example.com」を取りこぼすので
末尾に「/」があったか否か不明確なら、「http://example.com」を試してみてください。

(おそらく、そのあたりもきちんとやっていそうに思えますが..、念のため)

[m_a_u_v_e]

ご教示ありがとうございます。
末尾のスラッシュはなしで置換しました。
また問題が起きているのはheader.phpのテンプレートの方なのです。