【ワードプレスhttps化：3】さくらのレンタルサーバに入れたワードプレスを完全https化する具体的な方法

KAI

Published in

pasocafe

7 min readDec 11, 2015

前回までの記事は以下のとおりです。

【ワードプレスhttps化：1】なぜ、https化が必要なのか？

【ワードプレスhttps化：2】さくらのレンタルサーバにSSL証明書を導入する具体的な方法

このシリーズは今回で最後になります。

最後は、「さくらのレンタルサーバに入れたワードプレスを完全https化する具体的な方法」です。

私が試してうまくできた手順を書いていきますが、個人の環境によってはこれが最適かは分かりませんので、重要なデータのバックアップをしっかりと取った後に、色々と試してみてください(・∀・)

１：管理者メニューの設定＞一般でURLをhttpからhttpsに変更する

まず初めに、下のように設定＞一般にある「WordPress アドレス (URL)」と「サイトアドレス (URL)」のURLをhttpからhttpsに変更します。

２：さくらのレンタルサーバ用にwp-config.phpにおまじないを追記する

ここが大切です。
1.の設定だけでhttps対応になったと喜ぶのは早いです。さくらのレンタルサーバでは、ワードプレスがサーバに対してSSL入ってますか～？と聞いても、「安心してください。SSL履いてますよ！（はい、明るい安村パクリ）」とは言ってくれません。

ですので、ワードプレスはSSL履いてないからhttpでいいね、と判断してしまい、CSSファイルの読み込みURLもhttpになってしまっています。そんなこんなで、前回の最後に書いたようにCSSが全く効いていないという悲しい状況になっていたようです。

そんな悲しい状況から脱するには、wp-config.phpの、「/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */」の前に以下を記述します。
こちらのサイトを参考にしました。

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

３：canonicalがhttpsに変わっているか確認する

正しいページとして認識されるcanonicalが以下のようにhttpsに変わっているか、ソースの表示で確認します。
ソースの表示方法は、chromeなら右クリック＞ページのソースを表示を選択してください。IEであれば、右クリック＞ソースを表示を選択します。

<link rel="canonical" href="https://pasocafe.space/～" />

４：ウィジェット、メニュー、記事内のURL、プラグインの設定を確認し変更する

このステップは、ブログの構成や記事の多さで対応方法が変わると思います。
まだ、記事数も少ない場合は、手動で１つ１つ確認しながらURLを変更します。記事数も膨大でとてもとても１つ１つは無理だよ～（泣）という場合は、こちらのサイトも参考されてください。ツールで簡単にできます。

私は、httpもhttpsも気にしなくていいように、「//pasocafe.space～」にURLを変更しました。つまり、先頭の「http:」を削除しています。あ～、ただ最近記事に追加した画像のURLはそうなっていないかも。。。（すいません、ひとりごとです）

５：GoogleのSearch Consoleとアナリティクスの設定も追加変更する

このステップは必須ではないと思いますが、個人的に気持ち悪かったのでやりました。
Search Consoleには、https://pasocafe.spaceとhttps://www.pasocafe.spaceの２つを追加しました。
アナリティクスの方は、他にやり方があったかもしれませんが、とりあえず、httpと設定している項目をhttpsに変更しました。https用に新しいプロパテイを作ってもいいと思ったのですが、まだ若いサイトなので、まぁいっか的なノリです(・。・;
この辺りは、事前によく検討されてくださいm(_ _)m

６：httpのアクセスをhttpsへリダイレクトする設定を追加する

主要な変更が終わった段階でリダイレクトの設定をします。
設定はルートディレクトリ直下の「.htaccess」に以下を追記するだけです。「pasocafe.space」の部分は適宜修正ください。

# BEGIN Redirect for SSL
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://pasocafe.space/$1 [R=301,L]
</IfModule>
#END Redirect for SSL

７：【任意】Jetpackをhttps対応にする

このサイトではプラグインのJetpackを利用しています。オートマティック社作のプラグインなのでhttps化しても問題ないでしょ！と勝手に思っていたのですが、そうそう簡単にはいきませんね＾＾；
私が発見できたのは以下の２つの事象だけです。

PhotonをSSL対応にする

Photonというのは、記事内の画像を別のサーバにコピーしてサイトの表示を早くするための機能です。効果はいかほどか、正直よく分かりませんが、せっかく付いてる機能なのでhttpsにも対応させます。

まず、管理やメニューのプラグイン＞プラグイン編集に移動します。そこで、Jetpackプラグインの「class.photon.php」を探し、下のように赤丸の部分をtrue→falseに変更します。はい、これだけです。変更したら、更新をして反映してください。
photonが正常に動作していたら、ブラウザに表示されている画像のURLの先頭に見たことのないドメインが追加されていますので確認してみてください。
※この変更はプラグインのphpファイルを修正していますので、プラグインがアップデートされたら再度修正する必要があります。

（以下は拡大版）

JetPackとwordpress.comの連携エラーの解消

この症状は、私の場合だけかもしれません。ネット上にもあまり詳しい情報はないため、もしかしたら？と思いましたら試してみてください。

私の場合の症状は「ワードプレスの画面では異常はないが、wordpress.comのMy Siteの画面で赤帯でエラーが出て投稿一覧が表示できない」でした。

HTTPSで正常にJetpackとwordpress.comを連携をするには以下をwp-config.phpに追記します。

/* Set port to 443(JetPackでHTTPSで連携するために設定) */
$_SERVER['SERVER_PORT'] = 443;

ふぅ～、長かったですが、何かの参考になれば嬉しいです＼(^o^)／

■／■／■／■／■／■／■／■／■／■／■／■／■
【編集後記】
今日は朝から大荒れです。
今は晴天ですけどね＾＾

【ぬちぐすい】
沖縄の方言で「命の薬」。
意味の幅は広く、かけがえのないモノ、
人、瞬間に出会えた時に感じる
「ありがとう」の気持ち。

今日は、ふと前に働いていた介護施設の
利用者さんのことを思い出しました。
「ありがとう」の言葉で救われたことが
あったなぁ。
Yさんありがとう。

【ブログ毎日更新】
EX-ITさんに習い、
毎日更新を始めました。
2015年12月3日から開始
《現在 [blogupdate] 日経過》

■／■／■／■／■／■／■／■／■／■／■／■／■