WordPressで「保護されていない通信」と出る(SSL混在コンテンツ)原因と直し方

目次

SSL証明書は設置済み(https化済み)なのに、この状態になることがあります。ブラウザのアドレスバーに「保護されていない通信」と表示される、鍵マークが付かない、コンソールに「Mixed Content」の警告が出る……といった症状・問い合わせに対して、当記事では原因と対応方法について解説いたします。

当サイト記事 難易度表記について

  • 【難易度:簡単】WordPressの管理画面だけでできる・すぐ試せること
  • 【難易度:普通】少し手間がかかる(念のため、事前にバックアップを取りましょう)
  • 【難易度:やや難しい】FTPや設定ファイルへの操作が必要(これらが分からない場合や、不慣れな場合は実施するかは慎重に検討ください)
  • 【難易度:難しい】専門の知識が必要。場合によっては致命的なトラブルにもなりかねませんので自信がない場合は専門家へご相談を

これは多くの場合、ページ内の要素の一部……画像や、.jsファイル、.cssファイルなどがまだ http://(暗号化なし)で読み込まれている事に起因します。手間ではありますが、ソースコードを丁寧にチェックし原因をつきとめてひとつひとつ修正していく事で解消できます。

まず確認する3つのこと

  1. SSL証明書が有効か。基本的な事ですが、サーバーのコントロールパネルで、SSLが正しく有効になっているかをあらためて確認しましょう。証明書が未設置だったというのはもちろんのこと、期限切れという場合も 正しくアクセスできなくなります。
  2. WordPressのアドレス設定が https:// になっているか サーバー側設定が正しくされていても、WordPress側の設定が未着手という場合もあります(手順は後述)。
  3. サイト内に http:// のまま残っている要素はないか。ソースコードをチェックしたり、ブラウザの開発者ツール(コンソール)を開き、問題のあるURLが表示されていないか確認します(手順は後述)。

この記事には、アドレス設定の変更やデータベースの一括置換など、操作を誤るとサイトに影響する作業が含まれます。 作業の前に必ずバックアップを取り、不安なときは無理に進めないでください。

なお、証明書は入っているのに警告が出る・鍵マークが付かないという症状は、お使いのブラウザによって表示が変わります。さらに表示はブラウザのバージョンによって多少異なりますので当ページの表記と異なる場合もあります。

  • Google Chrome / Microsoft Edge: アドレスバーの鍵マークが情報アイコン(ⓘ)に変わり、「保護されていない通信」と表示されます。
  • Firefox: 鍵マークに警告(三角)マークが重なって表示されます。なお Firefox は、画像など危険度の低い要素を自動的に https:// に読み替えることがあり、その場合は警告が出ないこともあります。
  • Safari: 鍵マークが表示されなくなります(消えます)。

WordPressの設定でサイトアドレスを確認する【難易度:普通】

WordPressの設定がhttpのままになっているだけならば、確認と設定変更は比較的容易です。

「設定 → 一般」の「WordPressアドレス(URL)」と「サイトアドレス(URL)」欄が http:// のままになっていれば、下記を確認のうえ、https:// に変更して保存します。

WordPress 「設定 → 一般」画面スクリーンショット
WordPress 「設定 → 一般」の「WordPressアドレス(URL)」欄を確認しましょう

変更前に必ず確認しましょう:

  • そもそもSSL証明書が有効になっていますか?
    • SSL証明書を設定せずに、WordPressの設定画面でhttpsにしただけでは、https通信になりません。
  • 現在の設定値(両方のURL)を手元に控えておきましょう
    • たった一文字の違い……と油断していると、うっかり誤操作→アクセス不能に。なんて事も。設定値を変更する前に、設定画面の内容をスマホで写真に撮る、スクリーンショットを撮る、などしておくと万全です。

万が一、設定をミスしてWEBサイトがうまく表示されなくなった場合は、後述の「アドレス設定を誤ったとき(wp-config.php での復旧)」を参照してください。

