【さくらインターネット】SSL化でWordPressのレイアウトが崩れた時の対処法

WordPress

さくらインターネットでは、WordPressをSSL化(https化)するとトップページ以外のレイアウトが崩れてしまうことがあります。

これは、さくらインターネットの仕様によるもので、トップページ以外でCSSが効かなくなるために起こります。

私も最初は原因が分からずにあせりまくりでした・・・。

というわけで解決方法です。

SSL化によるレイアウト崩れを直す対処法

コードを貼れば一発で解決できますよ!

この現象が起こった時は、次のコードを「wp-config.php」に加えることで対応できます。

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
 $_SERVER['HTTPS'] = 'on';
 $_ENV['HTTPS'] = 'on';
}

くわしい手順を紹介します。

コードを貼る手順

手順1

さくらインターネットの「サーバコントロールパネル」で、左メニューにある「ファイルマネージャー」をクリックします。

さくらのサーバコントロールパネル ファイルマネージャー

手順2

WordPressがインストールされているフォルダを開き、「wp-config.php」を開きます(ダブルクリックでOKです)

「wp-config.php」を開きます

手順3

画面の左下にプレビュー画面が出ますので、「鉛筆マーク」をクリックします。

「wp-config.php」のプレビュー画面

これで「wp-config.php」を編集できるようになります。

手順4

「wp-config.php」の先頭のほうに次のコードを追加します。

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
 $_SERVER['HTTPS'] = 'on';
 $_ENV['HTTPS'] = 'on';
}

 

入れる位置がややこしいのですが、このように<?php の後ろに入れればOKです。

SSL化によるWordPressのレイアウト崩れ「wp-config.php」でコードを入れる位置

手順5

このまま保存をします。サイトをチェックして、レイアウトが直っていることを確認してみましょう。

もし直っていない場合は、ページを更新する、またはキャッシュを消して再確認をしてみましょう。コードの記述に間違いがなければ、これで反映されますよ。

反映されないときは、まず更新&キャッシュの消去ですね!

さくらの仕様について

SSL化(https化)した際にレイアウトが崩れるこの現象は、さくらインターネットの仕様によるものです。

この仕様によって、トップページ以外が次のように処理されます。

  • httpsからhttpへリダイレクトされてしまう
  • リダイレクトされたページはCSSが反映されない

これをリダイレクトさせないようにするのが、先ほどのコードです。

ちなみにこのコードは「さくらインターネット用」のものですので、他社のレンタルサーバでは使えません。

まとめ

さくらインターネットでSSL化(https化)した時に、WordPressのレイアウトが崩れた時の対処法でした。

レイアウトが崩れた時は驚きますが、コードの追加だけで対応できますので、落ち着いて対処すれば大丈夫ですよ。

 

WEB関連では、こんな記事もありますよ!
さくらの「無料SSLサーバー証明書」で認証が失敗した時の手順
サイトをSSL(https://)化するために、さくらで無料SSLサーバー証明書「Let’s Encrypt」に申し込んでみました。 ところが、いきなり認証に失敗してしまいました。 再登録でき...
サーチコンソールの「アドレス変更」で先に進めないときの対策方法
先日、サブサイトのアドレス(URL)を、さくらのサブドメインから独自ドメインに変更しました。 dairy.rusk.to → photor3.com とガラッと変えたのですが、Googleサーチコ...
SSL化に便利!「Search Regex」でURLの置き換えをしてみよう
サイトをSSL化したり独自ドメインにすると、URL(アドレス)が変わります。 その際に面倒なのが「サイト内の別ページへのリンク」の置き換えです。 手動でやってもいいのですが、私の場合は数千のリ...