【さくらサーバー&ワードプレス】常時SSL化したサイトにリダイレクト、その他SSL化に関する設定メモ

ワードプレスで常時SSL化をするにあたって、設定方法をここにメモします。

皆様にも参考になられればと思い、記事にしてまとめました。

この設定では、http://あるいはwwwのつかないページから、https://www.ドメイン名にリダイレクトさせるようにする設定方法です。

例:http://〇〇〇.com , http://www.〇〇〇.com , https://〇〇〇.com → https://www.〇〇〇.com

ドメイン名と表示されているところは、ホームページのドメインと置き換えてください。wwwは付けずに、文字をそのまま置き換えます。「xxx.jp」等

ドメイン名※1と表示されている所は、wwwをつけず、「xxx\.jp」(\は¥)のような感じで置き換えてください。

サーバー側の設定(ドメイン設定)

さくらインターネットサーバーコントロールパネルのドメイン設定についてです。

ドメインの設定では、www在りのバージョンと無しのバージョンを必ず追加しておきます。

さらに、www在りと無しのバージョンの両方で、マルチドメインとして使用する(推奨)等にチェックがある場合は、wwwを付与せずマルチドメインとして使用する(上級者向け)にチェックします。

 2. マルチドメインの対象のフォルダをご指定くださいという項目では、www在りと無しの両方のバージョンで同じアドレスを指定してください。

wp-config.phpに記載する設定


if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
    $_SERVER['HTTP_HOST'] = 'www.ドメイン名';
    $_SERVER['SERVER_NAME'] = 'www.ドメイン名';
    $_ENV['HTTP_HOST'] = 'www.ドメイン名';
    $_ENV['SERVER_NAME'] = 'www.ドメイン名';
}
if ($_SERVER['HTTPS']!="on"){
	$url="https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
	header("Location: {$url}");
exit;
}

.httaccessに記載する設定

ごちゃごちゃになってしまい、申し訳ないです。

以下の設定では、主にリダイレクトの設定をしています。

#klog.jp リダイレクト
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_HOST} ^(kougyo\.net)(:80)? [NC]
RewriteRule ^(.*) https://www.ドメイン名/$1 [R=301,L]

RewriteEngine On
RewriteCond %{HTTP_HOST} ^(ドメイン名※1)(:80)? [NC]
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

RewriteEngine On
RewriteBase /
 
RewriteCond %{ENV:HTTPS} !^on$
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule . https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]
 
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

</IfModule>

また、ファイルの圧縮設定等を含む設定をする場合、以下の項目も追加で記載します。

# ETags(Configure entity tags) を無視する設定 <ifModule mod_headers.c>  Header unset ETag </ifModule> FileETag None # Enable Keep-Alive を設定 <IfModule mod_headers.c>  Header set Connection keep-alive </IfModule> # MIME Type 追加 <IfModule mime_module>  AddType text/cache-manifest .appcache  AddType image/x-icon .ico  AddType image/svg+xml .svg  AddType application/x-font-ttf .ttf  AddType application/x-font-woff .woff  AddType application/x-font-woff2 .woff2  AddType application/x-font-opentype .otf  AddType application/vnd.ms-fontobject .eot </IfModule> # プロクシキャッシュの設定(画像とフォントをキャッシュ) <IfModule mod_headers.c>  <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">  Header set Cache-Control "max-age=604800, public"  </FilesMatch>  # プロキシサーバーが間違ったコンテンツを配布しないようにする  Header append Vary Accept-Encoding env=!dont-vary </IfModule> # ブラウザキャッシュの設定 <IfModule mod_headers.c> <ifModule mod_expires.c>  ExpiresActive On  # キャッシュ初期化(1秒に設定)  ExpiresDefault "access plus 1 seconds"  # MIME Type ごとの設定  ExpiresByType text/css "access plus 1 weeks"  ExpiresByType text/js "access plus 1 weeks"  ExpiresByType text/javascript "access plus 1 weeks"  ExpiresByType image/gif "access plus 1 weeks"  ExpiresByType image/jpeg "access plus 1 weeks"  ExpiresByType image/png "access plus 1 weeks"  ExpiresByType image/svg+xml "access plus 1 year"  ExpiresByType application/pdf "access plus 1 weeks"  ExpiresByType application/javascript "access plus 1 weeks"  ExpiresByType application/x-javascript "access plus 1 weeks"  ExpiresByType application/x-shockwave-flash "access plus 1 weeks"  ExpiresByType application/x-font-ttf "access plus 1 year"  ExpiresByType application/x-font-woff "access plus 1 year"  ExpiresByType application/x-font-woff2 "access plus 1 year"  ExpiresByType application/x-font-opentype "access plus 1 year"  ExpiresByType application/vnd.ms-fontobject "access plus 1 year" </IfModule> </IfModule> # Gzip圧縮の設定 <IfModule mod_deflate.c>  SetOutputFilter DEFLATE  # 古いブラウザでは無効  BrowserMatch ^Mozilla/4\.0[678] no-gzip  BrowserMatch ^Mozilla/4 gzip-only-text/html  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html  # 画像など圧縮済みのコンテンツは再圧縮しない  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary  AddOutputFilterByType DEFLATE text/plain  AddOutputFilterByType DEFLATE text/html  AddOutputFilterByType DEFLATE text/xml  AddOutputFilterByType DEFLATE text/css  AddOutputFilterByType DEFLATE text/js  AddOutputFilterByType DEFLATE image/svg+xml  AddOutputFilterByType DEFLATE application/xml  AddOutputFilterByType DEFLATE application/xhtml+xml  AddOutputFilterByType DEFLATE application/rss+xml  AddOutputFilterByType DEFLATE application/atom_xml  AddOutputFilterByType DEFLATE application/javascript  AddOutputFilterByType DEFLATE application/x-javascript  AddOutputFilterByType DEFLATE application/x-httpd-php  AddOutputFilterByType DEFLATE application/x-font-ttf  AddOutputFilterByType DEFLATE application/x-font-opentype </IfModule> #SITEGUARD_PLUGIN_SETTINGS_START #SITEGUARD_PLUGIN_SETTINGS_END # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress

こちらのページのコードを参考にさせていただきました。

私のサイトも、このコードを追加したおかげでPageSpeed Insightsの評価がかなり改善されました!本当に感謝です。

http://から始まるファイルを読み込むときの注意点

ssl化させたサイトのアドレスバーを見ると、上の画像のようなマークが表示されていませんか?

私が試してみたところ、http://から始まるスクリプトファイルや、iframeタグ内のscrでページやファイル名を指定するとこれが表示されました。実際にこれらを削除してみた結果、表示されなくなりました。

また、<a href=””>~</a>内のhrefでhttp://から始まるファイルやページを指定して見た結果、何も問題なく、表示されなくなりました。

簡単に確認する方法

方法は至って簡単です。

ソースページを開いて「Ctrl+F」等でキーワード検索画面を開き、「http://」と入力するだけです。

幾つか見つかると思いますが、もしスクリプトファイルである場合、一度消してみるのもよいかと思います。

私の場合、過去にGoogleのCDNからjQueryを読み込んでいて、そのアドレスが「http://」から始まるアドレスを埋め込んでいて、気づかずに放置していましたが、最近になってからメニューバーが正常に機能していないことと右上に盾マークが付いていたことで問題が発覚しました。「https://」に変更したら盾マークが無くなり、無事にメニューバーも動作するようになりました。

 

 

関連記事

返信を残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください