2019/08/08557 Shares

エックスサーバーでWordPressをHTTPS(常時SSL)化する方法

HTTPS

エックスサーバーにインストールした WordPress サイトを HTTPS 化する方法を詳しく解説していきます。

見慣れない単語が並ぶだけで難しそうに感じるかもしれませんが、手順通りやっていけば 1 時間ほどでできますよ(慣れれば 10 分ぐらい)!

Google は HTTPS をランキングシグナルに採用していますし、セキュリティを向上させるのは読者のためにもなりますから、ぜひやっておきましょう。

HTTPS化(常時SSL)の流れ

ブログ全体を HTTPS にすることを「常時 SSL 」といいます。

要するに、ブログの URL が「http://naifix.com」から「https://naifix.com」になる、と覚えておけば良いかなと思います。

HTTPS 化によって、「暗号通信で読者が安全に閲覧できる環境を提供できる」ようになります。また、ほんの少しだけ検索に有利になる可能性もあります。読者にも運営者にもメリットがあるわけですね。

Google ウェブマスター向け公式ブログ: HTTPS をランキング シグナルに使用します

既存のWordPressブログをHTTPS化する方法

HTTPS 化はとくに難しい作業ではありません。難しいのではなく面倒なだけです・・・

エックスサーバーの WordPress を HTTPS 化する手順は以下のとおりです。

  1. サーバーパネルで SSL を設定
  2. WordPress の基本設定を変更
  3. テーマを一部修正(不要な場合あり)
  4. 投稿・固定ページ内のリンクを修正(プラグインで一括置換)
  5. ウィジェットやプラグインの再設定(不要な場合あり)
  6. Mixed Content になっていないか全ページチェック
  7. .htaccess でリダイレクト処理

一連の作業が終わったら、Google Analytics や Search Console などの外部ツール、SNS などに登録してある URL を「http://~」から「https://~」に変更して完了です。

それでは早速手順を見ていきましょう。

WordPressサイトをHTTPS化する手順

※エックスサーバーを例に解説していますが、「サーバー側の設定」が違うだけであとはどのサーバーでも同じです。

(1)エックスサーバーのSSL設定

まずはエックスサーバーで SSL 設定を行いましょう。ここの作業は、クリックしていくだけで終わります。

サーバーパネルに入り、左下から HTTPS 化したいドメインを選択します。

エックスサーバー サーバーパネルでドメインを選択

つづいて、「ドメイン」欄の「SSL 設定」に進みます。

エックスサーバーSSL設定欄

ドメインを確認し、「独自 SSL 設定の追加」タブをクリック。

エックスサーバー独自SSL追加設定

再度ドメインを確認し、右下の「独自 SSL 設定を追加する(確定)」を押して終了です。

エックスサーバーSSL確定

なお、ブログの URL に「www」をつけていない場合も「www あり」のドメインが表示されます。このまま追加して問題ありません。

「CSR 情報(SSL 証明書申請情報)を入力する」にチェックを入れると以下のフォームが出てきますが、とくに変更しなくても大丈夫です。

エックスサーバーCSR情報設定

青いラインで「SSL 新規取得申請中です」が出てくるので、しばし待ちます。

エックスサーバー新規SSL取得申請

これでサーバー側の設定は終わりですが、すぐに「https://~」を見ても以下のような画面が表示されるだけです。

Firefoxの表示

Firefoxの表示

設定完了まで 30 分 ~ 1 時間ほどかかり、その後サイトが表示されるようになります。

HTTPS設定完了

「https://~」でサイトが表示されるのを確認してから次の作業に移ってください。表示される前に WordPress 側で作業してしまうと、サイトが真っ白になって管理画面に入れなくなることもあります。

それでは、WordPress 側の設定を見ていきましょう。

(2)WordPressの一般設定でURLを変更する

WordPress 管理画面に入ったら、[設定]-[一般]にある URL を 2 ヶ所変更します。

WordPress一般設定-アドレス

「http」を「https」にしてください。

変更前 http://sample.com
変更後 https://sample.com

「変更を保存」をクリックすると自動的にログアウトするので、再度ログインしましょう。

(3)WordPressテーマをチェックする

ここからは、WordPress 内のリンクを https に置換していく地道な作業となります。

ヘッダー画像などを設定できる WordPress テーマをご利用されているなら、再度カスタマイズメニューより画像を指定し直しましょう(設定方法は各テーマ配布もとにお尋ねください)。

その他、なんらかのカスタマイズをした記憶があれば、リンクや画像ソースに自サイトの URL が直接記述されているところがないかチェックします。

