WordPress 無料でSSLを導入

WordPressで運営するブログに独自SSLを無料で導入する手順を紹介します。ネタワンでもサイト全体をSSL化したので、その手順や注意点などをまとめました。

導入手順は簡単です。基本的にレンタルサーバーに標準で用意された機能を利用します。
「エックスサーバー」の契約者であれば追加料金なしで利用できます。

独自SSLを導入することにより、WordPressで運営するサイトに対して、サイト利用者とサーバー間の通信がSSL接続で暗号化されます。通信が暗号化されるので、通信の安全性が向上します。サイト全体のSSL化に伴いサイトのアドレスがHTTPからHTTPSに変更になります。

この記事では「エックスサーバー」を利用する場合の独自SSLの導入手順を説明しています。WordPressの初心者でもわかるように、なるべく簡単な方法で説明しています。

はじめに

なぜSSL化が必要なの？

SSL

WordPressで運営するサイトにSSLを導入することで、サイト利用者とサーバー間の通信がSSL接続で暗号化されます。通信が暗号化されるので、通信の安全性が向上します。

SSLを導入するメリットとして、「Webサイトの改ざん」「通信の盗聴」などからWebサイトを守る効果が期待できます。

それに加え、「SEO効果」も若干ではありますが期待できます。Googleは検索エンジンの検索結果において、HTTPSページを優先して表示させることを明言しています。

参考記事

Googleウェブマスター向け公式ブログ

サーチコンソールで通知された警告文

Google Chromeの次期バージョン（バージョン62）で、非SSLページにあるフォームにテキストを入力すると、「保護されていません」という警告が表示されるようになると予告がありました。

Webサイトを運営する上で影響の大きい仕様変更です。将来的には常時SSLの導入が必須になることが予感されます。

Chromeのセキュリティ警告

2017年10月より、ユーザーがChrome（バージョン62）でHTTPページのフォームにテキストを入力すると、「保護されていません」という警告が表示されるようになります。また、シークレット モードを使用している場合は、HTTPページにアクセスするだけで「保護されていません」と表示されます。

貴サイトでは、たとえば以下に示すURLに、Chromeの新しい警告が表示されるテキスト入力フィールド（< input type="text" >、< input type="email" > など）が見つかりました。これらの例を参考にどのページで警告が表示されるかを確認し、ユーザーデータを保護するための措置を講じていただきますようお願いいたします。

（中略）

長期的には、HTTP で配信されるすべてのページを「保護されていません」と明示することを計画しており、この新しい警告はその一環です。

エックスサーバーへのSSL導入

エックスサーバー

「エックスサーバー」を利用する場合の独自SSLの導入手順を説明します。

SSL導入で必要になる作業
  • 記事本文の中にあるURLをHTTPからHTTPSへ置換する。（画像のパス、内部リンク）
  • HTTPへのアクセスをHTTPSにリダイレクト（転送）する場合は、「.htaccess」ファイルを手動で編集する。
  • 広告を掲載している場合は、広告タグの差し替えが必要になる。SSL非対応の古い広告タグは差し替える。
  • アクセス解析ツールに登録したURLをHTTPSに変更する。
  • サーチコンソールにHTTPSのURLで新規登録する。XMLサイトマップも新規登録する。

作業の流れ

  1. サイト全体のデータとデータベースをバックアップする
  2. 独自SSL設定を追加する（サーバーパネル）
  3. 「.htaccess」ファイルを編集して、HTTPへのアクセスをHTTPSにリダイレクト（転送）する（サーバーパネル）
  4. 記事本文の中にあるURLをHTTPからHTTPSへ置換する（WPプラグイン）
  5. 「WordPressアドレス」「サイトアドレス」をHTTPSへ変更する（WP管理画面）
  6. HTTPS非対応の広告タグを全て入れ替える
  7. HTTPSとHTTPが混在していないか確認する
  8. その他の変更作業
  9. 作業完了

1. バックアップ

