/AdSenseの自動広告コード

WordPress SSL化のトラブル・個別記事ページのCSSが適応されない

2019年6月27日ITwordpress

個別記事ページのCSSが適応されないときの対応

レイアウトが崩れているときにするべき対処法

  • 書き出されているhttpをhttpsに書き換える
  • httpを書き出しているプラグインを見つけて停止する
  • テーマを変更する
  • SSL化プラグイン「SSL Insecure Content Fixer」を入れる

静的ファイルのパスをhttpsで参照できるように変更する

個別記事ページのCSSが適応されないときは、画像、JavaScript, CSSファイルなどの静的ファイルのパスを https で参照できるように変更する必要があります。
無料のテーマ・プラグインだどJavaScriptがhttpsに対応していない場合があるので、トラブルが起こりやすいそうです。
書き出されている http を https に書き換えれば、レイアウト崩れは解消されますが、ヘッダー内のJavaScript, CSSファイルから http を探すのは大変です。

SSL化プラグインを使う

プラグイン「SSL Insecure Content Fixer」を使うことで、画像、JavaScript, CSSファイルなどの http を https に簡単に置換できます。
「SSL Insecure Content Fixer」をインストールし有効化すると、下記の設定画面が開きます。

SSL証明書を取得し、WordPressや .htaccess の設定などが終了しており、ヘッダー内の「javascript」「css」の読み込みが「http」のまま変わらない場合は、「非セキュアコンテンツの修正方法」をシンプルより下の方法を選ぶことで、https に変更されます。
私の環境では「ウィジェット」を選んだらすべての http が、https に変更されました。

「特定のプラグインとテーマの修正」と「HTTPS の検出方法」にはデフォルトでチェックが入っているので、そのまま「変更を保存」をクリック。
http が、https に変更されます。

Search RegexよりSSL Insecure Content Fixerは優秀

Search Regexは記事内にある内部リンクや画像の置換はできましたが、ウィジェット内テキストなどは置換対象外です。そのため、ウィジェット内に http の記載がある場合は https に書き換える必要がありました。
SSL Insecure Content Fixerならウィジェット内にも対応しており、すべての http が、https に自動で変更できました。

個別記事ページのCSSが適応されない原因

今思うと、Search Regexを使って、SSL化を行うと http が、https に変更されない箇所がいくつも出てきて、それが悪さをしていたんですよね。最初から、「SSL Insecure Content Fixer」を使っていれば、こんなトラブルは起こらなかったのかなと思いました。

ITwordpress

Posted by 桔梗