サイト全体のssl化を行う（ワードプレス　さくらサーバ）

サイトの一部をssl化するという流れについて、以前に記事にしました。（参照：さくらサーバで特定ページのssl化を行う）管理人は、自分のサイトに２つのフォルダを持っていて、一つのフォルダでワードプレスを運営。もう一つは、phpファイルでapiを利用したお役立ち情報などを提供しています。

フォルダの１ページをssl化することによって流れが分かったので、思い切って全体をSSL化することにしました。

管理人はさくらのレンタルサーバを利用していますので、以下の説明はさくらサーバー用です。

１）ssl表示がゆずれないページへのリンクを　https://にする

htaccessの縛りを一時的に外して（参照　参照：さくらサーバで特定ページのssl化を行うのhtaccessの書き込み　上図のhtaccess書き込み）、http://、https://どちらでも接続できる設定にしておいて、https://表示が問題ないか詰めていきます。以前ssl化した特定ページをご覧になるユーザーさんに少しでも迷惑がかからないように、このページへのリンクを　http://　→　https://　リンクに変えておきます。

作業を実際にして感じたのは、万が一変なことが起こっても、いつでも元に戻せるようにしておくことが大事。ファイルを書き込む前に必ずコピーを取る。思ったのと違った表示になったらすぐに元に戻せるようにしておくことが大事です。

２）htmlやphpページ（ワードプレス外の）でssl接続が問題ないかチェックする

まずは、ワードプレス外のフォルダにあるファイルをssl対応させていくのがよさそう。chromeブラウザで開いて、url左側の緑カギが表示されるか確認。されてない場合は、f12キーを押して、consoleを開き原因を確認します。

（１）変更が必要な箇所は、ほかのファイルでも変更が必要なのでメモを取る

管理人の場合は、以下のような変更点がありました。

• src=”http://maps.google.com/maps/api/js　→　src=”//maps.google.com/maps/api/js
• http://www.google.com/mapfiles　→　//www.google.com/mapfiles
• src=”http://ad.jp.ap.valuecommerce.com　→　src=”//ad.jp.ap.valuecommerce.com

一つ一つ変更すると見落としがあるかもしれないので、まずはまとめておいて、ツールで一気に変更します。

（２）変更の前に、保険をかけるつもりでコピーを取る

これ必須です。変更しなくてもよいところまで変更して動作がおかしくなったのを実際に経験しました。もし、コピーを取っていなかったらと思うとぞっとします。

（３）ツールを利用して一括で変換する

ツールはあったほうが絶対便利。管理人は、Texchangeというフリーソフトを使っています。変更箇所の検索にも置換にも便利。テキストエディタに「秀丸」を使っておられる方は、grep機能を有効に使うのもよさそうです。

変換の時にはエンコードの種類にも十分注意してください。管理人は間違えて、shift-jisで保存してしまい。フォルダの全ファイルが文字化けして青くなりました。さらに、後述しますが、ワードプレス内の文章を変更するのは、Search Regexというプラグインが便利です。texchangeとSearch Regexの２刀流で一気にファイルを修正します。

（４）一つのフォルダのみssl表示にする

フォルダ内ファイルを訂正後、そのフォルダごとssl表示にしました。先日、一つのファイルをssl表示するというお話をしましたが、htaccessの部分を以下のように変更します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} ^(.*)/folder/(.*)$
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

RewriteCond %{REQUEST_URI} !(^(.*)/folder/
RewriteCond %{REQUEST_URI} !(^(.*)\.gif$)
RewriteCond %{REQUEST_URI} !(^(.*)\.jpg$)
RewriteCond %{REQUEST_URI} !(^(.*)\.css$)
RewriteCond %{REQUEST_URI} !(^(.*)\.png$)
RewriteCond %{REQUEST_URI} !(^(.*)\.js$)
RewriteCond %{HTTP:X-Sakura-Forwarded-For} !^$
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

２つ以上のフォルダやファイルのみをssl表示させるやり方が、結局最後まで分かりませんでした。[or]を使ってやってみたりしたんですが、http://接続でも行けるんですよね。

３）wordpressをssl化する

追記　2016/10/27

以下の作業は一度、htaccessのこの記載を削除して行いました。全部ssl化できたあとの記載は後述しています

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} ^(.*)/folder/(.*)$
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

RewriteCond %{REQUEST_URI} !(^(.*)/folder/
RewriteCond %{REQUEST_URI} !(^(.*)\.gif$)
RewriteCond %{REQUEST_URI} !(^(.*)\.jpg$)
RewriteCond %{REQUEST_URI} !(^(.*)\.css$)
RewriteCond %{REQUEST_URI} !(^(.*)\.png$)
RewriteCond %{REQUEST_URI} !(^(.*)\.js$)
RewriteCond %{HTTP:X-Sakura-Forwarded-For} !^$
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]
</IfModule>