念のためにサイト全体のデータとデータベースをバックアップしておきましょう。万が一、何か不具合が発生したとしても、バックアップデータから復旧がしやすいです。

エックスサーバーでは、サーバーパネルから「ホームディレクトリ」「データベース」のデータをダウンロードできます。

ちなみに、バックアップは「BackWPup」や「UpdraftPlus」などのWPプラグインを利用しても問題ありません。

2. 独自SSL設定の追加

独自SSL設定をサーバーに追加すると、HTTPSでのSSL通信が利用できるようになります。

独自SSL設定は「エックスサーバー」に標準で用意されている機能です。下記の手順で簡単に設定を追加できます。

設定対象ドメインの選択

まず最初に、独自SSLの設定を追加するドメインを選択してください。

設定対象ドメインの選択

独自SSL設定

サーバーパネルのメニューから「ドメイン ＞ SSL設定」をクリックします。

独自SSL設定

設定の追加

設定するドメインを選択して、「独自SSL設定を追加する（確定）」をクリックします。

ちなみに、CSR情報の入力は不要です。

設定の追加

設定完了

SSL設定の一覧画面に設定したドメインが表示されていれば設定完了です。

設定反映には30分〜1時間くらいかかります。設定反映まで少しお待ちください。

設定完了

3. HTTPからHTTPSへのリダイレクト

エックスサーバーでは、独自SSL設定の追加が完了した時点では、HTTPからHTTPSへ自動的にリダイレクト（転送）されません。

サイト全体をSSL化する場合は、サーバーパネルの「.htaccess編集」で下記コードを追加してください。HTTPへのアクセスがHTTPに自動的にリダイレクト（転送）されるようになります。

追加するコード
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
注意点

「.htaccess」のファイル編集は慎重に行いください。記述を誤るとエラーが発生してサイトにアクセスできなくなる場合があります。

.htaccess編集

htaccess編集

4. 記事本文の中にあるURLの置換

次に、記事本文の中にあるHTTPを含むURLを全て修正する必要があります。修正対象は「画像のパス」「内部リンク」のURLになります。

下記の「Velvet Blues Update URLs」のWPプラグインを利用して新旧のURLを一括置換します。このWPプラグインを利用すると、記事本文の中にあるURLを一括して置換できます。

Velvet Blues Update URLs

Velvet Blues Update URLs

Velvet Blues Update URLsは、WordPress移転時のデータベース内にあるURLの一括置換ができるプラグインです。データベース内にある画像やリンクのURLを1クリックで一括置換できます。

このプラグインはWordPressの引越しや設置場所を変更する際に利用します。「Webサイトのドメイン変更」「Webサイトの設置ディレクトリ変更」「ローカル環境におけるテストサーバー構築」などに役立ちます。

使い方は非常に簡単です。変更前と変更後のURLを入力し、ボタンをクリックするだけで処理を完了できます。レンタルサーバーの引越し時に役立つプラグインなので活用しましょう。

インストール方法
管理画面の場所

WP管理画面 ＞ ツール ＞ Update URLs

URLを置換する

このプラグインは、通常はサーバー移転時などに利用しますが、SSL導入によるサイトアドレス変更時にも利用できます。

HTTPS（新）とHTTP（旧）のURLを入力するだけで、記事本文の中にあるURLを一括置換できます。一括置換の処理が完了すると、処理結果が表示されます。URLを何個置換したかの結果も必ず確認してください。

URLを置換する

5. 管理画面のURLの変更

次に、WordPressの管理画面のURLをHTTPSに変更します。

WordPressの管理画面にログインして、「設定 ＞ 一般設定」にある「WordPressアドレス」「サイトアドレス」の部分のURLをHTTPSに変更して保存してください。

一般設定

一般設定

参考

WordPressの設定ファイルをカスタマイズしている場合

もし、WordPressの設定ファイル（wp-config.php）を手動でカスタマイズしている場合は、下記URLの部分をHTTPSに変更する必要があります。カスタマイズしていない場合は関係ないので、読み飛ばしてください。

