新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

さくらのレンタルサーバー+ラピッドSSLを使ってWordPressをhttps化するときの注意点

      2017/09/22

  • このエントリーをはてなブックマークに追加

さくらインターネットで非常に安くSSLが使えるのをご存知でしょうか?
なんと、1年1500円、3年ですとなんと3200円(それぞれ税別)、1年間約1000円でSSLが使えちゃうという価格。
もちろん、独自ドメインに対応していて、以前は独自ドメインでSSLを使うのにすくなくても年間数万は掛かっていたと思うのですがこれは破格です。

□ ラピッドSSL | さくらのSSL

スポンサーリンク
 

ただ、落とし穴もあったりします。
やはり、それなりに知識のある方でないとなかなか設定できない。
さらに、知識があってもちゃんと設定するのは結構大変というしろもの。

今回は、WordPressでSSLが使えないという状態に陥ってしまったので、その対処法を解説したいと思います。まずは具体的な症状をお伝えしましょう。

WordPressの場合、SSLの設定がしっかりできていれば以下の設定でサイトのURLをhttpsに修正すればOKなはず。
簡単です。

トップページはこれでいけました。
httpのときと変わらずしっかり表示されているのですが、各個別ページに入ると以下のように表示されてしまいます。

原因を調べるためにソースを見るとこういった状態。

つまり、CSSやjavaScript等のパスがhttpになってしまっていて弾かれてしまうんです。
セキュリティを無視すればちゃんと表示されますが、それもちょっと一手間かかるし、心もとないのでなんとかしたいところ。

そこで、2つの対策をご紹介いたします。

パスの指定が絶対パスになっているところを相対パスに変える

上写真の通り、CSSやjavaScriptを「http://」で始まる絶対パスにしているから弾かれるわけであって、これを相対パス表記に全て変えてあげれば良いわけです。
それに関しては以下の記事にある記述を利用させてもらいました。

class relative_URI {
    public function __construct() {
        add_action('get_header', array(&$this, 'get_header'), 1);
        add_action('wp_footer', array(&$this, 'wp_footer'), 99999);
    }
    protected function replace_relative_URI($content) {
        $home_url = trailingslashit(get_home_url('/'));
        $top_url = preg_replace( '/^(https?:\/\/.+?)\/(.*)$/', '$1', $home_url );
        return str_replace( $top_url, '', $content );
    }
    public function get_header(){
        ob_start(array(&$this, 'replace_relative_URI'));
    }
    public function wp_footer(){
        ob_end_flush();
    }
}
$relative_URI = new relative_URI();

情報源: WordPressで自ドメインのURLを相対パスに変換する方法 – モンキーレンチ

これを「function.php」に追記してあげればOKです。
ただし、この方法ではサイトアドレスを「http://」記述にしてあげないと正常に動きませんでした。
設定が「http://」で「https://」でサイトを見るっていうのもちょっと気持ち悪いですよね。

そこでもう一つの方法、

WordPressに明示的に通信がSSLであることを伝える

なんでも、さくらのレンタルサーバでは、外部との通信はSSLで行われますが、内部でのやり取りは通常の通信でやり取りしているそうでして、実はそこがWordPressがSSL通信をしていないと判断してしまっている原因のようです。
さくらのレンタルサーバでは環境変数「HTTP_X_SAKURA_FORWARDED_FOR」を使ってSSL通信をしてるか否かを評価しているということですので、「HTTP_X_SAKURA_FORWARDED_FOR」を使い、WordPress側にSSLで通信していると思い込ませることで、ちゃんとパスを「https」で表記していくれるようなんです。

その手順が以下。

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
}

情報源: さくらレンタルサーバーの共有SSLを使う

これを第一階層にある設定ファイル「wp-config.php」の、「/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */」の前に記述すればOK。

現在はこちらで対応しております。

ということで、実はすでに一部SSL化をして様子見状態の当ブログ、
気になるPVや広告収入ですが、PVは微増、広告収入は微減といったところ。
まあ、もうちょっと様子見てみましょう。
(ってか、もう、後戻りできないよねぇ。。)

【追記】
上記設定を済ませた後にhttpからhttpsへの301リダイレクトの設定を忘れないようにしましょう。

WordPressをhttps(SSL)化、さくらインターネットのレンタルサーバーでリダイレクトループさせない「.htaccess」の書き方【前編】

 - WordPress, 覚え書き , , , ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

出会い系サイトで何と書き込んだら逮捕されるのか【ちほちゅう深夜版】

中学生男子が「エッチなお姉さんいませんか?」と掲示板に書いたところ逮捕されてしま …

GmailとMMS(SMS)を使って任意の一つ(一意)のポータルが攻撃されたら通知させる設定【INGRESS】

アノマリーメダルも届き、再びモチベーションの戻ってきたINGRESS。 ポータル …

ツイッターとiPhoneの連絡先を同期する方法

FacebookとiPhoneの連絡先を同期させる方法は先日解説しました。 これ …

長距離高速深夜バス(夜行バス)に電源が付いているかどうかは座席の列数で判断。3列は付いている可能性大

京都に来ています。

左下クイック起動アイコンに「デスクトップの表示」を再登録する方法

すべては以下のリンク先で解説しているのですが、 自分用にわかりやすく解説しなおし …

天気系ツイートは注意!あなたの自宅が特定される【ツイッター】

まあ、そうなんだろうけどそこまでは気にしてられないですよねぇ。。 □  …

no image
カタカナ表記のルール(音引きを入れる?入れない?)

ブログやってるとカタカナ表記に音引きを入れるかどうかでよく悩む。 ネットの記事や …

LINE(ライン)でブロックされているかどうか分かる確実な方法

LINE(ライン)が凄い広がりを見せていますが、他のツールに比べて比較的気軽にブ …

no image
Tumblr(タンブラー)とFacebookを連携させる方法

先日、YouTubeとFacebookを連携させる方法を解説しました。実は、その …

no image
他サービスとの連携を止める方法 【Google編】

SNSだったら分かりやすいのですが実はGoogleでも他サービスと連携することが …