たとえば、以下のように画像を読み込んでいる部分などがあれば、すべて「https」に変更していきます。

WordPressテーマ内のURLを修正

自サイトの URL だけではなく、古いタイプの SNS ボタンなどは HTTP のままだったりするので、こちらも要修正です。

修正箇所はテーマによって異なりますが、大抵は以下のファイル(とそこから読み込んでいるファイル)をチェックすれば大丈夫だと思います。

  • header.php
  • footer.php
  • functions.php
  • style.css

(4)内部リンク・画像をSearch Regexで一括置換する

テーマチェックが終わったら、今まで書いてきた記事や固定ページのなかにある内部リンク・画像リンクを修正します。

プラグイン「Search Regex」を使って、「http://自分のドメイン」を「https://自分のドメイン」に一括置換するのが一番ラクです。

[プラグイン]-[新規追加]から「Search Regex」を検索して、インストール&有効化します。

Search Regexインストール

有効化したら、[ツール]-[Search Regex]に入り、以下のように設定してください。

Search Regex 設定例

Source Post Content
Limit to No limit
Search Pattern http://sample.com(図 1)
Replace pattern https://sample.com(図 2)

入力したら「Replace」ボタンをクリック(図 3)。

すると、置換する候補がずらずら~っと出てくるので、きちんと置換されているか確認します。

Search Regex 置換確認

問題がなさそうなら、「Replace & Save」ボタンを押して完了です。

(5)外部サイトから画像などを読み込んでいる箇所を修正

もし外部サイトから画像や動画などを読み込んでいるなら、それもすべて HTTPS に変更する必要があります。ただし、そのサイトが HTTPS 化されていなければなりません。

NG 例
<img src=”http://外部サイト” />

おもにアフィリエイトのバナーリンクが該当します。画像 URL が特定のパターンであれば「Search Regex」で一括置換しましょう。

カエレバで生成したアフィリエイトリンクを Search Regex で一括置換するときの設定例はこちら。

Search Pattern http://ecx.images-amazon.com
Replace pattern https://images-fe.ssl-images-amazon.com

アフィリエイトバナーのほかにも、古い YouTube コードなどは HTTP になっている可能性があるので、そちらも要修正です。

たぶんここのチェックと張り替え作業が、一番時間がかかる部分だと思います。

(6)ウィジェットやプラグインをチェックする

テーマファイルと記事内のチェックが終わったら、ウィジェットの中身やプラグイン設定もチェックしておきましょう。

サイドバーにプロフィール画像や内部リンクを入れていたり、プラグインでアイコンを入れている場合は、すべて「https://~」に変更していきます。

とにかく画像が表示されているところはすべて確認してください。

(7)SNSシェア数を引き継ぐ方法

「http://~」と「https://~」は別のサイトとして認識されるため、SNS のシェア数を表示していたならすべてゼロになってしまいます。

元の URL(HTTP)と合算して表示すれば疑似的に引き継げますが、PHP や jQuery の知識が必要なので初心者には敷居が高いですよね。

でも、プラグイン「SNS Count Cache」を使えば専門知識など不要で、設定項目を一ヶ所変更するだけで対応できますよ!

プラグイン設定のなかにある「HTTPからHTTPSへのスキーム移行モード」を「有効」にするだけです。

SNS Count Cache でカウント数を引き継ぐ

プラグイン未導入の場合は、HTTPS 化の前にプラグインでシェア数を取得しておいて、その後 HTTPS に移行するのが良いと思います(HTTPS 化のあとでもできました)。

(8)HTTPS化の最終チェック

ここまでの作業が終了したら、サイトを更新して「https」が緑になってるか確認してみてください。

もし緑になっていなければ、画像やスクリプトの読み込み部分で「http」のままになっている部分があるということです(Mixed Content)。

Chrome のデベロッパーツールで調べて修正していきましょう。

アドレスバーのアイコンをクリックし、「詳細」をクリック。

ChromeでHTTPS詳細を確認

デベロッパーツールが出てくるので、「View requests in Network Panel」をクリック。

デベロッパーツールでHTTPを確認

Network 画面に移ったら、F5 でサイトを更新します。

デベロッパーツール Network画面

ページの読み込みが終わると、URL が HTTP のまま残っている箇所が表示されます。

デベロッパーツールでHTTPリクエストを発見

上の例は、CSS で背景に画像を設定している部分ですね。

style.css 内の「http」を「https」に修正します。

CSS内の背景読み込み部分

