公開日:2017年7月25日
ロリポップ!レンタルサーバーで、独自ドメインがあればSSLを使えるようになったので、これを機に運営しているサイト2つ(当サイトとsksksketch)をhttps化しました。本エントリでは、その手順を追っていきます。
1.ロリポップ!レンタルサーバーのユーザー管理画面から申請/2.反映されるまで待つ/3.CSSやスクリプトなど各種内部リンク先の変更、及び表示確認/4.URL、WordPressURLの変更/5.htaccessを使ったリダイレクト設定
ユーザー専用ページの「独自SSL証明書」タブから「証明書お申込み・設定」を選択します。今回使用しているのは無料の独自SSLです。この工程に関してロリポップ!レンタルサーバーでマニュアルが用意されています。
SSL保護申請をしてリロードすると、ロリポップ!レンタルサーバーのユーザー管理画面でステータスが「SSL保護有効」になります。ただし、ここからもうしばらく待たないとサイトはhttpsにはなりません※。
※ステータス変更直後では「アクセス権限を確認してください」のエラーページが出て、サイトが表示されませんでした。
httpsでサイトが表示されるようになっても、まだSSLで保護されたサイトにはなりません。画像、CSS、JavaScriptなどこれまでリンクをhttpで記述していた部分は、httpsまたは相対リンクに書き換える必要があります(すでに相対リンクで記述している場合は修正の必要なし)。
特に投稿については、ひとつひとつ置き換えるのは記事の数が多いと大変な手間になります(ヒイッ)。この工程を短縮するため、プラグインの「Search Regex」を使います。
Search Regexをインストールしたら、ダッシュボードの「ツール」→「Search Regex」を選択します。
「Search Pattern」の入力フィールドには検索文字列を、「Replace Pattern」には置換文字列を入力(コピペがバターいやベター)します。
「Search」ボタンをクリックすると、「Result」欄が表示されます。置換前にここで漏れがないか確認して、OKなら「Replace&Save」ボタンを押します。
Sourceプルダウンメニューで「Post content」を選択していると、WordPressの「投稿」を、「Post excerpt」を選択していると「抜粋」がそれぞれ検索対象になります。
続いて、固定ページやテーマに使っているファイルに関してもパスを書き換えます。これはSearch Regexで一括置換できないので、都度修正します。
ここまで終わったら、一度サイトの表示を確認します。Google Chromeの場合、アドレスバーの左端に「保護されています」と緑色で表示されているはずです(ここまででおよそ1時間半)
続きまして、WordPressとサイトのURLを書き換えます。
WordPressの「設定」タブから「一般」を選択し、「サイトアドレス(URL)」に記載されているアドレスをhttpからhttpsに書き換えます。WordPressアドレスも同様です。
筆者の環境だと、WordPressの「wp-config.php」でWordPressアドレスを設定しているので、入力フィールドがグレーアウトしています。
これを書き換えるには、「wp-config.php」に以下の記述を追加します。
define('WP_SITEURL', '[httpsにした自サイトのWordPressアドレス]');
書き換えたらFTPソフト(本エントリではFileZillaを使用しています)でサーバーに戻しますが、この際にwp-config.phpのパーミッションを緩めておかないと、アップロードできません。アップロード後、WordPressアドレスが変更されているのを確認したら、パーミッションを厳しい設定に戻しておきます。
ここまでの設定でサイトをhttpsにできました。しかし、旧URLでアクセスされた場合はhttpのまま表示してしまうので、httpsにリダイレクトする設定をします※。
※「3.」「4.」は順番を入れ換えても問題ないですが、この工程は必ず他部分のhttps化が終わってから取り組みます。
.htaccessをローカルにダウンロードして、以下の記述を追加してサーバーに戻します。
<IfModule mod_headers.c>
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPS
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
「httpでアクセスしたらhttpsに転送するよ」という記述です。7行目のR=301は「301リダイレクト」(「ずっとURLは変わったままですよ」という指定)を示しています。
ここまで終えてhttp版のサイトにアクセスすると、https版のサイトに転送されるようになります。これで晴れてhttps化は完了です。
仕上げに、Googleアナリティクスやサーチコンソールを設定し直しますが、その工程は次のエントリで。