最終更新日2024年09月19日WordPressサイトをHTTPSで運用することは、もはや必須事項。HTTPSは安全性が高いだけでなく(すべてを暗号化し、プレーンテキストでは通信しません)、信頼を構築し、検索エンジンのランキング要素となり、より正確なリファラルデータを提供します。残念ながら、HTTPからHTTPSに移行したウェブサイトでは、問題が発生することも。その1つが「混合コンテンツエラー」です。HTTP/2のおかげで、暗号化処理に伴うパフォーマンスの問題は大部分が解決されました。Encryptは、無料のSSL証明書を簡単に取得する方法を提供し、業界全体を激変しました。Firefoxなどのウェブブラウザが、HTTPSで動作していないサイトを排除し、潜在的な訪問者により厳しい警告を表示するようになった点です。旧バージョンのTLSを使用している場合、ChromeはERR_SSL_OBSOLETE_VERSION警告を表示します。した警告は、訪問者にもっとも見せたくないものです。このような問題の回避のためにKinstaでは、HTTPからHTTPSに移行する詳細な方法を解説しました。そのプロセスに従っても、混合コンテンツエラーが表示される場合があります。この記事では、WordPressサイトの混合コンテンツ問題を解決する方法をいくつかご紹介します。動画での解説もご用意しています。混合コンテンツエラーとは何か?ユーザーがアクセスしようとしているWordPressサイトが、HTTPSとHTTPのスクリプトやコンテンツを同時に読み込む場合、ブラウザには混合コンテンツエラーが表示されます。HTTPとHTTPSは完全に別のプロトコルであるため、この問題が発生します。サイトをHTTPSに移行した場合、画像やJavaScriptファイルなどすべてのプロトコルは、HTTPSで実行される必要があります。以下に、一部のコンテンツをHTTPで読み込んだ場合に何が起きるのか、いくつかの例を示します。混合コンテンツエラーの例Chromeは現在、ウェブの77%以上に使用されているトップブラウザです。したがってほとんどの訪問者は、以下のような形で混合コンテンツエラーを目にします。Chromeの混合コンテンツエラーもちろん、すべての人がChromeを使用しているわけではありません。以下は、FirefoxでのWordPressサイトの混合コンテンツエラーの表示例です。Edgeでのこの警告の表示例です。Explorerでの表示例です。Explorerはこの警告を最も表示したくない最悪のブラウザの一つで、ポップアップがクリックされるまで、実際にページのレンダリングが中断されてしまいます。これは、どのブラウザを使用している訪問者にも見せたいエラーではありません。エラーを解決する前に、まず、この警告が発生する理由を理解しましょう。混合コンテンツエラーが発生するのか?大部分の混合コンテンツエラーは、WordPressのサイトをHTTPからHTTPSに移行した場合に発生します。これは、いくつかのHTTPのリンクがそのまま引き継がれるために発生します。以下は、その他の原因で警告が発生する例です。新しいサービスやプラグインをサイトに追加した。プラグインやテーマの中には、CSSやJavaScriptへのリンクに相対パス(/style.css)ではなく、絶対パス(http://yourdomain.com/style.css)を使用するものがあります。HTTPでハードコードしたURL(http://yourdomain.com/image.pngなど)で画像を設定している。投稿、ページ、ウィジェット内にある可能性があります。Awesomeなど)のHTTPバージョンにリンクしている。HTTPSではなく、HTTPを使用して動画スクリプトを埋め込んでいる。残念ながら、トラブルシューティングを始めるまで、問題の本当の原因を発見できない場合があります。以上を念頭に、混合コンテンツエラーを解決する、いくつかの方法を紹介します。混合コンテンツエラーを解決する方法(4つのステップ)WordPressの混合コンテンツエラーを解決する、4つの簡単なステップをご紹介します。以下はすでに実施したものと仮定します。SSL証明書のインストールHTTPをHTTPSにリダイレクト(サイト全体)またここでは、開発サイトを例に使用して説明します。どのリソースがHTTPで読み込まれているかを調べるまず、どのリソースが依然としてHTTPで読み込まれているかを確認する必要があります。警告は、サイト全体ではなく、特定の領域で発生している可能性があることに注意してください。DevToolsを起動します。DevToolsは、ブラウザのツールメニューからも起動できます。ChromeブラウザツールメニューのデベロッパーツールHTTPSで読み込まれていないリソースを調べるには、まず確認すべき場所がいくつかあります。1つ目は、「Console(コンソール)」タブです。DevToolsを開いた後にページをリフレッシュして、すべてを正しく読み込んでください。混合コンテンツエラーがあると、赤または黄色でハイライト表示されます。HTTPS.(このリクエストはブロックされました。コンテンツはHTTPSで提供してください。)」という説明が表示されます。これは、HTTPコンテンツを自動的にブロックするようにブラウザが設定されていることを意味します。79からデフォルトで、混合コンテンツのブロックを始めました。最近では、混合画像やメディアを自動アップグレードする機能の展開を開始しています。DevToolsを使用すると、要求された一部の要素が自動的にアップグレードされたことを示す混合コンテンツのメッセージが表示される場合があります。DevToolsコンソールでの、混合コンテンツの表示ここでは、スタイルシートやスクリプトなど、安全でない、混合コンテンツエラーを引き起こす様々な要素があることがわかります。安全でない.jpg画像へのリクエストが行われ、自動的にHTTPSにアップグレードされたこともわかります(【注】これがChrome以外のブラウザの場合、自動的にはアップグレードされません)。DevToolsの「Securty(セキュリティ)」タブも確認します。ここには、安全でないリソースが表示されます。DevToolsのセキュリティ「Network(ネットワーク)」タブでは、ブロックされたリクエストの一覧も表示されます。Padlockのような無料ツールも使用できます。Padlockは、個々のページをスキャンして、安全でないリソースをすべて表示します。Page(ページをテスト)」をクリックするだけで簡単に使え、エラーがあれば表示されます。HTTPS警告をまとめて確認するもし、サイトの他の部分も心配なら、一括して確認した方が良いでしょう。その際におすすめのオプションをご紹介します。Checkを使用すると、HTTPSサイトをクロールし、ブラウザに警告メッセージが表示される前に、安全でない画像やスクリプトを検索できます。1サイトあたり400ページまでクロールできます。Auditツールには、HTTPS/HTTPの混在コンテンツを検出する機能があります。このソリューションにアクセスしているか、マーケティングチームの同僚がアクセスしていれば、是非試してみてください。Checkerは、インストールの必要なデスクトップソフトウェアで、サイトをスキャンできます。大きな変更後の、「安全でない」という警告やコンテンツのチェックに役立ちます。Windows、Mac、Ubuntuで利用可能です。無料プランでは、1回のスキャンで最大500ページまでチェックできます。Fixerは、サイトにインストールするWordPressプラグインで、混合コンテンツエラーにつながるエラーを発見できます。無料で使用でき、エラーを解決する解決も、自動的に行われます。いずれかのツールを使用すれば、サイトの各ページで混合コンテンツエラーが発生していないか、手動で確認する時間を節約できます。潜在的なエラーも含めて徹底的に検証するには、これらのソリューションを組み合わせて使用すると良いでしょう。HTTPリソースがHTTPSでアクセスできるかを確認する次のステップは、HTTPで読み込まれているリソースがHTTPSでもアクセスできるかを確認します。ほとんどの場合、リンクを更新する必要があります。例として、以下の安全でないjQueryスクリプトと.jpg画像で混合コンテンツエラーが発生しているとします。http://ajax.googleapis.com/ajax/libs/jquery/3.31/jquery.min.jshttp://example-site.com/wp-content/50d00acf6e4%2Fpuppy-thumb.jpg?v=1600261043278ここで、ブラウザのアドレスバーに2つのURLを入力し、先頭の「http」を「https」に置き換えてみると、問題なく読み込まれました。サイトで検索と置換を行うだけで対応は済みます。WordPressの検索と置換の実行WordPressで検索と置換を行うには、様々な方法があります。このセクションでは、2つの異なる推奨オプションを説明します。SSLなどのツールの使用はお勧めしません。素晴らしいプラグインですが、長期間こうしたソリューションに頼るべきではありません。URLの更新がベストです(以下で紹介します)。Kinstaのお客様であれば、MyKinsta内からすぐに、検索と置換ツールを使用できます。サイトの「ツール」ページに移動し、「検索と置換」をクリックします。MyKinstaの「検索と置換」ツール次に、「検索」フィールドに、データベースで検索する文字列を入力します。今回は、HTTPドメイン「http://kinstalife.com」を検索します。次に「検索」ボタンをクリックします。検索と置換ツールに、指定した文字列の出現回数が表示されます。「検索後に置換する」ボックスをチェックして、置換処理を続行します。「以下に置き換える」フィールドに、検索した文字列を置き換える文字列を入力します。今回は、HTTPSドメイン「https://kinstalife.com」に置換します。「実行後にキャッシュをクリアする」ボックスは、チェックしたままにしておきます。検索と置換プロセスが完了した後、Kinstaキャッシュは自動的に消去されます。最後に、「置換」ボタンをクリックします。MyKinstaMyKintaでHTTPを検索し、HTTPSで置換する重要:フィールドでは、先頭または末尾に空白を含めないように注意してください。希望しない結果になる可能性があります。Replaceプラグインで同じ作業を行えます。完了後は、プラグインを削除してください。Replace」このツールは、WordPressプラグインディレクトリからダウンロードするか、WordPress管理画面内で検索してください。有効化した後、HTTPドメイン(http://yourdomain.com)を検索して、HTTPSドメイン(https://yourdomain.com)に置き換えてください。ScriptやWP-CLIでも検索と置換を実行できます。WordPressの検索と置換の詳細については、こちらの動画をご覧ください。混合コンテンツエラーが消えたことを確認する検索と置換を実行したら、サイトで混合コンテンツエラーが消えたことを再確認します。サイトのフロントエンドにアクセスして、いくつかのページをクリックし、アドレスバーに表示されるブラウザのステータスインジケーターを確認します。例として使用した開発サイトでは、.jpg画像は解決されましたが、安全でないスクリプトの警告が残っていました。これは、自身のドメインから読み込んでいるリソースに対して検索と置換を実行したためです。jQueryの警告は外部スクリプトによって発生しており、手動で更新する必要があります。コンソール内の混合コンテンツエラーこの場合、スクリプトはWordPressのヘッダー(header.php)に手動で追加する必要がありました。相対URLを使用する必要があるため、//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.jsに更新しました。テーマエディターでWordPressのヘッダにHTTP外部スクリプトを追加したすべての問題は、ほとんどの場合、検索と置換で解決できます。一般に、WordPressサイトにハードコードした箇所が含まれる場合のみ、さらなる問題が発生する可能性があります。プラグインやテーマにハードコードした外部スクリプトがあると考えられ、その原因を突き止めることが困難な場合は、関連する開発者に連絡してみてください。以上で、混合コンテンツエラーの解決には何を確認すればよいのかがわかりました。以下は、HTTPSで正しく読み込まれ、混合コンテンツエラーのないChromeの動作例です。混合コンテンツエラーのないChromeFirefoxも同様のメッセージを出力します。Edgeでの表示例です。Edgeメッセージの文言は、使用するブラウザによって若干異なる場合もありますが、安全な接続を示す通知は表示されるはずです。これで、WordPressサイトでの混合コンテンツエラーを解消できました。Security)を使用してこの問題を解決しないのかと思う方もいるでしょう。HSTSは、サイトがHTTPSで動作している場合に、ブラウザに安全な接続を強制するために作成されました。これは、ウェブサーバーに追加できるセキュリティヘッダで、レスポンスヘッダに「Strict-Transport-Security」として反映されます。HSTSはすべての混合コンテンツエラーの即座の解決策ではありません。HSTSは単にリダイレクトを処理するだけで、混合コンテンツエラーはブラウザそのものの機能です。サードパーティーのサイトがHSTSを有効にするかどうかも制御できません。したがって、常にURL「http://」を更新する必要があります。Jokinen氏がその理由を深く掘り下げています。追加の推奨事項(特殊なケース)Elementorページビルダーを使用している場合、Elementorの設定にアクセスし、サイトのURLを更新して、CSSファイルを新しいURLで再生成する必要があります。完了後は、キャッシュをクリアすると、Elementorの安全でないという警告は解消されるはずです。CDNを使用している場合、CDNゾーンも消去することをお勧めします。まとめ混合コンテンツエラーは、特に、その原因がいくつかある場合には、対処に苦慮します。幸いなことに、この問題を解決する簡単な手順がいくつかあります。ほとんどの場合、単純な検索と置換を行うだけで、混合コンテンツエラーはすぐに解決し、数分でサイトを正常な状態に戻せます。解決しない場合は、ハードコードしたスクリプトが1つまたは2つ残っている可能性があります。エラーを解決するには、それらを見つけて手動で更新するか、対処する開発者を雇う必要があります。混合コンテンツエラーに対してご意見や、何らかの問題があれば、コメント欄からお知らせください。すべてのWordPress専用マネージドホスティングプランに付帯する、実質300ドル以上のエンタープライズレベルの統合により、手間と費用を削減し、サイトパフォーマンスを最大化します。これには高性能CDN、DDoS対策、マルウェア&ハッキング対処、エッジキャッシュ、Google最速CPUマシンが含まれます。長期契約の縛り無し、移行支援あり、30日間返金保証。ご安心の上ご利用ください。プラン一覧をご覧になるか、お客様のご要望について営業までお気軽にお問い合わせください。Twitter.ウェブサイトLinkedInTwitter関連記事とトピック【共用サーバーを超える】WordPress専用マネージドホスティングKinstaのWordPress専用マネージドホスティングは、すべてのプランに比類のないサイトパフォーマンスを実現する、エンタープライズレベルの機能が付帯。投稿タイプページコンテンツタイプ動画もっと詳しく【65種類以上】典型的なWordPressエラーの解決方法(決定版)この記事では、一般的なWordPressエラーを取り上げ、詳細と解決方法を一挙にご紹介します。コメントをキャンセル【コメントに関する方針】皆様のコメントに感謝申し上げます。ご意見がございましたらお気軽にお聞かせください。すべてのコメントが手動でモデレートされ、スパムや宣伝とみなされるものは削除されますので予めご了承ください。メールアドレスが公開されることはありません。※このフォームを送信することにより、米国へのデータ転送を含む、Kinstaの個人情報保護方針に従ったデータ送信など、個人データの処理に同意したことになります。Inc.が所有する登録商標です。Inc.の知的財産です。Inc.による推奨や承認を意味するものではありません。Inc.により認定、所有されておらず、関連会社でもありません。