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

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

*

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

      2017/09/22

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

1年以上前の記事です。内容が古い可能性があります。

さくらインターネットで非常に安く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

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

  関連記事

「ニンテンドー3DS」持ち運び時はゲームカード(カートリッジ)の飛び出しに注意!

1年以上前の記事です。内容が古い可能性があります。ニンテンドー3DSは持ってない …

就活者は注意しよう。エントリーシート、職務経歴書等に書いてはいけないエピソード

1年以上前の記事です。内容が古い可能性があります。もう、この歳になったら就職活動 …

顧客を5段階のレベルで考えてみる

1年以上前の記事です。内容が古い可能性があります。ひとえにお客様(顧客)といって …

Webサイトでプリント時にヘッダやメニューを消す方法

1年以上前の記事です。内容が古い可能性があります。どうも日本人は印刷にこだわる。 …

これだけはやめて欲しいSNSのマナー。1位は顔写真の無断投稿

1年以上前の記事です。内容が古い可能性があります。自分も心がけたいところですが、 …

シャットダウン時のOSアップデートはネット接続がなくても可能

1年以上前の記事です。内容が古い可能性があります。これ、知りませんでしたよ。 先 …

Illustrator(イラストレータ)のピクセルにスナップ(ピクセルグリッドに整合)を解除する方法 【DTP】

1年以上前の記事です。内容が古い可能性があります。以前、Illustrator( …

WordPress(ワードプレス)の国産おススメテーマ「スティンガー(Stinger)」

1年以上前の記事です。内容が古い可能性があります。いや、ほんと良いテーマにめぐり …

「ネットプリント」とはなんなのか?

1年以上前の記事です。内容が古い可能性があります。さてさて、今までセブンイレブン …

忘れたパスワードを確認できる「SeePasswd」

1年以上前の記事です。内容が古い可能性があります。先日記事にした「パスワード「● …

血液型オヤジ