Blue-Screeeeeeen.net-youichi7imazekiのDTPメモ-

トップページ » お知らせ » 【ロリポップ!レンタルサーバー】WordPress+httpsサイトにする手順(前:申請から各種設定)

【ロリポップ!レンタルサーバー】WordPress+httpsサイトにする手順(前:申請から各種設定)

公開日:2017年7月25日 

http→httpsに

 ロリポップ!レンタルサーバーで、独自ドメインがあればSSLを使えるようになったので、これを機に運営しているサイト2つ(当サイトとsksksketch)をhttps化しました。本エントリでは、その手順を追っていきます。


目次

1.ロリポップ!レンタルサーバーのユーザー管理画面から申請/2.反映されるまで待つ/3.CSSやスクリプトなど各種内部リンク先の変更、及び表示確認/4.URL、WordPressURLの変更/5.htaccessを使ったリダイレクト設定


1.ロリポップ!レンタルサーバーのユーザー管理画面から申請

 ユーザー専用ページの「独自SSL証明書」タブから「証明書お申込み・設定」を選択します。今回使用しているのは無料の独自SSLです。この工程に関してロリポップ!レンタルサーバーでマニュアルが用意されています。

ロリポップ!レンタルサーバーのユーザー管理画面から申請


2.反映されるまで待つ

 SSL保護申請をしてリロードすると、ロリポップ!レンタルサーバーのユーザー管理画面でステータスが「SSL保護有効」になります。ただし、ここからもうしばらく待たないとサイトはhttpsにはなりません※。

ステータスが「SSL保護有効」に

 ※ステータス変更直後では「アクセス権限を確認してください」のエラーページが出て、サイトが表示されませんでした。


3.CSSやスクリプトなど各種内部リンク先の変更、及び表示確認(一番時間がかかる工程)

 httpsでサイトが表示されるようになっても、まだSSLで保護されたサイトにはなりません。画像、CSS、JavaScriptなどこれまでリンクをhttpで記述していた部分は、httpsまたは相対リンクに書き換える必要があります(すでに相対リンクで記述している場合は修正の必要なし)。


 特に投稿については、ひとつひとつ置き換えるのは記事の数が多いと大変な手間になります(ヒイッ)。この工程を短縮するため、プラグインの「Search Regex」を使います。


 Search Regexをインストールしたら、ダッシュボードの「ツール」→「Search Regex」を選択します。

Search Regex


 「Search Pattern」の入力フィールドには検索文字列を、「Replace Pattern」には置換文字列を入力(コピペがバターいやベター)します。


 「Search」ボタンをクリックすると、「Result」欄が表示されます。置換前にここで漏れがないか確認して、OKなら「Replace&Save」ボタンを押します。

Replace&Save


Sourceプルダウンメニューで「Post content」を選択していると、WordPressの「投稿」を、「Post excerpt」を選択していると「抜粋」がそれぞれ検索対象になります。
検索対象に


 続いて、固定ページやテーマに使っているファイルに関してもパスを書き換えます。これはSearch Regexで一括置換できないので、都度修正します。

 ここまで終わったら、一度サイトの表示を確認します。Google Chromeの場合、アドレスバーの左端に「保護されています」と緑色で表示されているはずです(ここまででおよそ1時間半)

保護されたページ


4.URL、WordPressURLの変更

 続きまして、WordPressとサイトのURLを書き換えます。

 WordPressの「設定」タブから「一般」を選択し、「サイトアドレス(URL)」に記載されているアドレスをhttpからhttpsに書き換えます。WordPressアドレスも同様です。

httpからhttpsに書き換え


 筆者の環境だと、WordPressの「wp-config.php」でWordPressアドレスを設定しているので、入力フィールドがグレーアウトしています。

WordPressアドレスがグレーアウトしている


これを書き換えるには、「wp-config.php」に以下の記述を追加します。

define('WP_SITEURL', '[httpsにした自サイトのWordPressアドレス]');

wp-config.phpを編集


 書き換えたらFTPソフト(本エントリではFileZillaを使用しています)でサーバーに戻しますが、この際にwp-config.phpのパーミッションを緩めておかないと、アップロードできません。アップロード後、WordPressアドレスが変更されているのを確認したら、パーミッションを厳しい設定に戻しておきます。

アップロード後パーミッションを厳しい設定に戻す


5.htaccessを使ったリダイレクト設定

 ここまでの設定でサイトを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アナリティクスやサーチコンソールを設定し直しますが、その工程は次のエントリで。


関連している他の記事

  • 最近の投稿

  • カテゴリー

  • 月別の記事

  • おことわり

     Adobe、InDesign、Illustrator、Photoshop、Acrobatは、Adobe Systems Incorporated(アドビシステムズ社)の米国および他の国における商標または登録商標です。本サイトでは、RおよびTMを省略しております。