define( 'WP_SITEURL', 'https://yourdomain.com/' );
define( 'WP_HOME', 'https://yourdomain.com' );

6. HTTPS非対応の広告タグを全て入れ替える

WordPressに広告を掲載している場合の話になりますが、記事本文の中に「HTTPS非対応の広告タグ」や「HTTPS非対応のブログパーツ」がある場合、HTTPSとHTTP（非SSL）が混在してしまい、不完全な状態となってしまいます。

サイト全体をSSL化する場合は、HTTPS非対応の要素は全て入れ替える必要があります。最近の広告配信サービスでは、HTTPS対応版の広告タグが用意されていますので、HTTPS対応版の広告タグを利用してください。

7. HTTPSとHTTPが混在していないかを確認する

最後に、全てのページを開き、HTTPSとHTTPが混在していないかどうかを確認しましょう。

外部サイトから画像を取得して表示している場合など、SSL通信が不完全な場合は、Webブラウザのアドレスバーにある鍵マークの部分の色が変わったり、警告が表示される場合があります。

Google Chromeでの表示例
SSL通信が正常な状態 SSL通信が正常な状態
SSL通信が不完全な状態 SSL通信が不完全な状態
よくある問題

下記内容に当てはまる場合、該当箇所を修正が必要になります。

  1. 外部サイトから画像を取得して表示している。（同じサーバー上に画像を格納する）
  2. HTTPS非対応の広告タグを利用している。（対応版に差し替える）
  3. HTTPS非対応のブログパーツを利用している。（対応版に差し替える）
  4. HTTPS非対応のシェアボタン・フォローボタンを利用している。（対応版に差し替える）
Google Chromeのデベロッパーツールが便利

Google Chromeの「デベロッパーツール」を利用すると、HTTPS（SSL）とHTTP（非SSL）が混在している箇所を素早く探すことができます。現在開いているページにSSL非対応の部分があれば一覧表示されます。便利なツールなので活用しましょう。

ツールの場所
Google Chrome ＞ 右上メニュー ＞ その他ツール ＞ デベロッパーツール ＞ Console

Google Chromeのデベロッパーツール

8. その他の変更作業

サイト全体のSSL化の作業が完了した後は、アクセス解析ツールやサーチコンソールに登録していたURLをHTTPSに変更しておきましょう。

変更が必要な部分

  • Google Analytics（アクセス解析ツール）に登録したURLをHTTPSに変更する。
  • サーチコンソールにHTTPSのURLで新規登録する。XMLサイトマップも新規登録する。
  • RSSリーダー購読ボタンのURL変更と確認（利用している場合）

9. 作業完了

以上で作業完了です。
お疲れ様でした。

wpXレンタルサーバーへのSSL導入

wpXレンタルサーバー

「wpXレンタルサーバー」を利用する場合の独自SSLの導入手順を説明します。

SSL導入で必要になる作業
  • 記事本文の中にあるURLをHTTPからHTTPSへ置換する。（画像のパス、内部リンク）
  • 「SSL化補助機能」を利用して、HTTPへのアクセスをHTTPSへリダイレクト（転送）する。
  • 広告を掲載している場合は、広告タグの差し替えが必要になる。SSL非対応の古い広告タグは差し替える。
  • アクセス解析ツールに登録したURLをHTTPSに変更する。
  • サーチコンソールにHTTPSのURLで新規登録する。XMLサイトマップも新規登録する。

作業の流れ

  1. データベースとサイト全体のデータをバックアップする（wpX管理パネル ＋ FTPソフト）
  2. 独自SSL設定を追加、SSL化補助機能（wpX管理パネル）
  3. 記事本文の中にあるURLをHTTPからHTTPSへ置換する（WPプラグイン）
  4. 「WordPressアドレス」「サイトアドレス」をHTTPSへ変更する（WP管理画面）
  5. 広告を掲載している場合は、SSL非対応の古い広告タグを差し替える。
  6. HTTPSとHTTPが混在していないか確認する
  7. その他の変更作業
  8. 作業完了

