関西大阪フリーWEBプランナーの独り言、WEB・ショッピングサイト構築、販売促進・販路拡大の戦略をサポート

DTPオペレーター・営業・WEBコンサルタントの経歴を経てWEBプランナーの仕事をしている者のブログです。

WordPress(ワードプレス)をhttps(SSL)化したとき個別記事ページのCSSが適応されずレイアウトが崩れるトラブルの解決法

-さくらインターネットの事例-

WordPressで構築したブログをSSLへ対応し、httpsに移行した時に、トップページは問題なく表示されるのに、個別の記事では「CSSスタイルシート)が適応されずレイアウトが崩れる」トラブルと出会った場合の解決方法です。

 

 


トラブル発生の環境

さくらインターネットさんのラピッドSSLを契約して、SSLhttps)接続にてWordPressサイトを動作させた場合に、下の解決方法の設定を行わないと、CSSのパスが「http」となります。

解決するには

wp-config.phpに下のコードを追記します。

 

  // SSLを伝える
  if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
  $_SERVER['HTTPS'] = 'on';
  $_ENV['HTTPS'] = 'on';
  }

 

これで解決できます。

どうしてこんなことが起きるのか?

さくらインターネットさんのレンタルサーバーの仕様のため、ラピッドSSLの場合は、SSLでの接続であることを明示していない場合は、WordPressSSL接続と判定せずに、http接続と判断してしまい、その結果、CSSのアドレスが http:// となり、CSSが適応されない(レイアウト崩れの)トラブルが発生します。

 

本当に、これは結構記事を探すのにも苦労したので此処にも記載しておきます。

 

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)