サイトを「http」から「https（暗号化）」する「SSL化」が、
最近いろんなサイトで行われるようになってきました。
大きい理由としては、
Googleが「SEO対策に影響させますよー」とアナウンスしたからであり、
ユーザーが安心して使える暗号化サイトを推奨したことにあります。
さて、そうした「SSL化の概要やメリット」は、こちらの記事で紹介するとして、
この記事の本論としては、
「“さくらのレンタルサーバー”に入れたワードプレスをhttps化させる全手順」
を紹介します。
実はこのブログも、ちゃっかりhttps化を終えているのですが、笑
かなり悪戦苦闘しながら作業したので、
同じくさくらサーバーをお使いの方の役に立てば幸いです。
※使っているサーバーによって、かなりやり方が異なります。
それでは、早速いきましょう！
作業１：事前にバックアップをとる
SSL化を進める際、手違いが起きても完璧に復元が出来るように、
バックアップを必ず取っておきましょう。
バックアップの取り方は、プラグイン「BackWPup」を使う方法が一般的ですね。
お使いの方も多いので、問題ないと思いますが、
バックアップ方法がわからないという方は、以下の参考サイトを参照してください。
⇒「図解でわかるWordPressの全自動バックアップ方法」（引用：ノートンブログ）
作業２：さくらサーバーのコントロールパネルで変更作業
さくらサーバーのコントロールパネルにログインします。
ＩＤ忘れた、という方は、「[さくらのレンタルサーバ] 仮登録完了のお知らせ」というメールを探すか、
問い合わせをしましょう。
次に、左サイドバーの「ドメイン/ＳＳＬ設定」をクリックします。
ドメインの一覧が表示されますので、
「SSL化したいドメイン」の列の「登録」をクリックします。
次に、「無料SSLの設定へ進む」をクリックします。
最後に、「無料SSLを設定する」をクリックします。
コントロールパネルでの作業は、いったん以上です。
これで、https化が進みますが、数十分～数時間ほどかかるので、
ちょっと時間を空けて、次の作業に移ります。
作業３．ワードプレスにログインし、作業
まず、該当のブログが、https化されていることを確認します。
先頭を「http」から「https」に変えて、そのブログが表示されるか確認します。
出てくればＯＫです。
次に、そのブログのワードプレスにログインします。
ログインしたら、「設定」ー「一般」をクリック。
項目の中に、以下の２つがありますので、
それぞれ「http」の後に「s」を追加して、「変更を保存」します。
「設定」の変更は、以上で完了です。
作業４：内部リンクをプラグインで一括変更する
引き続き、ワードプレス内の変更です。
ワードプレス内では、様々な内部リンクが張られていますが、
今はまだ「http://～」のままになっています。
これを１つ１つ手作業で変更することは出来ないので、笑
「Search Regex」というプラグインを使って、一括変更します。
では、作業に入りましょう。
「プラグイン」ー「新規追加」をクリック。
続いて、検索窓に「Search Regex」と入力してください。
該当のプラグインが出てきたら、「今すぐインストール」をクリック。
インストールが完了したら、「有効化」をクリックします。
サイドバーに戻り、「ツール」ー「Search Regex」をクリック。
このような画面が出ます。
上のように、
「Search pattern」の方に、従来のドメイン（http～）を、
「Replace pattern」の方に、SSL化したドメイン（https～）を入力します。
入力後に、「Replace&Save」をクリック。
これで、内部リンクの大半を一括変更できました。
今、「内部リンクの大半を」と書きました。
実は、このプラグインでも、内部リンクを一括変更できない箇所があります。
例えば「ウィジェット」などです。
試しに「ウィジェット」を開いてみます。
上のように、「ウィジェット」に画像リンクなどを置いている場合は、
Search Regexでは変更できないので、手作業で変更する必要があります。
このような内部リンクがあったら、手作業で変更しましょう。
完了すれば、内部リンクの変更については終わりです。
作業５．https化によるテンプレートの崩れを直す
ここまでの作業で、大体のSSL化作業は終わっています。
あとは確認作業です。
ブログのどこでも良いので、固定ページなどに移動してみてください。
おそらく、テンプレートが崩れてしまっているはずです。
※さくら用の独自プラグインが、クイックインストール時に入っていれば崩れません。
作成年月日の古いサイトは、崩れやすいということです。
調べてみると、原因は「さくらサーバーの独特の仕様のため」で、
css上の「http」という記述が、「https」に置き換わっていないため起こります。
これがさくらのサーバーの厄介なところ。笑
ですので、これを解決しましょう。
まず、さくらサーバーのコントロールパネルを開きます。
その中の「ファイルマネージャー」をクリック。
そうすると、次の画面が開きますので、下のように、
「①該当のドメインをクリック」⇒「②「wp-config.php」をダブルクリック」
してみてください。
出来ましたか？
そうすると左下に、このような表示が出ますので、
「鉛筆マーク」をクリックします。
そうすると、画面全体にソースの記述が出ます。
このソースに対し、記述を追加します。
以下の５行のソースをコピーしてください。
// SSLを伝える
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';
}
これをソースの２行目に空白を空けた後、貼り付けます。
貼り付け終わると、このような感じになります。
↓
はい。
貼り付け終わりましたら、画面の下の「保存」をクリックして、
ソースを閉じます。
これで、テンプレートの崩れを直す作業は終了です。
ブログに戻り、固定ページを確認してみてください。
崩れが直っていたらＯＫです。
直っていない場合は、ソースの貼り付け場所などに
間違いがないか確認してください。
このテンプレートの直し方は、
https://mono96.jp/archives/27697（引用：ものくろぼっくす様）
こちらの記事を参照させていただきました。
作業６：リダイレクトを設定する
次は、リダイレクト設定を施します。
これは、あなたの従来のドメインやURL、
例えば、
「http://●●.com/個別記事」というＵＲＬをクリックすると、
「https://●●.com/個別記事」に自動的に飛ぶようになる
ということです。便利ですね。
では、その手順を解説します。
もう一度、「さくらサーバーのコントロールパネル」の、
「ファイルマネージャー」の画面を出します。
上のテンプレートの崩れを直したのと、同じ流れで、
ソースの追加を行います。
ここで、ソースを追加するのは、
上の画像のとおり、「.htaccess」というファイルです。
上の画像の手順で、鉛筆マークのクリックまで行くと、
ソースが画面にでます。
ソースの中の「BEGIN WordPress」という記述の前に、
改行でスペースを作ります（上の画像を参照）。
スペースを作ったら、以下の記述をコピーします。
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$ RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L] </IfModule>
コピーしたら、作ったスペースに貼り付け。
※赤字の、https://www.example.com は、あなたのドメインにしてくださいね。
そうすると以下の様になります。
出来たら、画面の下の「保存」をクリックして終了します。
これでリダイレクト設定も完了です。
この方法は、以下のサイト
https://qiita.com/tabimoba/items/64ef60412abe7ad6f0ac（引用：Quiita様）
を参考にさせていただきました。
作業７．ＳＳＬ化の最終確認
確認も、いよいよ最終段階です。
ここまででＳＳＬ化が完璧に出来ていると、Google Chromeの上部の表示は、
このように、鍵マークと「保護された通信」という表示が出るはずです。
しかし！
ＳＳＬ化が一部でも出来ていないと、このようになります。
鍵マークと「保護された通信」という表示が出ないわけです。
原因としては、そのページを構成するどこかに、
「http://~」という画像リンクが残ってしまっている
ことがほとんどです。
その探し方は、Google Chromeの「デベロッパーツール」を使います。
ブログの画面上で、「F12キー」を押してみてください。
そうすると画面の端に、このような表示が出ます。
この表示の中の「Console」というタブをクリックします。（上を参照）
そうすると、黄色マーカーで囲まれた箇所が出てきます。
この中に画像リンク（http:~）がありますので、その個所を修正すれば良いわけです。
こういう黄色マーカーの出やすい箇所は、以下の２つです。
１つは、先にも書いた通り、「ウィジェットの画像リンク」です。
もう１つは、ワードプレスのテーマの中で、独自画像を使っている場合。
例えばこういう画像が引っかかったりします。
対応としては、独自画像を外すなどになります。
こちらの修正は、使っているテーマによって、
修正箇所が変わるので、ちょっと厄介です。
ちなみに、当サイトの使っているテーマ「DIVER」は、
こうした修正がなく、スムースにSSL化できましたので、
テーマの模様替えを検討している場合は、お勧めです。
まとめ：サーバーとテーマによって、手順が異なる点にだけ注意。
以上が全手順になります。
お疲れさまでした。
成功すれば、このように「鍵マーク」が表示されます！
手順の内、難しいポイントは、
・使っているサーバー
・使っているワードプレステーマ
この２つによって、対処方法が変わる、ということです。
それ以外は難しくありません。
さくらのレンタルサーバーを使っている方は、
この記事がそのまま使えるはずです。
また、テーマが原因で、どうしてもSSL化できない場合は、
テーマの変更も１つの手です。
手順は決して少なくないですが、
将来的にSEO評価に関わるポイントですので、
ぜひ、あなたもSSL化にチャレンジしてみてください。
記事がお役に立てば幸いです。
