検索エンジン最大手のGoogleが、ウエブサイトが常時HTTPS化(SSL化)することが検索順位に影響する決定要因にすると発表したことから、一般人が作っているサイトもHTTPS化(SSL化)しないと…という流れになっています。

で、【さくらインターネット】無料SSL証明書「Let’s Encrypt」を使ったHTTPS化の手順で書いた通り、さくらインターネットでも無料でSSL化できるようになりました。

…しかし、トップページ以外の下層ページでレイアウトが崩れるという事態が！！

ソースを見てびっくり！CSSとjavascriptが反映されていない

レイアウトが崩れているページを開いて、「Ctrl」キーと「U」キーを同時に押します。すると、ソースコードが見られます。

↓これは、直した後なので「https://」から始まっていますが、なんと、これが、信じられないことに 「http://」のままになっているのです！！！

原因は「さくらのレンタルサーバ」の仕様

原因は、「さくらのレンタルサーバ」の仕様により、HTTPSからHTTPにリダイレクトされている、というコトなのです。

仕組みはこちら↓のページに詳しく書かれています。
さくらのレンタルサーバでHTTPS(SNI SSL)な独自ドメインのWordpressサイトを構築する際の注意点(Qiita)※外部サイトです

というわけで、さくらインターネットの場合

HTTP_X_SAKURA_FORWARDED_FOR

という文字列を判別したら、HTTPSにするように設定するのです。

wp-config.php　と　.htaccess　の2つのファイルに追記を行います。

※作業前に必ずバックアップを取ってください。失敗するとサイトが見られなくなります。もし失敗してサイトが見られない事態になっても、当サイトは責任を負いません。

wp-config.phpの追記

wp-config.phpの冒頭に、以下

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

をコピペします。

// ** MySQL 設定 - こちらの情報はホスティング先から入手してください。 ** //

の前くらいがいいかな、と思います。
wp-config.phpは、Wordpressをインストールした直下のフォルダに格納されています。

.htaccessの追記

.htaccessの冒頭に、以下

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://ドメイン名/$1 [R=301,L]
</IfModule>

をコピペします。(「ドメイン名」の部分は、ご自身のドメインを記載します)

これで、表示が直りました！

【2018.04.01　追記】
※バックアップでプラグイン「BackWPup」を使っている人、試しにここでジョブを実行してみてください。もしも実行できなかったら、このページの最下部に書いてある「追記」をご覧ください。

修正されているかどうかチェックするには

表示が崩れていたページを開き、「Ctrl」と「U」キーを同時に押します。

すると、ソースコードが見られるので↓、styleseetのところが「https://」から始まっていれば大丈夫です。

さくらインターネットの場合、HTTPS化すると、このようなトラブルに遭う場合が多い(遭わない人もいるのですが…)ので、忘備録としても記事にしておきました。

参考になれば幸いです。

追記：さくらでHTTPS化をした後に、BackWPupが上手く作動しなくなった場合

具体的には「ジョブが開始されましたが10秒間応答しません。インフォメーションを確認してください」というエラーメッセージです。

この場合、先ほど追記した.htaccessにもう少し追記しなければならないようです。

.htaccessの冒頭は、以下のようにするとBackWPupが作動するようになりました。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_URI} !^/wp-cron.php$
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://ドメイン名/$1 [R=301,L]
</IfModule>

※作業前に必ずバックアップを取ってください。失敗するとサイトが見られなくなります。もし失敗してサイトが見られない事態になっても、当サイトは責任を負いません。

私は、こちらのサイトを参考にしました。
「さくらサーバSSL化後、BackWPup が動作しない場合の解決コード」(reach-rh.comさまのサイト)

さくらのSSL化は、証明書を手に入れ手順通りでうまくいく場合と行かない場合があるようです(私も2つサイトを持っていたのですが、1つはうまくいったのですが、ここはうまくいかずにかなり苦戦しました。

上手くいかない場合は、いろいろ手動で追記したりしなくてはいけないので大変です…
私も大変でした。この記事がどなたかの参考になれば幸いです。