WordPress サイト運営

意外に簡単?WordPress環境のSSL化 (エックスサーバー)

投稿日:2017年7月13日 更新日:

エックスサーバーでは無償で独自SSLを使用できます。

近年、あらゆるサイトがSSL化しているので、本サイトもSSL化してみました。

ついでに手順を記録しておきます。

実施した際、本サイトは複雑な構造を持っていなかったからだとは思いますが、結構簡単でした。

1.SSL設定@Xserver サーバーパネル

SSLの設定をXserverサーバーパネルから行います。待ち時間はありますが、簡単手順です。エックスサーバーの仕組みで勝手にやってくれるので、ほぼクリックだけで終わります。(素晴らしい)

1.1. ”Xserverサーバーパネル”を開く

エックスサーバーのインフォパネルからサーバーパネルを開きます。

1.2. ”ドメイン”枠の”SSL設定”をクリック

”SSL設定”をクリックして、SSL設定画面へ移動します。

1.3. SSL化したいドメインの”選択する”をクリック

所持しているドメインがリストされますので、SSL化したいドメインの右の”選択する”をクリックします。

1.4. ”独自SSL設定の追加”タブから”独自SSL設定を追加する(確定)”を押下

最初、”SSL設定”のタブが選択されているので、”独自SSL設定の追加”タブを選択(クリック)します。

ドメインが正しいことを確認し、”独自SSL設定を追加する(確定)”ボタンをクリックします。この際、”設定対象ドメイン”、”サイト”が正しいかどうかを今一度ご確認ください。

また、CSR情報は無くても良いと思います。(エックスサーバーのマニュアルにも無くて良いと書いてあります)

1.5. 1時間ぐらい待つ

1時間ぐらいかかるという表示がでるので1時間程待ちます。実際30~40分あれば完了すると思います。

完了後に”https://<あなたのドメイン名>”でアクセスできるようになります。

1.x. 証明書の更新

証明書は90日有効です。有効期限の30日前(つまり60日後)に自動更新されます。何らかの理由で自動更新に失敗した場合はメールで通達が来るようです。

1.6. WordPress URL設定の変更@ご自分のドメイン

“WordPress アドレス (URL)”と”サイトアドレス (URL)”を変更します。(ご自分のドメインのWordPress設定画面からの変更です)

“設定”>”一般” から変更できます。現状はどちらも”http://”ではじまっていますので、“https://”に変更します。

変更後に“変更の保存”を押下してください。

2.リンクの置換

現在、”https://<あなたのドメイン名>”でアクセスできますし、自分の投稿は何事もなく参照できるはずです。

しかし、画像、サイト内リンクはまだ”http”で記載されたままで、完全にSSL化されていません。

完全にSSL化されていないとブラウザが信頼できないと判断してしまい、SSL化した意味がなくなってしまいます。(寧ろ怪しいサイトと思われるかもしれません)

そこで、投稿と固定ページに存在する”http”を”https”に置換する作業を行います。これには”Search Regex”というプラグインを使います。

デフォルトではインストールされていないプラグインですので、インストールしてから、置換作業をします。(WordPress設定画面で行います)

2.1. Search Regex の検索

”プラグイン>新規追加”から、”Search Regex”を検索します。

右側のペインに検索できる画面が出てきますので、”Search Regex”を入力します。(入力と共に検索されます)

“お使いのバージョンのWordPressではテストされていません”と出ています。この手順を確認した環境はWordPress4.8でしたが問題なく使えています。

尚、使用したSearch Regexのバージョンは”1.4.16”です。

2.2. Search Regexのインストール

見つかったら、”今すぐインストール”ボタンを押下します。

2.3. Search Regexの有効化

インストールが終わると”今すぐインストール”のボタンが”有効化”のボタンに変わりますので、”有効化”のボタンを押下します。

2.4. Search Regexによる置換

ツールにSearch Regexが表示されています。

”Search Regex”をクリックして、置換していきます。

以下のように入力します。

Source: “Post Content”

Limit to :”No limit”

Order By:”Ascending”

Search pattern:”http://<あなたのドメイン名>”

Replace pattern:”https://<あなたのドメイン名>”

何が起きるかを確認するために、まずは”Replace”ボタンを押下してみてください。何が置換されるのかを表示してくれます。

ここまでは、サイトの情報としては何も変更されていません。この次の作業でコンテンツに変更がかかりますので、ご注意ください。

内容を確認したうえで、”Replace&Save”ボタンをクリックして確定します。

これで、各投稿の記事内の画像リンク、URLリンク記載がhttpsに変更され、完全なSSL対応となります。(今時の)ブラウザから参照してみるとURL表示の横に鍵マークが付き、保護されているかどうかがわかります。

2.5. SSL対応できていない場合

ブラウザで参照した際に、もしも、部分的にSSL対応していない場合、鍵が壊れている、鍵がかかっていないようなアイコンになります。(このサイトは保護されていません)

この場合、何かを変更しなければなりません。変更している個所を特定するのにブラウザ付属の”開発者ツール”(または”デベロッパーツール”)を使えば、SSL対応していない原因箇所はわかります。

原因箇所から、何から何へ置換すれば良いのかを判断し、Search Regexで変換して直していきます。残念ながら、一律の方法は無いので、パターンを見て(取り込んでいる部品を調べて)対応していく必要があります。

当サイトではかなりピュアな環境だったので、そのようなものはありませんでした。

2.6. Search Regexの無効化/削除

おそらくは当面使わないのでプラグインの一覧から無効化/削除します。元に戻したくなった場合にまた使うこともあるかもしれませんので、削除はこの時点でしなくてもいいかと思います。

ちなみに無効化や削除しても、変更内容が元に戻ったりはしません。

3.httpからhttpsへのリダイレクト

”http://<あなたのドメイン名>”でも今後アクセスされるかもしれません。その際に”https://<あなたのドメイン名>”に飛んでもらう必要があります。

3.1. ”Xserverサーバーパネル”を開く

エックスサーバーのインフォパネルからサーバーパネルを開きます。

3.2. “ホームページ”枠の”.htaccess編集”ボタンを押下

所持しているドメインがリストされますので、SSL化したドメインの右の”選択する”をクリックします。

※FTPでやる場合、”/<あなたのドメイン名>/public_html/”ディレクトリにある”.htaccess”が対象になります。

3.3. “.htaccess”の編集

“.htaccess”は書き方を間違えると予期せぬことが起こるファイルですので、念のため内容をコピーして置いておきましょう。

私の環境では以下のような状態がデフォルトでした。

# 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

これを以下のように書き換えます。

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteBase /

RewriteCond %{HTTPS} off

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

</IfModule>

# 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

書き方はいくつもあると思います。とりあえず、赤字の部分をコピペしていただければOKだと思います。

2017/09/13:修正

”# BEGIN WordPress””# END WordPress”の間に記載しても月末処理で消されるようです。(まだ確信無し)mod_rewriteを別に記載した方がよさそうです。

試験的にやりたい場合はR=302で、移行作業が完了してからR=301にするのも良いかと思います。検索エンジンのBOTが周回して、その後に”SSL化やめた!”となると不利益があるかもしれません。ここまでやってから、止めることはないと思いますが。。。

X.もとに戻したい場合

きちんと検証したわけではありませんが、”.htaccess”をもとに戻し、”Search Regex”で逆方向に変換して、サーバーパネルからSSL設定の削除を行うともとに戻せるはずです。(つまり手順を逆にやっていく)

まとめ

思ったよりもかなり簡単にできました。手順1の”SSL設定”でほとんどやってくれるのでとても楽ですね。エックスサーバー様様です。

気づいたら、メジャーなサイトはすべてSSL化されています。今後、SSL非対応のサイトはデフォルトで参照できない時代が来るかもしれませんね。

-WordPress, サイト運営
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

*

関連記事

slimstat-logo

WordPress リアルタイム アクセス解析プラグイン Slimstat Analytics

さすがにエックスサーバーのアクセス解析だけでは、自サイトのアクセス状況が分かりにくいので、リアルタイムアクセス解析のプラグイン”Slimstat Analytics”を入れました。せっかく入れたので、…

もっと見る

shield

【AMP対応】Ad InserterでAMP広告を4つ表示する方法

以前、AMP対策の一環として、Ad InserterでGoogle AdSenseのAMP広告を3つ入れた投稿をしました。3広告では若干少ない感じがしたので、4広告を入れるようにしてみました。4広告入…

もっと見る

AdInserter-eye

【AMP対応】Ad Inserter を使ってAMP広告挿入

AMP対応で、Ad Inserterプラグインを使ってGoogle AdSenseのAMP広告を挿入しました。AMPページへの広告挿入は、AMPならではのお作法があります。色々な手段があるとは思います…

もっと見る

google-plus

【Stinger8】 SNSボタン「Google+」の削除の方法