XSERVERの無料独自SSLでWordPressをHTTPS化(常時SSL化)する

LINEで送る
Pocket

XSERVERにWordPressで作成したこのサイトをHTTPS化させました。
GoogleもHTTPS化を推奨していることから、今後も対応していくサイトが増えるかと思います。

HTTPS化といっても設定はそれほど難しくありません。

  • XSERVERの設定
  • .htaccessを編集してリダイレクト処理
  • WordPressの設定
  • Google Search Consoleの設定
  • Google Analyticsの設定

ひとつひとつの作業はそれほど大変ではありませんでした。

恐らく大変なのは確認作業でしょう。
HTTPS化することで今までのサイトとは別のサイトとして扱われてしまうため注意が必要です。
また外部の画像を貼り付けていてそれがHTTPSに対応していないと安全な接続にはなりません。

サイトによっては下記のような修正作業も必要になってきます。

  • 内部リンクを「http://~」から「https://~」に変更(プラグインで一括変換も可能)
  • アフィリエイトなど外部からの画像が「http://~」になっていないかチェックが必要
  • テーマ・ウィジェットなどのチェック
  • SNSのシェア数が0になる(プラグインで引き継げます)

以下は私のやった手順です。

スポンサーリンク

XSERVERの設定

まずはXSERVERにログインし、次にサーバーパネルにログインします。

XSERVER インフォパネル

SSL設定

「設定対象ドメイン」からHTTPS化させたいドメインを選び、「SSL設定」をクリック。

XSERVER サーバーパネル

「独自SSL設定の追加」をクリック。
サイトのドメインを確認して「独自SSL設定を追加する(確定)」をクリック。

XSERVER SSL設定

XSERVERの設定は以上です。
「SSL設定の一覧」をクリックして設定したドメインが表示されていれば設定完了です。

XSERVER SSL設定の一覧

ここで一つ注意点がありまして、無料独自SSLの設定をしたあとすぐに「https://~」でサイトを見ると、こんな表示が出てしまいます。

▼Firefoxでの表示

Firefox 安全な接続ではありません

▼Chromeでの表示

Chrome この接続ではプライバシーが保護されません

これは設定前にXSERVERが『※独自SSLは追加後、サーバーに設定が反映されるまで最大で1時間程度かかります。』と記載している通り、時間がかかりますのでしばらく待ちましょう。
このときは30分~40分はかかりました。

.htaccessを編集してリダイレクト処理

設定が反映され、「https://~」でサイトにアクセスができるようになったら.htaccessを編集します。

保護された通信

このままでは「http://~」と「https://~」のドメインが別サイトとして扱われてしまいますので、「http://~」でアクセスした場合に自動で「https://~」へ転送されるようにします。

サーバーパネルのメニューから「.htaccessを編集」をクリック。

XSERVER .htaccess編集

「.htaccessを編集」タブをクリック。

XSERVER .htaccess編集

下記のコードを追加し「.htaccessを編集する(確認)」をクリック。


<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

「# BEGIN WordPress」~「# END WordPress」の間は追加しないでください。
WordPressが自動で書き換えを行う部分ですので、上書きされてしまう場合があります。

内容を確認し「.htaccessを編集する(確定)」をクリック。

XSERVER .htaccess編集

これでXSERVERからの設定は完了です。
次はWordPressの設定をします。

XSERVER .htaccess編集

WordPressの設定

次はWordPressの設定です。
WordPressにログインし、「設定」>「一般」へ。

「WordPress アドレス (URL)」と「サイトアドレス (URL)」の2ヶ所を「https://~」のドメインに変更。
「変更を保存」をクリックして設定完了です。

WordPress 一般設定

Google Search Consoleの設定

続いてGoogle Search Consoleの設定をします。
Google Search Consoleにログインします。
「プロパティを追加」をクリック。

Google Search Console プロパティを追加

「https://~」のドメインを追加します。

Google Search Console プロパティを追加

書いてある手順通りに進め、最後に「確認」をクリック。

Google Search Console 所有権を確認

Google Analyticsの設定

Google Analyticsにログインします。
(1)左下の歯車のアイコン「管理」をクリック。
(2)「プロパティ設定」をクリック。
(3)「デフォルトの URL」を「https://」に変更。

Google Analytics

(4)「Search Console を調整」をクリックして「https://~」のドメインに変更しておく。
下の方にある「保存」をクリック。

「保存」を押すと上の中央付近に「完了しました。」という表示が数十秒出ます。
これでGoogle Analyticsの設定は完了です。

Google Analytics 完了しました。

確認

一通りの設定が終わったら、内部リンク・アフィリエイトなど外部からの画像・テーマ・ウィジェットなどを「https://~」に対応させブラウザで確認します。
このサイトは内部リンクをほぼなく、SNSのシェアボタンもつけたばかりなので何もしませんでした。
気づいたときに直せばいいかなと。

正常にSSLで接続されていると、下記のような表示になります。

保護された通信

こちらは安全な接続ができていないときの表示です。
原因となっているものを見つけ修正する必要があります。

この接続ではプライバシーが保護されません

まとめ

実際やってみて結構面倒でした。
今のところ大きなメリットがあるわけでもないので、今すぐやるべきってほどでもないかなと感じです。
ただ今後はHTTPS化が普通になるような気もしますので、もしやるなら記事数が少ないうちにやっておいたほうがいいと思います。

スポンサーリンク