本日、WordPressで運営する2サイトをようやくhttpsへのSSL化を行いました。当サイトと別サイトを合わせて約1,000記事分も対応するとかなり大変だろうと思いきや、すんなりとSSL化完了。がしかし、「ページの一部が安全でない状態」となり、ここで多少つまづくことに。
無事クリアできましたが、ここでは「ページの一部が安全でない状態のクリア」への対応に焦点をあてレポートします。
前提、SSL化の過程など
まずは、前提、SSL化の過程についてです。SSL化する前は、エックスサーバーとWordPressのテーマとしてSimplicityを利用していたのですが、SSL化する直前にSimplicityと同じく「わいひら」さんのテーマ「Cocoon」に変更しています。
▼さすがにわいひらさん。痒い所に手が届く、かなり扱いやすくブログ記事編集に集中できるテーマです。SimplicityからCocoonに変更しました。
▼エックスサーバー・CocoonでのSSL化は、同じく わいひらさんの以下の記事に頼りっきり。
上記の記事の目次を抜粋させていただき、対応した流れは以下です。（）は私の対応状況です。
- エックスサーバーでSSL設定を行う。（エックスサーバー側でツールが用意されており、20分ほどの待ち時間で完了）
- WordPressの設定からURLを変更する。（こちらは即終了）
- 内部リンクをSearch Regexで全て置換する。（Search Regexは使い慣れていたのですが、なぜか何度もフリーズしたものの完了）
- .htaccessにリダイレクト用のコードを追記する。（汎用ソフトで.htaccessがダウンロードできない状況のため、エックスサーバーのサーバーパネルより対応）
- セキュリティー状態のチェック。（ここでエラーが発生）
「ページの一部が安全でない状態」で対応したこと
こちらもわいひらさんの記事「WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）」に従い対応しました。
Google Chrome、あるいはedgeでチェックする手段もあるようですが、最も簡単そうなFirefoxにて対応しました。
▼URLの前のカギにビックリマークが付き「安全ではない状態」になっています。
この状態ではSSL化した意味がないので早速対応することに。
▼カギをクリックすると以下の子画面が表示されます。うち、赤枠の「詳細を表示」を選択。
やや上に「Firefoxが一部のコンテンツをブロックしていますが、ページ上には安全でないコンテンツ（画像など）が含まれています」と記載されています。
▼別画面にて詳細が表示されます。
「メディア」を選択すると画像のURLが表示されますが、うち「 http://」となっている箇所が「安全でない状態」。これを個別に確認し対応します。
▲私は「https://」もエラーとなっているものと勘違いし、その数から途方に暮れていましたが、実際に「http://」で留まっているのは以下の3箇所のみでした。
2サイト合わせて1000記事もあり、また画像もかなりの量でしたが、3箇所でおさまったのはプラグイン「Search Regex」にて、http://www.kimanagu.comからhttps://www.kimanagu.comに一括変換したおかげです。
エラーの箇所は
- ヘッダー画像
- サイドバーのウィジェットの画像
- 利用しているテーマ「Cocoon」の独自仕様
1,2については、リンク先をhttps://に修正するのみで即対応できたのですが、3の「Cocoon」独自仕様の修正（対応方法の確認）が難航。
▼上記3については、Cocoonのヘッダーが読み込まれエラーとなっていると思われます。
▲▼わいひらさんのどの記事のコメントだか失念したのですが、対応方法らしきものの記載があり、以下の対応でクリアできました。原因は理解できずでしたが。。。
▼WordPress ダッシュボードにある「Cocoon 設定」の「OGP」を選択。
▼OGPの下方にある「ホームイメージ」「画像のアップロード」をクリアすることにより対応できました。
▼ビックリマークがとれ、「保護された通信」となりました。
まとめ
アクセスに支障が出ないよう、本日の朝4時半から2サイト分をSSL化したのですが、Google アナリティクス、Search Consoleの設定も含め、最後のテーマ独自仕様のエラー以外はすんなりと対応できました。これも、わいひらさんの記事をはじめ、エックスサーバー・WordPressでのSSL化の記事があふれているおかげです。みなさん頼りになります。
コメント