WordPressをSSLにするにするとトップページ以外 CSSが反映されない対処法

WordPressをSSLにするにするとトップページ以外
CSSが反映されない対処法

さくらの共有サーバーでSSLを設定したときに
このような現象に見舞われたことはありませんか？

基本のパーマリンクの設定だとうまく全ページ
CSSが反映されるのですが、それ以外のパーマリンクにした時に
反映されなくなり、レイアウトが崩れてしまう。

この現象は「.htaccess」「wp-config.php」にコードを記述すれば解決できます。

.htaccessへの記述

.htaccessファイルを開いて一番上の箇所でいいので下記を記述します。


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

※もし階層がある場合は階層も記述します(最後の「/(スラッシュ)」も忘れずに)

wp-config.phpへの記述

次にwp-config.phpファイルを開いて下記を記述します。

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

これでどうでしょうか？

おそらくちゃんんと表示できるはずです。

なんでこのような現象が起きるのか？

さくらのレンタルサーバーでWordPressをHTTPSで運用する場合、
https→httpへ勝手にリダイレクトされるためです。

それを防ぐために「.htaccess」「wp-config.php」に上記のコードを
記述してもらいました。

是非試してみてください。