WordPressにSSLを追加してHTTPからHTTPSに移行する

WordPressサイトにSSL証明書がない場合、すべての訪問者は「サイトが安全でない」というメッセージを受け取ります。
最悪の場合、訪問者はこの時点で即座にあなたのウェブサイトを離れ、別の場所を探すでしょう。この記事では、より良い検索結果を得て、訪問者のデータを攻撃者に盗まれないように保護するために、WordPressウェブサイトをHTTPからHTTPSに移行します。

動画:WordPressにSSLを追加する方法

WordPressにSSLを追加する方法に関するこの記事を読む代わりに動画を見たい場合は、この記事全体を動画として視聴できます:

このような動画をもっと見たいですか?
私たちの YouTubeチャンネルをご覧ください。

WordPressサイトを訪問する際、訪問者は購入を行って支払い情報を提供する場合でも、単にウェブサイトにログインする場合でも、さまざまなデータをあなたと共有します。送信されるデータを保護するには、ウェブサイトのサーバーと訪問者のブラウザーの間に安全な接続を確立する必要があります。

ここでSSLとHTTPSが登場します。

HTTP、SSL、HTTPSという用語の定義

多くの人がまだHTTPHTTPSSSLを区別するのが難しいと感じているため、SSL証明書を有効化してインストールする前に、これらの用語を簡単に説明したいと思います。

すでに精通している場合は、次の章に直接ジャンプできます。

HTTPHypertext Transfer Protocolの略で、データを転送するためのプロトコルです。主に、WordPressサイトなどのWorld Wide Webからウェブサイトを訪問者のウェブブラウザーに読み込むために使用されます。

SSLSecure Sockets Layerの略で、インターネット上のデータ送信を保護するための暗号化プロトコルです。固有のSSL証明書は各ウェブサイトを識別できます。

HTTPSHypertext Transfer Protocol Secureの略で、前述の2つのプロトコルを組み合わせたものです。SSL証明書を使用して、HTTPSプロトコル内で2つの通信パートナー(A.あなたのWordPressサイトとB.訪問者のブラウザー)の保護された識別と認証が行われます。次に、プロトコルはセッションキーを交換します。HTTPSは次に、そのキーを使用してユーザーデータを暗号化します。このようにして、WordPressサイトと訪問者のブラウザーは安全にデータを転送できます。

SSL証明書が必要な理由

2つの単純な理由から、SSL証明書の有効化と使用に時間を投資する必要があります。

  1. 地域の法的状況によっては責任を問われる可能性のある、訪問者のデータを盗難から保護します。
  2. SEOとも呼ばれる検索エンジン最適化は、可能な限り厳格で適切な検索結果を提供するプロセスです。Googleは最も関連性が高く適切な検索結果を提供したいので、SSL証明書のないウェブサイトの順位を大幅に低くします。

さて、理論的な背景知識はこれくらいにして、実装を開始しましょう。

SSL証明書が利用可能かどうかを確認する

最初のステップは、ウェブサイトでSSL証明書が利用可能かどうかを判断することです。

これを確認する簡単な方法は、元のHTTP URLであるhttp://your-site.comの代わりにhttps://your-site.comを入力することです。URLバーの左側に南京錠が表示され、クリックすると証明書に関する詳細情報が表示されるはずです。

HTTPSリンクのURLバー
Enter https://your-site.com instead of …
HTTPリンクのURLバー
… http://your-site.com

SSL証明書が利用可能

このプロセスが機能する場合、すでにアクティブなSSL証明書がありますが、WordPressサイトはそれを使用していません。誰かがhttps://リンクを介して明示的にページを呼び出した場合にのみ有効になります。

次のステップでは、WordPressサイトでSSL証明書を正しく設定する方法を学びます。

SSL証明書が利用できない。

このプロセスが機能せず、まだhttp://リンクに到達して「安全でない」というエラーメッセージを受け取る場合、httpsを介してWordPressをセットアップする前に実行できる2つの手順があります:

ステップ1: 一部のホスティングプロバイダーは、ドメイン用のSSL証明書を提供していますが、まず手動で有効化する必要があります。

SSL証明書を有効化する手順は、プロバイダーによって異なります。まず、ホスティングプロバイダーのダッシュボード(多くの場合cPanel)にアクセスし、SSL項目を検索します。

プロバイダーによっては、SSLステータスの下のAuto SSLオプションを実行できるようになり、SSL証明書をチェックして有効化します。

SSLステータス
The SSL Status

他のプロバイダーは、無料のSSL証明書を提供する非営利団体Let’s Encrypt,からのSSL証明書をサポートしています。

