ロリポップ&WordPress（Cocoon）で運営するブログサイトのSSL対応

2018年7月24日のGoogle Chromeのアップデート（Chrome 68）が間近に迫ってきました。
このアップデートを適用すると、非SSL対応のサイトを閲覧した際に、ブラウザのアドレスバーに「保護されていない通信」と表示されるようになります。

さらに2018年10月16日にリリースされる（Chrome 70）からは、さらにびっくりマーク付きで「保護されていない通信」という赤字で表示されるようになります。

本サイトは個人情報やクレジットカード情報などのセンシティブデータの取り扱いはありませんが世の流れは完全SSL化に向かっていますので、この機会にSSL化を行いました。
今回はその手順を紹介します。
サイトのSSL化をこれから行う場合には、参考にしていただければと思います。
※なお、本記事は、ロリポップサーバーでWordPress（テーマはCocoon）の運用をしている本サイトをSSL化した手順になりますが、レンタルサーバー会社やWordPressのテーマが違っていても参考にできると思いますのでご安心ください。

ロリポップサーバー側のSSL対応

サイトをSSL化するにあたってまず一番初めに実施することは、ドメイン用のSSL証明書を取得するところから始まります。
数年前までは、安いものでも年間1000円程度の費用を払って、この証明書を発行する手続きが必要でしたが、最近は大抵のレンタルサーバー会社で無料で使える独自SSLを提供しています。
ロリポップでも独自ドメインを利用している場合には、Let’s Encryptという独自SSLを無料で利用できます（詳細はこちら）ので、今回はこちらを利用します。

この手順はロリポップが紹介していますので、こちらをご参照ください。

念のため、この手順をもとに本サイトの対応をした際の画面キャプチャおよびコメントを記載しますが、不要な方は、次の「WordPress側のSSL対応」にお進みください。

１．ロリポップの「ユーザー専用ページ」にログインすると、トップページ上部に「独自SSLのお申込みへすすむ」というリンクをクリックします。

２．「独自SSL証明書お申込み・設定」画面にて、「無料独自SSLを設定する」ボタンをクリックします。

３．「SSL保護されていないドメイン」に表示されている対象ドメインの中からSSL対応を行うドメインにチェックを入れ、「独自SSL（無料）を設定する」ボタンをクリックします。
※SSL対応をしない理由がなければ対応しておいた方が良いと思われます。

４．対象ドメインのステータスが「SSL設定作業中」に変わります。

ロリポップの説明には5分程度と出ていましたが、本サイトではサブドメイン（www.asspie.net）は2分弱、ドメイン（asspie.net）は10分弱かかりました。

設定が完了すると「SSL保護されているドメイン」タブに設定変更を実施したドメイン（asspie.net、www.asspie.net）が表示されます。

SSL保護設定が完了したら、実際に対象サイトにhttps接続をしてみましょう。
例）変更前（http://asspie.net）→変更後（https://asspie.net）

https接続で無事サイトが表示されれば、ロリポップサーバー側の設定変更は完了です。
続いてWordPress側のSSL対応に進みます。

WordPress側のSSL対応

WordPressの設定変更を行う前に必ずサイトがhttpsで表示されることを確認してください。
※ssl設定が完了していない状態で本作業を行うと最悪の場合、WordPressにアクセスできなくなる可能性があります。

WordPress一般設定のアドレス変更

１．WordPress管理画面にログインし、「設定」ー「一般」をクリックします。

２．「一般設定」画面にて「WordPressアドレス（URL）」と「サイトアドレス（URL）」をそれぞれhttp→httpsに変更します。

＜変更前＞

＜変更後＞

以上でWordPressの一般設定の変更は完了です。
引き続き、投稿記事内で設定されているURLをhttp→httpsに置換する作業に移ります。

WordPressプラグイン「Search Regex」を使った個別記事内のアドレス一括変更

投稿数が少なければ、投稿記事を一つずつ編集しても良いですが、今回はWordPressのプラグイン（Search Regex）を使ってみたいと思います。

まずは、このプラグイン「Search Regex」を新規追加します。

１．WordPress管理画面の「プラグイン」ー「新規追加」をクリックします。

２．「プラグインを追加」画面が表示されたら、右上の「キーワード」ボックスに「Search Regex」と入力してください。
画面に「Search Regex」が表示されたら「今すぐインストール」ボタンをクリックしてインストールしてください。

３．プラグインのインストールが完了したら「有効化」ボタンをクリックしてください。

４．プラグインの有効化が完了したら、WordPress管理画面の「ツール」ー「Search Regex」をクリックしてください。

５．「Search Regex」の画面が開きますので、「Search pattern」と「Replace pattern」にそれぞれ置換前と置換後のドメインを設定します。

例）http://asspie.netからhttps://asspie.netに一括変換する場合。

ドメインを入力したら、「Search」ボタンをクリックすると置換対象箇所が一覧表示されます。
※この段階ではまだ置換は行われません。
想定外の箇所が置換されてしまっていないかどうかなど確認するのに利用できます。
問題がなければ次へ進みます。