あとはずっとこの繰り返しです。

  1. サイトを開いてアドレスバーをチェック
  2. 「https://」が緑色になっていなければ、デベロッパーツールで原因を調べる
  3. Mixed Content の原因となっている箇所を修正する

全ページ「https」が緑色で、デベロッパーツールもオールグリーンになっていれば OK です!

HTTPS化に成功

(9)どうしても混在コンテンツ(Mixed Content)が解消できないとき

何をどうしても Mixed Content のエラーが出てしまって https の部分が緑にならないときは、強制的に https で読み込ませることもできます。

以下の meta タグを全ページの <head></head> に入れてください。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

または、.htaccess に以下の一文を追記するのでも OK です(※エックスサーバーはサブドメインにも影響するので注意)。

Header set Content-Security-Policy: upgrade-insecure-requests

https で読み込めない画像は表示されず、結果的に混在コンテンツエラーは出なくなりますが、ASP のインプレッションカウントに影響が出るかもしれませんので応急処置として覚えておいてくださいね。

とりあえず meta タグを入れて強制的に https で読み込み、表示されていない画像などをチェックしていく方法もありだと思います。

オールグリーンになったら、作業完了まであと一息です!

(10).htaccessでリダイレクト処理

現時点では「http://~」と「https://~」の両方が存在する形になっています。

それぞれ別サイト扱いとなるため、「http://~」にアクセスがあったら「https://~」にリダイレクト(転送)されるように設定しましょう。

.htaccess というファイルを編集する必要がありますが、ここではエックスサーバーのサーバーパネルから編集する方法を載せておきます。

サーバーパネルに入ったら、左下で SSL 化するドメインを設定しておき、「.htaccess 編集」に入ります。

エックスサーバー .hraccess編集

以下の 5 行を追加してください。

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

初期位置は多少違うかもしれませんが、「# BEGIN WordPress」の上に入れておけば大丈夫です。

.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
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

 FTP で .htaccess を直接編集する場合はこちら

編集が終わったら「http://~」にアクセスして、きちんとリダイレクトされるかチェックしましょう。

https化を確認

もしリダイレクトされない or サイトが真っ白になったときは、全角スペースやよけいな文字列が入っているなどの記述ミスが考えられます。もう一度追記した部分を削除してやり直してみてください。

 500 Internal Server Error(HTTP500エラー)の原因とWordPressでの解決策

これで作業完了です!

外部サイトのURLも変更しておきましょう

サイトの HTTPS 化は以上で終了ですが、Google アナリティクスなど外部ツールと連携している場合は、登録してある URL を修正する必要があります。

Google Analytics

Google Analytics は、[アナリティクス設定]-[プロパティ設定]からデフォルトの URL を「https://」に変更します。

Google Analyticsでhttps設定

トラッキングコードはそのまま使えるので、張り替える必要はありません。

Google Search Console

Search Console は、新規サイトとして追加する必要があります。

XML サイトマップを生成している場合は、サイトマップの送信も忘れずにしておきましょう。

また、Google Analytics のプロパティ設定にある「Search Console を調整」から、新たに https で登録したサイトと紐づけておきます。

Search Console調整

その他チェック項目

代表的な変更点は以上ですが、その他外部サイトに登録してある URL も随時変更しておきましょう。

  • ブログランキング
  • ASP
  • SNS

お問い合わせフォームからの自動返信に含まれている URL など、ほかにも見落としがないかチェックしてみてください。

過去記事のメンテナンスも合わせて行うと良いですね。

WordPress HTTPS化まとめ

長々となってしまいましたが、HTTPS 化の基本的な流れはこちらです。

  1. サーバーで SSL を設定
  2. WordPress の基本設定を変更
  3. テーマを一部修正(不要な場合あり)
  4. 投稿・固定ページ内のリンクを修正(プラグインで一括置換)
  5. ウィジェットやプラグインの再設定(不要な場合あり)
  6. Mixed Content になっていないか全ページチェック
  7. .htaccess でリダイレクト処理
  8. 外部サイトの登録 URL を変更

今後「HTTP」のサイトを閲覧するとブラウザで警告が出るようになります。

『このサイトは安全ではありません』なんていう警告が表示されると、一般ユーザーは驚いて見てくれないと思いますので、余裕があるときに対応しておきましょう。

どうしても作業に不安があったり途中でうまくいかなかった場合は、代行作業などご相談に乗ります。お気軽にお問い合わせください。

なお、プラグインで超簡単に HTTPS 化する方法もあるので、こちらも試してみてください!

 WordPressを一瞬でHTTPS化するプラグイン「Really Simple SSL」の使い方

それでは、また。