新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

イングレス(INGRESS)のミッションの作り方

INGRESSの楽しいところはたくさんありますが、プレイヤーがゲームをどんどん楽 …

「ソーシャルエンタープライズ」とは何のこと?

もうね。 3つも聞いたことのない横文字が出てくると手におえないわけですよ。 かつ …

就職したいなら「医学」、「薬学」、「機械工学」、「土木建築」、「農業経済」を勉強しよう

やっぱり芸術系はダメですかぁ。。

最近よく聞く「マーケティングオートメーション」とは何のこと?

このところ、よく耳にする「マーケティングオートメーション」。 実は、今、お世話に …

Dreamweaver(ドリームウィーバー)で見かける緑の波線の正体とは?

「Dreamweaver」のソースビューにちょくちょく緑色の波線が表示されるのに …

livedoor Readerで購読のRSSを「Byline」で読む方法

ツイッターで以下のようにつぶやいたら二人の方からオススメしていただいたRSSリー …

no image
Windows7のネットワーク設定は「アダプター設定の変更」をクリック

ナビゲーションのインターフェースが「Windows XP」と大幅に変わったことで …

カスタムフィールドとカスタム投稿で記事投稿フォームを使いやすく 1 – 「Custom Field GUI Utility」の巻 【ワードプレス】 #wp

1. Custom Field GUI Utility | 2. Custom …

スワイプやピンチアウトってどんな操作?【iPhone操作一覧】

iPhone(アイフォーン)を使い始めてマウスとは違ういろいろな操作方法があるこ …

WordPress3.4にアップデートしたらカスタムフィールドで入力した項目が表示されなくなった

つい先日、WordPress(ワードプレス)がアップデートして「3.3.2」から …