1. バックアップ

念のためにサイト全体のデータとデータベースをバックアップしておきましょう。万が一、何か不具合が発生したとしても、バックアップデータから復旧がしやすいです。

wpXは管理パネルからデータベースのデータをダウンロード・復元ができます。

ちなみに、バックアップは「BackWPup」や「UpdraftPlus」などのWPプラグインを利用しても問題ありません。

2. 独自SSL設定の追加

独自SSL設定をサーバーに追加すると、HTTPSでのSSL通信が利用できるようになります。

独自SSL設定は「wpXレンタルサーバー」に標準で用意されている機能です。下記の手順で簡単に設定を追加できます。

対象ドメインの選択

独自SSLの設定を追加するドメインを選択します。

対象ドメインの選択

独自SSL設定

「セキュリティ設定 ＞ 独自SSL設定」の「設定」ボタンをクリックします。

独自SSL設定

設定の追加

「独自SSL設定の追加」をクリックします。

設定の追加

設定追加の確定

「独自SSL設定を追加する(確定)」をクリックします。ちなみに、CSR情報の入力は不要です。

設定追加の確定

SSL化補助機能

次に、「SSL化補助機能」を利用します。この機能は「HTTPへのアクセスをHTTPSにリダイレクト」「URLの置換」「サイトアドレスの変更」の機能を利用できます。便利な機能なので活用しましょう。

「SSL化補助機能」タブをクリックして、必要な項目にチェックを入れて「チェックを入れた機能を実行(確認)」をクリックします。

確認画面の設定内容を確認して、「チェックを入れた機能を実行(確定)」をクリックします。

SSL化補助機能

設定完了

完了画面が表示されれば、SSL化補助機能の実行が完了しました。

3. 記事本文の中にあるURLの置換

上記の「SSL化補助機能」を利用するだけで、HTTPのURLを全て置換できれば良いのですが、WordPressのカスタマイズ状況によっては、全てのURLを置換できない場合があるようです。

その場合は、下記の「Velvet Blues Update URLs」のWPプラグインを利用して新旧のURLを一括置換しましょう。このWPプラグインを利用した方が確実です。

Velvet Blues Update URLs

Velvet Blues Update URLs

Velvet Blues Update URLsは、WordPress移転時のデータベース内にあるURLの変更ができるプラグインです。データベース内にある画像やリンクのURLを1クリックで一括置換できます。

このプラグインはWordPressの引越しや設置場所を変更する際に利用します。「Webサイトのドメイン変更」「Webサイトの設置ディレクトリ変更」「ローカル環境におけるテストサーバー構築」などに役立ちます。

使い方は非常に簡単です。変更前と変更後のURLを入力し、ボタンをクリックするだけで処理を完了できます。レンタルサーバーの引越し時に役立つプラグインなので活用しましょう。

インストール方法
管理画面の場所

WP管理画面 ＞ ツール ＞ Update URLs

URLを置換する

このプラグインは、通常はサーバー移転時などに利用しますが、SSL導入によるサイトアドレス変更時にも利用できます。

HTTPS（新）とHTTP（旧）のURLを入力するだけで、記事本文の中にあるURLを一括置換できます。一括置換の処理が完了すると、処理結果が表示されます。URLを何個置換したかの結果も必ず確認してください。

URLを置換する

4. 管理画面のURLの変更

WordPressのサイトアドレスがHTTPSに変更されているか確認してください。「WordPressアドレス」「サイトアドレス」の部分がHTTPSのURLになっていれば問題ありません。HTTP（非SSL）のままであれば、HTTPSに変更する必要があります。

WordPressの管理画面にログインして、「設定 ＞ 一般設定」にある「WordPressアドレス」「サイトアドレス」の部分のURLをHTTPSに変更して保存してください。

一般設定

一般設定

