初級者~中級者向け

【対策】WordPressでSSL化後にエラーが出たときの対処法は?

文中の説明画像をクリックすると拡大します。

LINEで送る
Pocket

この記事は約7分で読めます。

SSL化したWordPressがエラーを出す原因

WordPressを設置しているサーバーをSSLに対応させると、思わぬエラーが発生して対応に苦戦することがあります。

そのようなエラーにあわないように、SSLに対応したWordPressを運営するベストな方法は、予めWebサーバーをSSLに対応させておき、その状態でWordPressを新規インストールするという方法です。

WordPressでSSLを導入する方法は、こちらをご覧ください。

【知識】SSLって何?WordPressでどうやって導入するの?

しかし実際には、SSL非対応の状態でインストールしたWordPressに対して、運営しながらSSLに対応させたいというケースも多いでしょう。

WebサイトをSSL化させるということを一言で説明すると「Webサイトの内部リンク全てをhttpからhttpsで始まるURLに置換する」ということです。

あるいは、「//」から始まるURLにすることも有効です。これならば、「http://」も「https://」もどちらにも対応することになります。

これだけしっかりできていれば大丈夫なんですが、WebサイトがWordPressで作られている場合、どこをどう編集したらわからない、という場合もあると思います。

WordPressをSSLに対応させるときによく発生するエラーは、「画像」と「JavaScript」が適切に読み込まれていないことが大きな原因です。

まずはこの2つから見ていきましょう。

SSLの設定エラー1:画像の読み込みミス

画像を読み込む時に使うimgタグのsrc属性を記述する際に、「http://」から始まるパスのままだと、SSLでアクセスした時にエラーが発生します。

Google Chromeの開発ツール(F12)ではこのような表示になります。

「ページそのものはHTTPSで表示されているけど、画像は安全ではないhttpで読み込まれていますよ」という内容です。

SSLを使用する目的は、Webサーバーとブラウザの間の通信を暗号化することです。

しかし、画像のパス(画像のファイルの場所の指定)が「http://」で始まっていると、その通信だけ暗号化されません。そのことを訪問者にお知らせするために、安全でない記述に関してエラーが表示されるのです。

HTMLの記述例としては、以下のような状態です。

【HTML NGの例】

<img src="http://www.example.com/logo.jpg">

【HTML OKの例】

<img src="https://www.example.com/logo.jpg">

NGの例とOKの例の違いは「http」と「https」の違いのみです。このように1文字違っているだけでエラーになってしまうのです。

ただ、画像のパスが「http://」で記述されていても、エラーを表示させつつ、画像そのものはブラウザに表示されてしまいます。ですので、画像のパスの設定ミスは気づきにくいエラーでもあります。

imgタグは、WordPressのテンプレートファイルの中だけでなく、投稿や固定ページの中に記載されているケースがあります。

文字列の一括置換プラグインなどを使って、「http://」から「https://」へ一括置換するという方法もありますが、やり直しができないので、慎重に行う必要があります

検索置換のプラグインについては、こちらをごらんください。

【有用】WordPressで文字列を検索して一括置換するプラグイン

SSLの設定エラー2:JavaScriptの読み込みミス

画像と同じ理由ですが、JavaScriptを読み込む時に「http://」から始まるパスのままですとエラーが発生します

画像と違う点は、JavaScriptが「http://」で読み込まれていると、読み込みそのものがブロックされてしまうという点です。

原因がJavaScriptのときは、Google Chromeの開発ツール(F12)ではこのようなエラーが発生します。

「JavaScriptは、HTTPSで読み込む必要があるのでブロックしました」という内容です。

JavaScriptは、単純な画像とは違ってプログラミング言語なので、設定エラーが存在する場合、思わぬ脆弱性につながる可能性があります。そのためブロックされてしまうのだと思われます。

JavaScriptは、Webサイトにアニメーションやちょっとした機能を追加する時に使用されます。読み込みがブロックされてしまうと、Webサイトの表示が大きく崩れたり、うまく動作しなくなったりします。

具体的な修正方法は、imgタグの場合とよく似ています。JavaScriptはscriptタグで読み込まれています。

【HTML NGの例】

<script src="http://www.example.com/jquery.js">

【HTML OKの例】

<script src="https://www.example.com/jquery.js">

imgタグの時と同様に、「http://」から「https://」へと修正します。

scriptタグは、WordPressのテーマフォルダの中にあるheader.phpfooter.phpに記述されているケースが多いです。

もしJavaScriptのエラーが発生したら、header.phpやfooter.phpの中身の確認から始めるとよいでしょう。

プラグインを使って簡単にSSL対応させる

「http://」から「https://」への置換を手動で行う方法を紹介してきましたが、WordPressのSSL化をプラグインで行う方法も紹介します。

Really Simple SSL

Really Simple SSL】

Really Simple SSLは、管理画面からインストールできるプラグインです。プラグインをインストールし設定画面を表示させます。

設定画面にあるボタン「はい、SSLを有効化します。」をクリックするだけで、サイト全体がSSLに対応させることができます。

セッティング画面もありますが、特に変更する必要はありません。先ほどのボタンをクリックするだけで、SSLに対応させることができます。

Really Simple SSLでは、「http://」でアクセスしてきた訪問者に対して、「https://」のアドレスへ転送する機能(リダイレクト)もあります。

SSL Insecure Content Fixer

SSL Insecure Content Fixer

SSL Insecure Content Fixerも、WordPressの管理画面からインストールできるプラグインです。このプラグインでは管理画面上で細かい設定が可能です。

様々な設定が可能ですが、基本的にデフォルトのままで大丈夫です。

このプラグインは、HTTPとHTTPSが混在している環境を自動修正してくれるプラグインです。

さきほど手動で「http://」から「https://」へ修正する方法を紹介しましたが、SSL Insecure Content Fixerをインストールして有効化すれば、そのような作業を行う必要なく、プラグインが自動的に調整してくれます。

 

まとめ

  • WordPressをSSL化した時のエラーの原因は、URLの設定が間違っているから。
  • HTTPS化するソースコードは、imgタグとscriptタグのsrc属性。
  • プラグインを使えば、ソースコードの修正なしで「https://」に書き換えてくれる。
  • 修正時に「//」から始まるURLにすることも有効。
LINEで送る
Pocket