さくらのレンタルサーバーで無料SSL証明書が使えるようになったということで、このブログも常時SSL化してみました。やっぱりブラウザに緑のロックアイコンが表示されてると安心しますねw
さくらのレンタルサーバーの無料SSL証明書の設定はすごく簡単で、説明通り にやればものの5分くらいで設定できちゃいました。設定後しばらくしたらすぐにhttpsでサイトにアクセスできるようになったので「お、楽勝か!?」と思ったのですが、そんなことはありませんでした。
このブログはWordPressを使ってるんですが、さくらサーバー特有の設定とかテーマのテンプレートに使っていた古い関数とか、けっこういろいろなところでハマったのでメモっておきます。
サーバー環境やWordPressについて
一応、ざっくり環境を書いておきます。
- さくらのレンタルサーバーのスタンダードプランを独自ドメインで使ってます
- WordPressを自前でインストールして使ってます
- テーマはかなり昔に自分で作ったもので非推奨の古い関数を使っていた
- ドメインのルートではなくてサブディレクトリ「rriver」をトップにしてます。これがリダイレクトの設定の際に結構ややこしい
bloginfo(‘template_url’)とbloginfo(‘url’)の修正
まず、自作テーマで使っていたbloginfo('template_url')
とbloginfo('url')
がhttpsを返さないという問題に出くわしました。そもそも非推奨になっている関数 だそうで、推奨されるget_template_directory_uri()
に変更しました。
たとえば、CSSの読み込み部分を以下のように変更しました。
Before
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.min.css?v=201711150615">
After
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.min.css?v=201711150615">
ところが、get_template_directory_uri()
を使っても、なぜかhttpsを返さないんですね。調べたら、さくらのレンタルサーバー特有の設定が必要だというのがわかりました。
さくらのレンタルサーバー特有の設定
さくらのレンタルサーバではWordPressの関数が参照している環境変数の$_SERVER['HTTPS']
が「on」にならないようになっているらしく、以下をwp-config.php
に追加する必要がありました。
僕の場合は「www」なしのURLを使っているので以下の設定を追加しました。
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';
}
$_ENV
は実は必要ないとのことですが、保険のために入れているとか。
www付きのURLの場合は以下が必要とのこと。
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
$_SERVER['HTTPS'] = 'on';
if( substr($_SERVER['HTTP_HOST'], 0, 4)!=='www.') {
$_SERVER['HTTP_HOST'] = 'www.'.$_SERVER['HTTP_HOST'];
}
}
より詳しく知りたい方は、こちらのサイト で丁寧に説明されています。ありがたや。
プラグインが書き出すスクリプトのURL
上の設定を完了して「よし、これで常時SSLだ!」と思ったら、Chromeのロックアイコンが緑になりません。。。
開発者ツールで確認したら、まだhttpからリソースが読み込まれているとのこと。たしかにソースコードを見てみると、以下のように、いくつかスクリプトがhttpから読み込まれていました。
<script type="text/javascript" src="http://parashuto.com/rriver/wp/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script>
<script type="text/javascript" src="http://parashuto.com/rriver/wp/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>
以下の解決策を考えたんですが、結局、当面は3つ目の強引に書き換える方法をとりました。
- httpを書き出しているプラグインを見つけて停止、または修正する
- SSL化プラグインを入れる
- 書き出されているhttpをhttpsに書き換える
wp_head()とwp_footer()の書き換え
ソースコードを見るとwp_head()
とwp_footer()
で書き出している部分でhttpでJavaScriptを参照しているので、この部分を以下のように書き換えました。
無駄なサーバーリソースの使い方なような気がするので、問題のプラグインを特定できたら元に戻そうと思っています。
wp_head()
<?php
ob_start();
wp_head();
$wp_head_contents = ob_get_clean();
$wp_head_contents = str_replace('http://', 'https://', $wp_head_contents);
echo($wp_head_contents);
?>
wp_footer()
<?php
ob_start();
wp_footer();
$wp_footer_contents = ob_get_clean();
$wp_footer_contents = str_replace('http://', 'https://', $wp_footer_contents);
echo($wp_footer_contents);
?>
ちなみに、この設定については以下のサイトを参照させていただきました。
JetPackが悪さをしている?
その後、試しに必要なさそうなプラグインを停止してみたら、どうやらhttpでJavaScriptを参照しているのはJetPackプラグインでした。「JetPack https 」で検索すると、今回の件とは別ですが、さくらのレンタルサーバーの環境でいくつか問題があるようなので、その辺に関わる問題があるのかもしれません。
僕の場合、どちらにしてもJetPackは活用できていなかったので、とりあえず停止しておきました。このJetPack、なぜか、かなりの数のJSリソースをぶち込んでくるみたいですし。。。
画像URLの一括書き換え
あとは各記事で参照している画像URLを書き換えれば、ページが参照しているリソースがすべてhttpsになります。
この書き換えにはSearch Regex というプラグインを使って意外と簡単にできました。記事中にある「http://parashuto.com」をSearchしてざっと確認して、Replace & Saveで、すべて「https://parashuto.com」に書き換えました。
これでhttpへの参照はすべて修正したので、サイトのSSL化は完了しました。無事に緑のロックアイコンも表示されるようになりました!
あとは常時SSL化するために、httpへのアクセスをhttpsにリダイレクトすれば作業完了です。
ところが。。。
リダイレクトがうまくいかない
検索したら出てくるいくつかのサイトにあるように、.htaccess
にリダイレクトの設定を書き込めば良さそうなんですが、僕の環境の場合、どうしてもエラーが出てしまってダメでした。なんでなんだろう?
.htaccess
の記述を晒しちゃいますけど…
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /rriver/
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /rriver/index.php [L]
</IfModule>
この記述の上に以下のリダイレクトのルールを追加すると「ERR_TOO_MANY_REDIRECTS」というエラーが出てページが表示されなくなってしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
このあたりの情報 がヒントになるかな。。。
仕方がないので、このサイト で紹介されているように、以下をfunctions.php
に追加して対処しました。
function force_https_redirect() {
if ( !is_ssl() ) {
wp_redirect( 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'], 301 );
}
}
add_action ( 'template_redirect', 'force_https_redirect', 1 );
さいごに
ということで、紆余曲折しながらなんとか常時SSL化ができました。まだ腑に落ちないところはいくつかあるので、調べて修正したいですが、当面は完了ということで。
お疲れさまでした!
今後の課題:
- ブラグインの書き出すhttpへの参照
.htaccess
のリダイレクト設定
To be continued…
2017年11月21日に公開され、2017年11月22日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。
[…] 参考記事:さくらのレンタルサーバー上のWordPressの常時SSL化でハマりまくったのでシェアしておきます […]