WordPressの設定ファイルをカスタマイズしている場合

もし、WordPressの設定ファイル（wp-config.php）を手動でカスタマイズしている場合は、下記URLの部分をHTTPSに変更する必要があります。カスタマイズしていない場合は関係ないので、読み飛ばしてください。

define( 'WP_SITEURL', 'https://yourdomain.com/' );
define( 'WP_HOME', 'https://yourdomain.com' );

5. HTTPS非対応の広告タグを全て入れ替える

WordPressに広告を掲載している場合の話になりますが、記事本文の中に「HTTPS非対応の広告タグ」や「HTTPS非対応のブログパーツ」がある場合、HTTPSとHTTP（非SSL）が混在してしまい、不完全な状態となってしまいます。

サイト全体をSSL化する場合は、HTTPS非対応の要素は全て入れ替える必要があります。最近の広告配信サービスでは、HTTPS対応版の広告タグが用意されていますので、HTTPS対応版の広告タグを利用してください。

6. HTTPSとHTTPが混在していないかを確認する

最後に、全てのページを開き、HTTPSとHTTPが混在していないかどうかを確認しましょう。

外部サイトから画像を取得して表示している場合など、SSL通信が不完全な場合は、Webブラウザのアドレスバーにある鍵マークの部分の色が変わったり、警告が表示される場合があります。

Google Chromeでの表示例
SSL通信が正常な状態 SSL通信が正常な状態
SSL通信が不完全な状態 SSL通信が不完全な状態
よくある問題

下記内容に当てはまる場合、該当箇所を修正が必要になります。

  • 外部サイトから画像を取得して表示している。（同じサーバー上に画像を格納する）
  • HTTPS非対応の広告タグを利用している。（対応版に差し替える）
  • HTTPS非対応のブログパーツを利用している。（対応版に差し替える）
  • HTTPS非対応のシェアボタン・フォローボタンを利用している。（対応版に差し替える）
Google Chromeのデベロッパーツールが便利

Google Chromeの「デベロッパーツール」を利用すると、HTTPS（SSL）とHTTP（非SSL）が混在している箇所を素早く探すことができます。現在開いているページにSSL非対応の部分があれば一覧表示されます。便利なツールなので活用しましょう。

ツールの場所
Google Chrome ＞ 右上メニュー ＞ その他ツール ＞ デベロッパーツール ＞ Console

Google Chromeのデベロッパーツール

7. その他の変更作業

サイト全体のSSL化の作業が完了した後は、アクセス解析ツールやサーチコンソールに登録していたURLをHTTPSに変更しておきましょう。

変更が必要な部分
  • Google Analytics（アクセス解析ツール）に登録したURLをHTTPSに変更する。
  • サーチコンソールにHTTPSのURLで新規登録する。XMLサイトマップも新規登録する。
  • RSSリーダー購読ボタンのURL変更と確認（利用している場合）

8. 作業完了

以上で作業完了です。
お疲れ様でした。

まとめ

WordPressで運営するサイトの全体をSSL化する手順を紹介しました。基本的にレンタルサーバーに標準で用意された機能を利用します。「エックスサーバー」の契約者であれば追加料金なしで利用できます。

独自SSLを導入することにより、WordPressで運営するサイトに対して、サイト利用者とサーバー間の通信がSSL接続で暗号化されます。通信が暗号化されるので、通信の安全性が向上します。

SSLを導入するメリットとして、「Webサイトの改ざん」「通信の盗聴」などからWebサイトを守る効果が期待できます。それに加え、「SEO効果」も若干ではありますが期待できます。Googleは検索エンジンの検索結果において、HTTPSページを優先して表示させることを明言しています。

今後、Webサイトを運営する上で、サイト全体にSSLを適用することが常識になりそうです。急いで導入する必要はありませんが、将来的には必須になりそうな流れです。新規サイトの立ち上げ時、または、Webサイトのリニューアル時にサイト全体をSSL化することを検討してみましょう。