WordPressのHTTPS化:メモ

悩み
悩み

SSL導入でHTTPからHTTPSへの移行作業に際して忘れそうな事柄をメモ。

目新しいことは特に何もないと思います。

構築環境
WordPress4.5.3

前提

今回は前提の提示にあまり意味はありませんが、念のため。

  • WordPress使用
  • XSERVERでCoreSSL契約
  • SNSボタンの数値はとりあえず諦める(Twitter除く)

HTTPS化後のチェック

基本的にChromeの開発者ツールでチェックしましたが、丁寧にエラー箇所を教えてくれるので作業が楽でした。

なおChromeは、例えばHTTPの画像が読み込めないエラー状態でも「緑の錠前」(鍵ではなく錠や錠前ですよね)マークになりますが、Firefoxは「警告付きの緑の錠前」となります。

詳細はmozillaの以下のページで説明されています。

該当箇所を以下に引用します。

緑色の錠前アイコンに灰色の警告マークが付いている場合、そのサイトは安全であることを示します。しかし、Firefox が安全でないコンテンツをブロックしており、必要ない表示がされなかったり、完全には正しく動作しなかったりするかもしれません。詳しい情報は、混在コンテンツのブロック の記事をご覧ください。これは、サイト開発者が解決するべき問題です。

その意味では、開発者ツールを開かずとも錠前マークで作業漏れがわかりますので、Firefoxの方が良い場合もありそうです。

関連記事表示用プラグインのYet Another Related Posts Plugin

Yet Another Related Posts Plugin(以降はYARPPと表記/作業時のバージョンは4.3.1)を利用している場合、そのままでは恐らくHTTPS化が完了できません。

理由は、YARPPのプラグイン内にあるclassesフォルダの中のYARPP_Core.phpにある以下の記述です。


$output .= ($optin) ? '<img src="http://yarpp.org/pixels/'.md5(get_bloginfo('url')).'" alt="YARPP"/>'."\n" : null;

関連記事下に画像を呼び出しているのですが、pixelsというフォルダ名と画像のパス(パスから考えると実際には存在しない画像のはずです)を見ると、おそらくYARPPを使用しているサイトのurlを収集しているのだと思います。

実はこの件、作者の方が以下のフォーラムで返答し対応策を書いています。

該当箇所を引用します。

Sorry to hear about this broken image. This is part of the “opt-in data collection” which I assume you turned on at some point. You can turn off the opt-in in the YARPP settings page if you want that to go away. Thanks!

簡単に書きますと、オプトアウトの仕組みがあるといっています。

ではどこにあるかと言えば、スレッドにも書かれていますが、YARPP設定画面に右側(ブラウザサイズによっては下に落ちているかもしれません)にある、「Get the Most Out of YARPP」のボックスの中にある 「Send usage data back.」です。

が、本来はここにチェックが入っていない状態なら表示がされないはずですが、デフォルトでは表示されてしまっているようです。

そこで、一度チェックを入れてから保存し、その後チェックを外してから再度保存すると、問題の画像が消えました。

最初から表示されている状態は意図的なのかミスなのかわかりませんが、とりあえずオプトアウトさえすればHTTPSに関連する警告は出ません。

Amazonのiframe広告

[2016.11.14追記]======
現在Amazonのiframe広告は最初からHTTPS対応になっているもようです。
したがってHTTPS化のために何もする必要はありません。
=====

Amazonのiframe広告は、iframe部分をHTTPSに書き換えればよいのですが、呼び出す画像がHTTPのため一見どうにもなりません。

ですが、以下のサイトで対応策があり、試したところうまくいきました。

AmazonアソシエイトのiframeバナーをHTTPSページで使う

該当箇所を引用します。

URLの最後に&internal=1をつける

これだけだと分かりにくいと思いますので、詳細は前述のサイトでご覧ください。

古いAdSense

意外と残っていた古いAdSenseで少し躓きました。

新しければ特に手を加える必要も無いのですが、古いとhttp://と書かれており警告がでる原因となります。

記事内のHTTPをHTTPSに書換え

データベースから直接データを抜き出して書き換えた方が、バックアップもとれますし安全ではあります。

しかしながら今回は、何があっても自己責任で済む自分のサイトということで、以前も使ったことがあるプラグインの「Search Regex」を使って一括置換を行いました。

ちょっとこわかったですが、前項のAmazonのパラメーター追加もこのプラグインで置換を行い無事作業を終えました。

HTTPプレフィクスの削除に関する留意点

HTTPプレフィクスを削除して\\からはじまる形にすれば、そのリンクはHTTPSでアクセスしていればhttps://と解釈され、HTTPでアクセスしていればhttp://と解釈されます。

これにより、HTTPS移行作業時に、反映が間に合わないタイミングでユーザーが内部リンク移動を行った際、ページが表示されないというスクが回避できます。

ただし、自サイト以外のリンクにまでこの方法を用いる場合は問題になりかねません。

自サイトがHTTPSで相手がHTTPの場合に、HTTPプレフィクスなしのリンクでアクセスするとHTTPSのエラーとなり、該当のページが表示されず警告がでます。

この警告はかなり強烈なもので、HTTPのページへのアクセス手段がなかったり、画面の見た目的にも閲覧者を不安にさせる見映えをしています。

そのため、外部リンクに関しては以下のいずれかを選ぶ必要があるでしょう。

  • 外部リンクがHTTPSでもアクセス可能かどうかを、すべて事前に調べる
  • 外部リンクのHTTPプレフィクスを変更しない

作業の手間と安全性を考えれば、後者の「変更しない」がよいように思います。

以前に「Search Regex」を使いhttp://で検索して、全てを//に変更するというような記事を見かけたことがありますが、これをやると致命的な問題になりかねないことがお分かりいただけるかと思います。

Twitterのツイート数

公式のボタンからツイート数が消えたため、count.jsoonを導入していますが(詳細は「WordPressでwidgetoon.js と count.jsoon を使ってツイートボタンを設定:メモ」)、HTTPの時のツイート数がHTTPS後にも引き継がれて合算される模様です。

公式ボタンのツイート数の場合は合算されなかったかと思いますので、count.jsoonのおかげでHTTPSに関しては非常に助かりました。

なお、てっきり引き継げないものとばかり思っていましたので、引き継ぎ確認前にHTTPSの方でもドメイン申請をしてしまっており…。

もしかしましたら、HTTPSの方も申請したから合算(正確にはHTTPSとなったURLの取得)されたのかもしれません。

結び

とりあえず今はこんな感じで。

HTTPからHTTPSへの移行に関しては、サイトごとに異なる事情が存在する可能性が非常に高いと思われます。

簡単な作業で取除ける問題もあれば、サイトの根幹に関わるため全体を作り直さないと対応できないという問題もあるでしょう。

HTTPSのサイトにHTTPの画像が読み込まれている混在コンテンツの状態など、中途半端なHTTPS移行は警告表示の原因となり、HTTPのままのほうがまだよいという見映えになりかねません。

HTTPS化に限らず、AMPにしろ単なるWordPress自体のアップデートにしろ、対象となるサイトの構造はシンプルかつ柔軟なほうが安全に思えます。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