混在コンテンツ(http:// のまま残った要素)を特定する【難易度:普通】

アドレス設定を https:// にしても、記事本文・テーマ・プラグインの中に http:// のままの画像・スクリプト・スタイルシートが残っていると、警告は消えません。これが「混在コンテンツ」状態です。

ブラウザの開発者ツールで確認する:

ページを開き、Windows なら Ctrl + Shift + J、Mac なら Cmd + Option + J でコンソールを開きます。Mixed Content または mixed-content などが表示されていれば、その横に問題のある URL が表示されることが多いです。メッセージをよく見て、どの画像・スクリプトが http:// のままかを特定しましょう。

原因として多いのは次のものです。

  • 記事本文中の画像や埋め込みリンク: サイトを http:// 運用中に投稿した画像は、データベース内に http:// のURLで保存されています。
  • テーマのコード中にある固定URL: テーマファイルの header.phpfooter.php、カスタムCSSに http:// で書き込まれた外部ファイル(フォント・スタイルシートなど)。
  • プラグインが生成するURL: 一部のプラグインが http:// で外部リソースを読み込む場合があります。プラグインを更新すると解消することもあります。

この中で現場でいちばん多いのは、やはり最初の「記事本文中の画像」でしょう。http:// 運用時代に貼った画像のURLがデータベースに残っているケースは非常に多く、ページ数が多ければ多いほど、手作業で直していくのは大変になりますので、下記のような方法で対応しましょう。

混在コンテンツを直す手順

プラグインで一括修正する【難易度:普通】

プラグイン「Really Simple Security(旧:Really Simple SSL)」を使うと、フロントエンドの混在コンテンツを動的に https:// に書き換える設定ができます(wordpress.org で公開中・無料版あり)。インストール後、プラグインの設定画面で混在コンテンツ修正の項目を有効にします。

ただしこのプラグインの場合動的な書き換えのため、データベース内のURLを直接変更するわけではありません。プラグインを停止すると書き換えも止まります。

データベース内のURLを一括置換する【難易度:やや難しい】

記事本文や設定のデータベース(記事や設定を保存している入れ物)に http://(ドメイン) が残っている場合は、一括で https://(ドメイン) に置換します。

ここから先は慣れていない場合は無理に進めないでください。 作業前に必ずデータベースのバックアップを取ってください。

データベースの内容を検索・置換できるWordPressプラグイン「Better Search Replace」などを使用する事で、比較的楽に変更をする事ができます。

  1. プラグインをインストール・有効化した後……
  2. 「ツール → Better Search Replace」を開く
  3. 「検索する文字列」に http://(サイトのドメイン)、「置換する文字列」に https://(サイトのドメイン) を入力
  4. まず「ドライラン(テスト実行)」で変更件数を確認し、問題がなければ実際の置換を実行

作業後は、混在コンテンツの警告が消えているかをブラウザで確認してください。

ただし、テーマやプラグインのファイルに http://ハードコード(直書き)されている場合は、プラグインやデータベース置換では対応できません。テーマ・プラグインの更新で解消されることが多いですが、更新後も残る場合はコードの修正が必要になります。

テーマ・プラグインのハードコードURLを修正する【難易度:やや難しい】

テーマのファイル(header.php など)に http:// でURLが直書きされている場合は、https:// に書き換えるか、//(ドメインを除いたパス) のようなプロトコル相対URLに変更します。

テーマのファイルを直接編集する前に、必ずFTPでバックアップを取ってください。テーマファイルは、WordPress管理画面の「外観 → テーマエディター」からも編集できますが、ファイルを間違えると表示が崩れる場合がありますので、FTPでバックアップ後に、ローカルで作業→アップロードという手順がおすすめです。

http を https へ自動転送もしておきましょう【難易度:普通】

http:// でアクセスしてきた訪問者を https:// へ自動転送すると、入口が一本化されます。多くのレンタルサーバーはコントロールパネルに「常時SSL化」または「HTTPS転送」の設定があり、これを使うのが安全で確実です。

サーバー側の設定で対応できない環境では、.htaccess(サーバーの動きを指示する設定ファイル)に転送ルールを追加する方法もありますが、書き方を誤ると全ページが表示されなくなることがあります。慣れていない場合はサーバー会社のサポートか専門家に相談してください。

アドレス設定を誤ったとき(wp-config.php での復旧)【難易度:やや難しい】

「設定 → 一般」のアドレス変更を誤って管理画面にアクセスできなくなった場合、FTPでサーバーにアクセスし、wp-config.php(WordPressの基本設定が書かれたファイル)に次の2行を追加することで上書き復旧できます。

define( 'WP_HOME', 'https://(サイトのURL)' );
define( 'WP_SITEURL', 'https://(サイトのURL)' );

※ コードをコピーすると引用符が全角(’ ‘)に変わることがあります。動かないときは、半角の ‘ で囲み直してください。

この定数はデータベースの設定より優先されますので、管理画面に入れるようになったら、「設定 → 一般」で正しいURLを設定し直し、表示が正しくできた事を確認の上、再度管理画面の設定を直しましょう。その後、ここで追加した2行を削除しておくことも忘れずに。(残したままにすると管理画面からURL変更ができなくなります)

wp-config.php での上書きを試みても解決しない場合や、データベースのレコードを直接編集する必要が出てきた場合は、誤操作でサイト全体が動かなくなるリスクがあります。フォームからご相談いただく際は、どの操作を行ったか・現在の症状・使用しているサーバーの種類を添えてください。

やってはいけないこと

  • バックアップを取らずにデータベースの一括置換を実行する。置換を元に戻す操作は簡単ではありません。
  • SSL証明書が有効かどうか確認しないまま、アドレス設定を https:// に変更する。証明書が未設置のまま変更すると、サイトにアクセスできなくなります。
  • .htaccess のリダイレクト設定を試行錯誤で書き換える。書き方を誤るとすべてのページが表示されなくなります。

よくある質問

  • SSLを設定したのに、まだ「保護されていない通信」と出ます。
    • 証明書を設置しても、WordPressのアドレス設定が http:// のままだったり、サイト内に http:// のリソースが残っていたりすると警告は消えません。この記事の手順で「アドレス設定の確認」→「混在コンテンツの特定」→「一括置換またはプラグイン修正」の順で確認してください。
  • ブラウザの開発者ツールが難しくて使えません。
    • 混在コンテンツを検出する無料のWebサービスもあり、URLを入力するだけで http:// の要素を見つけられます(外部ツールのため、利用前にプライバシーポリシーをご確認ください)。ただし、ログイン後にのみ表示されるページの検出には使えません。
  • SSLを設定したらサイトが表示されなくなりました。
    • アドレス設定の変更時に誤りがあると起こります。上記「アドレス設定を誤ったとき(wp-config.php での復旧)」の手順で復旧を試みてください。それでも戻らない場合は、操作内容を整理してご相談ください。
  • テーマを更新したら混在コンテンツが出るようになりました。
    • テーマのファイルに http:// で書かれた外部リソースが含まれているケースが考えられます。テーマの開発元のサポートに問い合わせるか、最新バージョンへの更新で解消されることがあります。

※ 本記事は一般的な対処方法の解説です。WordPressやサーバーの構成によって手順や結果は異なります。ファイルやデータベースの操作は、誤るとサイトが表示できなくなることがあるため、作業前に必ずバックアップを取り、ご自身の判断と責任の範囲で行ってください。無理に進めず、専門スタッフや保守契約担当者にご相談ください。ご相談先がない場合は、当サイトへお気軽にご相談ください。

今すぐ相談する(ご相談無料)