「Let’s Encrypt」を検索してください。

Let's Encrypt証明書。
The Let´s Encrypt

ステップ2: SSLというサブアイテムが見つからない場合、ホスティングプロバイダーは無料のSSL証明書を提供していません。

ホスティングプロバイダーのサポートに連絡し、SSL証明書のコストについて問い合わせてください。多くのホスティングプロバイダーは、SSL証明書に年間最大60ドルを請求します。この場合、プロバイダーの変更が意味をなすかどうかを判断してください。

ホスティングプロバイダーに連絡する
Contact your hosting provider.

WordPressにSSLを追加する方法

httpsの接続を手動でセットアップすることは、永続的でパフォーマンスが最適化されたソリューションです。wp-staging.comでも同じ方法を使用しているので、SSL WordPressプラグインを使用する代わりに推奨される方法です。ただし、この記事では、それでも試してみたい場合にプラグインソリューションも紹介します。

まず、設定 > 一般に移動します。そこから、http://をhttps://に置き換えて、WordPressとサイトのURLアドレスフィールドを更新します。

WordPressとサイトのURLアドレスフィールド
WordPress and site URL address fields

設定を保存すると、WordPressがログアウトし、再度ログインするように求める可能性があります。

.htaccessファイルの調整

次に、.htaccessファイルをカスタマイズして、すべてのトラフィックをHTTPからHTTPSにリダイレクトするルールを設定します。このファイルには、cPanelに基づくことが多いホスティングプロバイダーのダッシュボード、またはFileZillaのようなFTPツールを介してアクセスできます。

.htaccessファイルを更新
Update .htaccess File

これを行うには、.htaccessファイルを開き、次のコード行を追加します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

Nginx.confファイルの調整

Nginxサーバーを使用している場合は、このコードをNginx.conf設定ファイルに追加します:

server {
listen 80;
server_name example.com www.example.com;
return 301 https://example.com$request_uri;
}

https://your-site.comをあなたのドメイン名に置き換えることを忘れないでください。

wp-config.phpファイルの調整

WordPress管理エリアまたはログインページでSSLとHTTPSを強制したい場合は、wp-config.phpファイルでSSLを設定する必要があります。

wp-configファイルを編集
Edit wp-config File

wp-config.phpファイル内の「That’s all, stop editing!」という行の上に、次のコードを追加するだけです:

define('FORCE_SSL_ADMIN', true);

これで、ウェブサイトはSSL / HTTPSを使用するように完全に設定されました。

WordPressデータベースの混在コンテンツエラーの修正

SSL証明書を設定し、すべてのトラフィックをHTTPS経由でルーティングすることで中間目標を達成しましたが、WordPressサイトでいわゆる混在コンテンツエラーが発生する可能性があります。

httpからまだ読み込まれている画像、スクリプト、スタイルシートなどのソースが、これらの混在コンテンツエラーを引き起こしています。

混在コンテンツエラー
Mixed Content Errors

この場合、ウェブサイトのアドレスバーに安全な南京錠の記号が表示されず、ブラウザは安全でないスクリプトとリソースを自動的にブロックし、ウェブサイトにアクセスできなくなる可能性があります。したがって、警告付きの南京錠の記号が表示されます。

Google Developer Tools

開発者ツールを使用して、安全でないhttpプロトコル経由でまだ提供されているコンテンツを判断できます。ChromeでF12を押すか、右クリックして「検証」を選択することで、これらのツールにアクセスできます。次に、上部のメニューで「コンソール」タブを呼び出します。コンソールタブは、混在コンテンツエラーを警告として表示します。

Chrome開発者ツール
Chrome Developer Tools

前述のとおり、これらのエラーメッセージのほとんどは、画像、iframe、画像ギャラリーに基づいています。ただし、WordPressプラグインやテーマが関与するスクリプトやスタイルシートに関するエラーメッセージが表示されることもあります。

Better Search Replaceプラグイン

これらのエラーのほとんどは、WordPressデータベースを通じて修正できます。これを行うには、データベース内のhttpで始まる古いウェブサイトURLの言及をすべて見つけて、httpsで始まる新しいウェブサイトURLに置き換える必要があります。

これらすべての文字列を置き換えるための最も簡単なツールは、Better Search Replaceプラグインです。WordPressのサイドバーメニューを開き、プラグインをクリックし、新規追加をクリックします。

Better Search Replaceプラグイン
Better Search Replace Plugin

有効化後、ツールタブに移動し、Better Search Replaceを選択します。