いよいよ本丸のワードプレスをssl化します。

1. 一般設定を変更する
2. wp-config.phpを変更する
3. ファイルや文章の中身を変更する
4. htaccessを変更する

まず、一般設定を変更しましょう。設定　→　一般から

ワードプレスアドレスとサイトアドレスをhttps://に変更します。管理人はワードプレスというフォルダにファイルを入れて運営しているのでこんな感じ。

さらに、wp-config.phpファイルを変更します。さくらでURL正規化を正しく行うSSLの設定方法、何度も紹介していますが、この通りにやります。wp-config.phpファイルの上部に、（＜?phpの下）

// プロクシでIPが入るとSSLアクセス状態をセットする
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';
}

ここまででhttps://表示が可能だと思います。何度も言いますが、変更する前に必ずファイルをコピーしておきましょう。そして、表示に不具合があればすぐに元のファイルに戻します。htaccessの設定は最後にやります。

ワードプレスを構成するファイルで変更する箇所がないかチェックする

ワードプレス外でやったチェック方法でブラウザで表示をチェック。おかしければ、f12キーを押して原因を特定して修正します。

管理人はワードプレスをカスタマイズしているので、変更箇所がけっこうありました。このときに、上記でメモしておいたチェックリストが結構役に立ちます。管理人の場合、single.php　や　functions.phpで　google maps api関連のファイルの修正をしました。ちなみに上記texchangeを使って一括変換しています。

• src=”http://maps.google.com/maps/api/js　→　src=”//maps.google.com/maps/api/js
• http://www.google.com/mapfiles　→　//www.google.com/mapfiles

しつこいようですが、変更前のファイルを必ずコピーして取っておいてください。管理人は、functions.phpの変更しなくていいところまで変更して、画面が真っ白になり頭も真っ白になった経験があります。

ワードプレスで書いた文章内の記述を訂正する

外のサーバーから引っ張って表示している画像や、アフィリエイトリンクは訂正が必要です。アフィリエイトリンクは、ユーザー表示数をカウントするのにimgタグを使っている場合が多いので、この部分の訂正が必要。　管理人の場合、バリューコマースのアフィリエイトタグと、ワードプレスにアップロード後の直貼り付け画像がhttp://表示だったので　//に切り替えました。

Backwpupを利用してバックアップをとる

今までと違ってワードプレスの記事をバックアップするのにコピーではできません。管理人は、Backwpupを使って頻繁にバックアップを取りました。（参照：Backwpupの保存先をSugarSyncからgmailに変更する）　ちなみに、Backwpup　→　ジョブ　→　今すぐ実行でバックアップが取れます。

プラグインsearch regexを使う

ワードプレス内の記事はtexchangeで訂正できないので、プラグインを使います。Search Regex — WordPress Pluginsは管理人も使ってみましたがおすすめです。文章を一括して訂正できるいいのはないかな？と探していたところだったので一石二鳥でした。 （参照：Search Regexプラグイン(記事やコメント内容を一括置換)）

htaccessファイルの変更

あらかた作業が終了したところでhtaccessを変更しました。以前書いた特定ページssl化部分を削除して、以下のファイルを書き込んでルート直下に上げます。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]
</IfModule>

ほかにやることチェック

ブログの完全HTTPS化を完了、HTTPからHTTPSへの移行プロセスを共有 | 海外SEO情報ブログ　最後に、このページをチェックして以降に伴う手続きで自分のサイトでもやったほうがいいことをやりました。

サーチコンソールへの追加

サーチコンソールへサイトを登録します。https://example.com　と　https://www.example.comの２つ。管理人は表示をwwwなしを選択しました。

snsやブックマーク表示を変更する

もともと、snsでのリンクなどほとんどないサイトなので、削除してもよかったんですが、一応付けました。はてなブックマークは以前からのものだと、はてなが扱っている　javascriptファイルがhttp://接続があるとかで上手くいかなかったので作り直しています。

• Twitterボタン | About
• はてなブックマークボタンの作成・設置について – はてなブックマーク
• facebokku シェアボタン
• +1 Button  |  Google+ Platform for Web  |  Google Developers

などなど。管理人はやってないけどほかの設定もありますので上記リンクを参考にされてください。

追記

全ページssl化し、緑色のカギが出るようにして、ブラウザで表示を確認すると　PCのchrome、Edge、Firefoxでは大丈夫なのに、iOS10のchrome、Safariでは緑色にならず、安全でないリソースがあると表示されるんです。

苦心惨憺して原因を探ったところ、SNSのソーシャルボタンにありました。今回、はてぶのブックマークのみ作り直して、それ以外（ツイッター、フェイスブック）はそのままにしておいたのがまずかったみたいです。

もともとブックマークなど少ないブログなのでボタンは外しました。また気がむいたらつけるかもしれません。

キャプチャ写真はぱくたそから引用しました。素敵な写真をありがとうございます。