WordPressでサイト全体をSSL化したときのURLの落とし穴

WordPressでSSL

以前、サイトにSSLを施すことがあった際に、アドレスバーに表示されるファビコンにエラーアイコンが表示されるページと、そうでないページがあり、つまづいたことがあったので備忘録として残しておきます。

SSLとは

まず、「SSLとは何ぞや?」ということで言葉の意味について。ショッピングサイトやお問合せフォーム等の情報を扱うモノが絡むときには、SSLが施されるケースが多々あります。

Secure Socket Layerの略で、インターネット上で情報を暗号化して送受信できる仕組み。個人情報・クレジットカード情報などの大切なデータを安全にやりとりできます。

引用元 : SSLサーバ証明書ってなんですか?|SSL-総合解説サイト

Yahoo!や楽天等々のログインページなどにアクセスしてみると、当然のごとくSSLが施されていますね。あまり「SSLで安全に情報が保護されている」なんて意識することはないですが…。

URLに「https」が付く

SSLが施されているサイトは、一般的なサイトと違ってURLが「https」から始まりますね。ここでSSLが施されているかが判断付きます。

アドレスバーに鍵マークが付く

SSLが施されているサイトは、アドレスバーに鍵マークが出ます。Firefoxだと以下のような鍵マークが表示されます。

URLの左横の鍵マーク

URLに「https」が付いた上に鍵マーク。これが安心のSSLの証ですね。

WordPressサイトをSSL化してみた

以前、とある案件でサイト全体をSSL化したことによって、壁にぶち当たったことがあります。特にページの見栄えが崩れているわけでもないのですが、アドレスバーに「あれ?」という箇所が。

アドレスバーがビックリマークに…

Firefoxのアドレスバーの左横に気になるアイコンが表示されました。しかも全ページではなくアイコンが出るページ出ないページがまばらと…。URLは「https」になっているのに、アドレスバーのアイコンがビックリマークになる現象に遭遇しました。

URLの左横のビックリマーク

原因は、ページ内のURLに「http」と「https」の混在

ページのURLは「https」ながら、どうもWordPressで生成されているURLの中に「http」である箇所がありました。これがあのビックリマークのアイコンが表示される原因のようです。SSLが施されているページ、つまりURLが「https」のページには、「http」が混在してはダメということですね。

アップロードしたメディアのURLが「http」になっていた

今回のケースでは「メディアを追加」からアップロードした画像などを記事中に配置した際に、そのパス・URLが「http」になっていたこと。

解決策は「http」を全部「https」に統一すること

見ている「https」のページから「http」と書かれている箇所が無くなれば、あのアイコンが表示されなくなります。なので、とにかく混在している「http」を「https」に書き換えること。WordPressを使う際に特に疑うべき個所は以下の3つかと思います。

  1. サイトURLを「https」のURLに変更する
  2. 記事で使われている画像などのURLを「https」に直す

ザッとこれだけの手順でしょうか。使っているプラグインなどにもよりますが、とにかく「http」を「https」に書き換えること。

1. サイトURLを「https」付のURLに変更する

WordPress管理画面の「設定」→「一般」の中にある以下項目を「https」のURLに書き換えます。

  • WordPress アドレス (URL)
  • サイトアドレス (URL)

2. 記事で使われている画像などのURLを「https」に直す

SSLを施した段階で、既に以前から記事が投稿されていた場合には注意が必要です。記事の中で使われている画像の中に、SSL化する前のURL「http」入りのものが含まれている可能性があるからです。

記事内の画像等をもう1度置き直す

これから新しく記事を投稿する際に画像を置く場合は良いのですが、すでに投稿されている記事の中のメディアのURLに「http」が隠れていることがあります。これも地道に「https」に変更していく必要があります。これが結構面倒ですね。

「wp_get_attachment_url」を使っている場合も要注意

テンプレートの中で「wp_get_attachment_url」といった関数を使っている場合、サイトのURLを「https」入りに設定していても「http」のままになっていました。これは、色々な情報サイトで原因が不明といった書かれ方をしていました。ただ、以下のコードを「functions.php」に記述することで「http」から「https」に力づくで置換することは可能です。

SSLが施されている場合には、URLの「http」を「https」に置換する手法ですね。

function fix_ssl_attachment_url($url) {
    if(is_ssl()){
        $url = preg_replace("/^http:/", "https:", $url);
    }
    return $url;
}
add_filter("wp_get_attachment_url", "fix_ssl_attachment_url");

サイト全体をSSL化は予め済ませておくべき

今回のSSL化の際のあれこれは、すでにWordPressをインストールした後に記事をいくつも投稿されている段階で、途中からSSL化したために生じました。予めサイトをSSL化しる予定がある場合には、WordPressがインストールされる段階で既にSSLが施されていると楽ですね。

コメント

  1. […] WordPressでサイト全体をSSL化したときのURLの落とし穴 […]