さくらのサーバーでWordPressサイトの子ページがSSL化できない時は
2017/10/18 (水) 12:05 
ご存知のとおり世の中では、もう数年前からサイトのSSL化が推奨されている。
それはわかっていても
・お金かかりそう
・SSLにしなくても検索順位にはさほど影響はないんじゃない？
・一時的に順位が下がりそう
・面倒くさい
などなどの理由を持ち出して、後回しにしていた。
しかし、Google先生がいよいよ本気を出してきたようで
Chromeのアップデートで、入力フォームや検索窓があるサイトにユーザーがアクセスすると
かなり強めに、このサイトは危ないよ光線を出すとのことで、そろそろさすがに手をつけねばならぬかと、ようやく重い腰を上げたのが昨日の事。
お世話になっているさくらインターネットが、無料で簡単に独自ドメインをSSL化させてくれるとのこと。
大事なサイトでしくじったら大変なので、まずはあまり影響がないサイト（WordPressを導入している）でそれを試してみた。
さくらに設定しているドメインのSSLを申請するのは、管理画面のドメイン一覧のところで簡単に申請完了。
つづいて、WordPressまわり。
管理画面の[設定]で、
WordPress アドレス (URL)
や
サイトアドレス (URL)
をhttpのアドレスからhttpsに変える。
記事内のリンクがhttpになっているのを、httpsに変えるのは
プラグインの「Search Regex」を使ってやってもいいのだが、私はPhpMyAdminでSQLを走らせて対応。
ここまではスムーズに事が進んだ。
問題はここから。
トップページは問題なく表示されるのだが、子ページがおかしい。
テキストや画像は表示されるものの、CSSがきちんと反映されない。
ソースのhtmlを見ると、
<?php bloginfo('template_url'); ?>
で表示されるドメイン部分が
https://～
であるべきところ
http://～
になっている。
このbloginfo()に問題があるのかと思い
<?php echo get_template_directory_uri(); ?>
に変えてみたが、結果は同じ。
もしやテーマファイルに問題があるのかと、別のテーマに切り替えて見ても変わらず。
トップページは問題なく、それ以外のページに問題があるということで、パーマリンク設定を「基本」に変えてみると、なぜか問題なく表示される。
<?php if(is_ssl()){ echo 'ssl' ; } ?>
これを表示させてみると、トップページのみSSLとなるが、子ページはSSLとならない。
まいったな。サーバーを変えてみるか…
と考えていたところで、ようやく正解にたどり着いた。
こちらが、さくらのSSL利用に関する説明が書いてあるページ。
SSL利用時の注意点 – さくらのサポート情報
これによると、さくらのHTTPS(SNI SSL)は、リバースプロキシとして動作しており、SSLのみのアクセス許可(HTTPアクセスの制限)や、mod_rewriteによるURLの書き換えはできない、とのこと。
なるほど、それでパーマリンクのところで問題が発生したわけだ。
解決策としては、.htaccess と wp-config.php に、それぞれ以下の記述を加えること。
.htaccess へ加える記述
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L]
</IfModule>
※www.example.com は自分のドメインに書き換えること
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';
}
※www.example.com は自分のドメインに書き換えること
以上で、動くはず！
思いのほか時間を使ってしまった。
でも、動いて良かった。
＜＜追記＞＞
上の作業でサイト自体はhttpsで表示されるようになったものの
Firefoxで見ても、Chromeで見ても、セキュリティ的に問題があるマークが表示されていた。
これでは、本来の目的は果たされていない。
そこで、その原因を調べる方法をメモ。
Firefoxの場合は
Ctrl + Shift + k
を同時におして「開発ツール」なるものが開く。
そこに、問題のありかが表示されるので、それを１つ１つ解決していけばいい。
ちなみに私のサイトの問題は、テーマファイルが読み込んでいた”はてブ”のブックマークするためのウィジェット的なものが
内部的にhttp://～で画像やjsを読み込んでいたところにあり、”はてブ”自体を削除したところ問題は解決した。