６．先ほど、置換箇所の一覧を確認しましたので、今度は置換後のイメージを確認するため「Replace」ボタンをクリックします。
※この段階でもまだ変更は行われません。
変換後のアドレスが置換の不備等で不正なアドレスになっていないか等、確認してください。
問題なければ次へ進みます。

７．アドレス置換に問題ないことが確認できたら、「Replase & Save」ボタンをクリックして一括置換処理を実施します。ここで初めて置換処理が実行されますので、もう一度最終確認をしてから「Replace & Save」ボタンをクリックしてください。
置換処理が完了すると、画面左上に「xxx occurrences replaced」と表示されます。

以上でWordPressの設定変更は完了です。

引き続きhtaccessによるリダイレクト処理へ進みます。

.htaccessによるリダイレクト処理

ここまでの作業はサイトの大部分はhttps対応が完了しています。
ここでは、httpでアクセスしてきた場合に強制的にhttps接続に切り替える設定を行います。
この作業が完了すると、サイトがssl対応されていることを知らないユーザーが今までのhttpでアクセスしてきた場合でも強制的にhttpsへ切り替わりますので、ユーザー側でお気に入り登録などの変更処理を行う必要がなくなります。

.htaccessファイルの取得

「.htaccess」はレンタルサーバー上に配置されていますので、FTPソフトを使ってパソコンにダウンロード（取得）します。
「.htaccess」は、レンタルサーバーのルートディレクトリ（一番上の階層にあるディレクトリ）に配置されています。
WordPressのサイトを複数運営していたり、WordPressの他にもソフトをインストールしているといったことがなければ、通常はFTPソフトでアクセスし「/」と表示されるディレクトリ（wp-admin、wp-content、wp-includesといったディレクトリが配置されているディレクトリ）に配置されています。

「.htaccess」の編集前に、念のためコピーを取得しておくことをおススメします。

.htaccessの編集

「.htaccess」をエディタで開いてファイルの先頭に以下の文字列を追加してください。

設定が完了したら、FTPソフトを使ってレンタルサーバー上の.htaccessを変更後の.htaccessで上書きしてください。

これでリダイレクト設定は完了です。

試しにサイトにhttpで接続してみてください。
自動的にhttpsに切り替われば設定は完了です。

WordPressテーマCocoon側のSSL対応

ここまでの設定が完了すると、WordPressのテーマによってはSSL対応は完了です。
本サイトはCocoonというテーマを使っていますが、このテーマはもう少し設定が必要です。
CocoonのSSL対応に関しては、Cocoonのサイト記載されていますので詳細はそちらをご参照ください。

ここでは、本サイトで変更した内容をご紹介します。

１．WordPress管理画面「Cocoon設定」画面の「ヘッダー」タブで「ヘッダーロゴ」を選択しなおし。

２．WordPress管理画面「Cocoon設定」画面の「OGP」タブで「画像のアップロード」をクリア。

この作業で本サイトは無事SSL対応が完了しました。
なお、SSL対応が完了したかどうかは、例えばGoogle Chromeでサイトにhttpsでアクセスしてみてアドレスバーの前に「保護された通信」という文言が表示されているかどうかで確認できます。
トップページだけでなくいくつか個別記事も確認してみることをおススメします。

なお、ここまでの変更を行っても「保護された通信」と表示されない場合に、どこに問題があるのかを調べる方法を、豆知識としてこの後ご紹介します。

SSL対応未完了箇所の特定方法

ここではGoogle Chromeを使ってSSL対応が未完了の箇所を特定する方法をご紹介します。

１．Google Chromeを使って対象サイトにアクセスしてください。
アドレスバーに「保護された通信」と表示されずに以下のような  i マークが表示されている場合にはSSL対応が完了していない箇所が存在していることになります。

２．サイトにアクセスしたら、F12ボタンをクリックしてGoogle Chromeのディベロッパーツールを表示し、右側に表示されたツール内の上部にある「Console」タブをクリックしてください。

黄色いビックリマーク付きで表示されている部分がSSL対応が完了していない箇所になります。
ここでは、以下のような文言が表示されています。

URL部分がURLエンコーディングされているため読めずよくわかりません。
そこで、このページで右クリックして「ページのソースを表示」を選択します。

ソースを表示したら、先ほどのディベロッパーツール上に表示されていたメッセージの先頭にある（index）:107の部分から、このソースの107行目に注目します。
107行目には以下のようなソースが記載されています。

このhttpの部分をブラウザのアドレスにコピーして表示してみましょう。
表示された画像はこちらです。

この画像は、WordPressのテーマであるCocoonの公式画像です。
本サイトはこの画像を利用はしていないのですが、内部的に呼び出しているようです。
これはテーマ側の問題なので、Cocoonに関連する記事をネットで探していて先ほどご紹介したCocoonのSSL対応に関するサイトを見つけました。
このようにすれば自分で修正可能な部分かそれともWordPressのテーマの問題なのかあるいは広告関連の記事なのか切り分けができると思います。
問題箇所が分かれば後は、ネット検索すればほとんどのものは解決できると思います。
是非、早めに取り掛かることをおススメいたします。

以上です。