wordpressで作成したウェブサイトをSSL化したら吐き出されるCSSのアドレスがhttpsにならない



今日も、Tomologをご覧いただきありがとうございます。

勤めている会社のウェブサイトの制作と管理(更新)も全て任せられていて、先日、共有SSL化をしました。
共有SSL化を行なった原因で、wordpressのCSSのパスがhttpで吐き出される問題がでました。

今後のため、備忘録もかねて記載します。(ご参考までに)

wordpressで作成したウェブサイトを共通SSLでSSL化に

問題は、次のとおり

  1. ホームに設定しているページについてはcssが反映されており、崩れてはいない。
  2. 下層ページのcssのパスがhttpsではなく、httpで出力されている状態になっている。

プラグイン「WP HTTP Compression」を使用する方法もありますが、プラグインにあまり頼りすぎるのも怖いので、function.phpの書き換えを行う方法で対応をしました。

ちなみに、会社で使用しているサーバーは「さくらのレンタルサーバ」で、独自ドメインで共有SSL化をすると問題が起きることがわかりました。
さくらインターネットでは、2015年から共有サーバにおける独自SSLが利用可能になりました。

今回、会社のウェブサイトをSSL化に踏み切った理由は、もちろんgoogle検索対策。

引用:SSL利用時の注意点(さくらのサポート情報)

「さくらのレンタルサーバ」にて提供しているウェブサーバApacheは、80番ポートを使用する(HTTP)ものと、443番ポートを使用する(HTTP)ものとの2種類に分けられます。また、後者についてはプロクシとして動作します。一般的に、前者は「http://」、後者は「https://」という形式でアクセスしますが、同じディレクトリへのアクセスであっても、その際に呼び出されるウェブサーバが異なると、CGIプログラムやウェブサーバが.htaccessなどのファイルを読み込む際、挙動に違いが生じます。
例えば、HTTPとしてアクセスした場合はお手元のコンピュータが、HTTPSとしてアクセスした場合はサーバそのものがアクセス元となります。このため、SSLのみのアクセス許可(HTTPアクセスの制限)や、mod_rewriteによるURLの書き換えはできません。

最初に.htaccessの先頭に、以下の設定を追加します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L]
</IfModule>

次に、wp-config.phpの先頭に以下の内容を追加します。

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
    $_SERVER['HTTP_HOST'] = 'www.example.com';
    $_SERVER['SERVER_NAME'] = 'www.example.com';
    $_ENV['HTTP_HOST'] = 'www.example.com';
    $_ENV['SERVER_NAME'] = 'www.example.com';
}

これでcssとjsがhttpsに吐き出されない現象が解消されます。