検索フィールドに、http://を含む古いウェブサイトURLを入力します。置換フィールドに、https://の新しいウェブサイトURLを入力します。

その下には、WordPressデータベーステーブルのリストが表示されます。完全な更新を確実にするために、それらをすべて選択してください。

Better Search Replaceフィールドとデータベーステーブルを選択
Better Search Replace Fields and Selete Database Table

最後のステップは、「ドライランとして実行しますか?」オプションの横のチェックボックスをオフにし、「検索/置換を実行」ボタンをクリックすることです。

Better Search Replace「ドライランとして実行」
Better Search Replace “Run as dry Run”

プラグインはデータベースをスキャンしてhttp:// URLを検索し、それらをhttps://に置き換えます。処理時間はデータベースのサイズによって異なります。完了すると、混在コンテンツエラーが解決されるはずです。

テーマとプラグインに関する混在コンテンツエラーの修正

この時点で開発者ツールのコンソールに他のエラーが見つかった場合、これらの混在コンテンツエラーはWordPressのテーマまたはプラグインファイル内にあり、通常はハードコードされた文字列として存在し、データベース内の検索と置換プラグインによって置き換えることができなかったことを示しています。

テーマとプラグインのエラー
Theme and Plugin Errors

WordPressのコーディング標準に従う適切なWordPressテーマまたはプラグインは、通常そのような問題を引き起こさないことに注意してください。したがって、それでもそのような混在コンテンツエラーが発生する場合は、コードに手動で変更を加えたかどうかを検討してください。その場合は、それに踏み込んで、特定のプラグインまたはテーマファイルのコードベースでhttp://のすべての出現箇所をhttps://に変更する必要があります。

WP STAGINGで安全なトラブルシューティング環境を作成する

本番サイトで何も壊さずに残りのエラーを解決し、すべてが機能するかどうかをテストするには、開発目的でウェブサイトのコピーを作成できる無料のプラグインWP STAGINGを見てください。

 WP Stagingプラグインをインストール
Install WP Staging Plugin

リポジトリからプラグインをインストールして有効化します。WP Stagingで、ステージングサイトに移動し、ステージングサイトの作成をクリックします。

WP Stagingを使用してステージングサイトを作成

次に、ステージングサイトの名前を入力し、不要なテーブルやファイルをスキップします。詳細設定で追加の調整を確認し、「クローン開始」をクリックして完了します。

クローン開始ボタン

最後に、ステージングサイトが使用可能であることを知らせるポップアップが表示されます。

WP Stagingを使用してステージングサイトが正常に作成されました

本番サイトに戻り、リポジトリからReally Simple SSLプラグインをインストールして有効化します。

Really Simpleプラグインをインストール

有効化後、設定 > SSLに移動します。プラグインはhttps接続を自動的に認識し、混在コンテンツエラーを修正します。プラグインは出力バッファ技術を使用します。この技術は、サイトの読み込み時にHTTPコンテンツを置き換えるため、WordPressサイトのパフォーマンスと速度に悪影響を与える可能性があります。この影響は最初のページが読み込まれるときにのみ発生し、キャッシュプラグインを使用している場合は最小限に抑えられます。

プラグインは問題なく無効化できると言っていますが、その記述は100%正確ではありません。プラグインを無効化すると再び混在コンテンツのエラーが発生するため、プラグインは常にアクティブのままにしておく必要があります。したがって、これは一時的な解決策に過ぎません。

これ以上エラーがないことを確認する

ステージングサイトに戻ります。Google開発者ツールのコンソールからエラーメッセージを表示および編集することで、問題を解決してみてください。これが機能しない場合は、WordPressのテーマを変更し、エラーメッセージがまだ表示されるかどうかを確認します。それが役に立たない場合は、ステージングサイト上のすべてのプラグインを無効化し、プラグインごとに有効化し、エラーメッセージがいつ再表示されるかを確認します。

エラーを修正した後、本番サイトで同じ手順を繰り返します。

残っている混在コンテンツエラーはありません
No Mixed Content Errors Left

これで、「Really Simple SSL」プラグインを無効化し、混在コンテンツエラーが消えたかどうかをコンソールで確認できます。

今日のトラブルシューティングはこれで十分です。

おめでとうございます、WordPressサイトをHTTPからHTTPSプロトコルに正常に移行しました!

関連記事

Rene Hermenau

著者: Rene Hermenau

著者について: René Hermenau は WP STAGING の創設者です。WordPress のバックアップ、ステージング、移行、データベース処理、安全なデプロイメントワークフローに取り組んでいます。