エックスサーバー上の WordPress 構築サイトを SSL 化した手順

2016/12/19

エックスサーバーでは2016年6月30日より、全てのプランにおいてドメイン認証型SSL証明書「Let’s Encrypt」を無料・無制限に設定できるサービスが追加されました。

XSERVER で独自 SSL が無料になるサービスが始まった!他の SSL プランと比較し適切な証明書を導入しよう
SSL を利用するなら、どのレンタルサーバーを利用したら良いか?各レンタルサーバー会社の現状を比較しようと思っていたところ、飛び込んできたエックスサーバーでの...

SSL が無料で使えるのは非常に魅力的な話です。しかし当ブログで貼り付けている ASP のリンクの都合上、Web ビーコンが http だったり、画像ファイルが SSL 未対応であったため、なかなか手が出せずにいました。

SSL 化する上で行わなくてはいけないこと

そもそも https に対応させるためには、単に URL が https で始まるように変更するだけではいけません。そのページ内で読み込むデータ css や javascript、iframe 読み込みのページや画像ファイルのアドレスも全て https でアクセスできるようにする必要があります。

SSL 化して安全な接続を行うことが目的なのに、そこから http アクセスでデータを読み込むと、そのコンテンツのせいでユーザーが危険にさらされます。このようなプロトコルが混在した状態をミックスドコンテンツと呼び、主要ブラウザでは http のデータの読込みや実行をブロックしたり、アドレスバーに警告が表示されることがあります。

つまり http で接続していた時は何も問題が無かったのに、https に変えた途端、表示がおかしくなってしまうことも有り得ます。ゆえに、きちんとやるべきことを把握した上で SSL 化することが大切です。

読込みデータを全て https にする

WordPress のサイトを SSL 化する上で、実施する内容をまとめると次の通りです。

  • 利用しているサーバーの SSL 設定を行う
  • WordPress のコンテンツ内の http アクセスするリソースを https へ変更する
  • WordPress のテーマ内の http アクセスするリソースを https へ変更する
  • WordPress のアドレス設定を https へ変更する

絶対に行う必要がある内容はこれだけ。細かい話をすると、Adsense やアフィリエイトリンクは単に http を https に置換して済む話ではないため、基本的には貼り替えが必要です。Adsense の場合は早い段階で SSL 対応しているので、古いコードを使っていない限りは貼り替え不要です。

2016年12月16日現在、A8.net を始め、バリューコマース、アフィリエイトB、アクセストレード、もしもアフィリエイト、楽天アフィリエイト、Moba8.net は SSL 対応済みとなっています。しかしリンクシェアに限っては未だに対応していないのでご注意ください。

SSL 対応後に変更を要するもの

Web サイトを運営する上で、Google Analytics 等の外部ツールを使っていれば、それらの設定の変更が必要になります。また、外部からのリンクを https へリダイレクトする必要もあるため、SSL 対応した後に、状況によっては以下の変更も必要になります。

  • Google Analytics の設定を https に変更する
  • Google Search Console に https 版のページを新規登録する
  • .htaccess で https へ 301 リダイレクトさせる処理を追記する

ブログを含め Web サイト管理者であれば、これらのツールは使っているはずなので、少なからず変更が必須になると思われます。もしツールを使っていないにしても、検索サイトからの流入がある場合は 301 リダイレクト設定は行った方がメリットは大きいです。

では実際に、僕が WordPress を SSL 対応する上で行った手順を、自身の記録のために記しておきます。

作業前のバックアップ

データベースのバックアップ

http から https へ変更するにあたり、途中で手順を間違えてしまいデータがおかしなことになってしまうと困るので、バックアップは絶対に取得しておきましょう。

データベースは MySQL のエクスポート機能を用いてバックアップします。手順については、以下のページ内にあるデータのエクスポート方法を参考にしてください。

※ サーバーはロリポップですが、手順は同じです。(エックスサーバー利用者の場合、MySQL のバージョンが古く、画面イメージが若干異なる場合がありますが、やるべきことは変わりません。)

ロリポップからエックスサーバーへドメインごと移行する方法
先日ロリポップからエックスサーバーへレンタルサーバーを変更したことをお伝えしましたが、今回は具体的な手続き方法について説明していきます。手順は以下の通...

テーマファイルのバックアップ

テーマ内のアドレスに手を加える場合があるので、こちらも念のため FTP からファイルを取得して退避しておきましょう。修正するファイルと混在しないように、バックアップデータはフォルダ名を変更しておくことをおすすめします。

僕の場合、jQuery の読込みで CDN を利用するよう手を加えたり、Font Awesome を使っているため、テーマの変更が必要になりました。

http で参照しているアドレス変更

サイト内の画像データの URL 変更

こちらは自身がアップロードした画像ファイルのリンクの URL 変更です。この段階では https でアクセスできないため、プロトコルを外す作業を行います。

つまり img タグの src 属性を

http://nj-clucker.com/wp-content/uploads/…

から

//nj-clucker.com/wp-content/uploads/…

へ変更します。

え?これでいいの?と思うかもしれませんが、プロトコルの http: を除いた場合、アクセスしている大元の URL のプロトコルに基づきアクセスされるようになります。

例えば http で始まるページにアクセスすれば、自動的に http で接続し、https でアクセスすれば https で取得してくれます。Google もプロトコルは省略することを勧めているので、敢えて https に変更する必要はありません。

Google HTML/CSS Style Guide

置換作業は1つ1つ手作業で行うのは大変なので、僕は Search Regex プラグインを使って対応しました。使い方は次のページを参照ください。

WordPress の記事内容を一括で置換できるプラグイン Search Regex
SSL 化に伴い内部リンクを http から https へ変更したい。HTML タグを一括置換したい。そんな時に、過去の全ての投稿を対象に検索を行って、一括置換が行...

ちなみに置換時に行った設定は次の通りです。

検索パターン: src="http://nj-clucker
変換パターン: src="//nj-clucker

同様に a タグの内部リンクも変更してしまいましょう。href 属性を同様に置換すれば問題ありません。

検索パターン: href="http://nj-clucker
変換パターン: href="//nj-clucker

外部ドメイン参照しているプロトコル変更

先程の Search Regex を使い、画像ファイルや iframe 要素、JavaScript 等が http で取得されていないかチェックを行います。

検索パターン: src="http://

この条件で引っ掛かるページが多いと、ちょっと面倒です。先程のように一括置換できないため、1つ1つチェックして変更を行わなくてはいけません。

ASP のリンクの場合、各 ASP が推奨する方法でアドレスを変更します。バリューコマースの場合は http のプロトコルを外すだけで良くても、A8.net は再取得しないといけないため、一概にこうすれば良いと言えないのが現状です。

カエレバ」を使っている場合、Amazon の画像は SSL 化できますが、楽天は未対応です。しかし楽天も2016年12月14日に SSL 対応したため、ドメイン部分を変更することで https でアクセスすることが出来る状態になっています。

外部サイトへのリンク href でしている部分は http のままで残しておかなくてはいけません。うかつに https へ変更したり、http を消してしまうと、現状はほとんどの確率でリンク先にアクセスできなくなります。

テーマ内の URL チェック

場合によっては、テーマファイルも外部データを参照しているケースがあります。FTP でローカルにダウンロードして、テキストエディタ等で http: のグレップ検索を行うのが手っ取り早いです。そこから1つずつチェックして、必要に応じて変更。そして最終的に更新版をアップロードします。

基本的にテーマファイルが外部データを参照するのは稀ですが、無いとは言い切れないため必ずチェックするようにしましょう。

僕の場合、スタイルシートの background プロパティにおける、背景画像の URL が相対パスではなく絶対パスで記述していたので、http のプロトコル部を抜く修正を行いました。

またテーマによっては WordPress のメニュー [外観] → [ガジェット] の設定項目が用意され、そこに自身の手でコードを入力していることがあります。ここはデータベースに書き込まれている内容であるため、ガジェットの設定ページを開いて内容を確認しなくてはいけません。意外とここに Adsense のコードや Amazon リンクのコードを貼れるように作られているテーマもあるので、必ず見るようにしましょう。

これで内部の URL の変更は完了です。

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

続いてエックスサーバー側での SSL 対応です。ここでは無料で使える「Let’s Encrypt」を利用する前提で説明を進めます。まずはサーバーパネルへアクセスしてください。

サーバーパネル – ログイン | エックスサーバー

ドメインの項に [SSL設定] のメニューがあるので、そちらにアクセスします。そして SSL を設定するドメインを選択します。

SSL設定画面に移ったら [独自SSL設定の追加] のタブをクリックし、どのサイトを SSL 化するか選択します。サブドメインでサイトを構築している場合、それぞれのサイト毎に設定する必要があります。

無料 SSL の場合、CSR情報を設定しなくても手続きできるので、CSR 情報の入力は行わず未チェックのままで結構です。最後に [独自SSL設定を追加する(確定)] ボタンを押下して登録します。

ボタン押下後、10秒ほど待つと画面表示内容が切り替わります。SSL設定が完了することで [SSL設定の一覧] に指定したサイトの URL が https 付きで表示されるようになります。リンク表示されていますが、申請直後はアクセスできません。

SSL設定が反映されるまで最大で1時間掛かるため、設定後しばらくしてからアクセスしましょう。

僕の場合、最初に登録したメインのサイトは10分ほどで反映されましたが、同時に申請したサブドメインの方は反映されるまで40分近く掛かりました。早々に反映されても証明書内のデータが不完全なケースがあるため、設定後は1時間ほど置いてから作業することをおすすめします。

SSL設定の方法は、エックスサーバーの公式サイトにも掲載されているので、そちらの手順を参考にしていただいても結構です。

SSL設定 | レンタルサーバー【エックスサーバー】

これでSSLの下準備は完了です。

WordPress の SSL 設定

ではここからサイトが https アクセスされるように各種設定を行います。まずは WordPress の設定です。メニューの [設定] → [一般] を開き、WordPress アドレスならびにサイトアドレスの URL を変更してください。

ここは http を https へ変更するだけで大丈夫です。

これで WordPress から生成される自サイトの URL が https バージョンに変更されます。この設定により https でのリクエストが発生し始めます。

http から https への 301 リダイレクト設定

せっかく WordPress の URL を https に変更したので、http のアドレスへアクセスがあった場合に、自動的に https のページへリダイレクトするように .htaccess に次のデータを書き加えます。

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

ちなみに1行目はコメントなので任意の内容に書き換えるか、もしくは行ごと削除してください。僕の場合変更した日が分かるように、日付情報をコメントとしていつも残しています。

編集すべき .htaccess のファイルは WordPress がインストールされたフォルダの直下にあります。特にフォルダを切ってインストールしていなければ public_html のフォルダに存在しています。

そのファイルを FTP でダウンロードし、テキストエディタで開いて、末尾に上記内容を追記します。なお、こちらのファイルも作業前にはコピーバックアップを取得しておきましょう。

301 リダイレクト設定の追記場所はどこでも良いのですが、他に記載事項がある場合、誤って処理途中に挿入してしまうことを避けるために、敢えて末尾としています。

編集後は改めて FTP でアップロードし、ファイルを上書きします。これで検索サイトからのアクセス、および外部の Web ページに貼られたリンクからのアクセスが全て https に接続されるようになりました。

反映結果チェック

.htaccess の内容が正しく動作するか確認します。トップページおよび任意のページを http でアクセスしてみましょう。自動的に https に変更されれば成功です。

https エラーの有無をチェック

SSL 対応したページが問題ないかブラウザで表示して確認します。ここでは Chrome を使ったチェック方法を紹介します。

本来であれば全てのページを開いて確認したいところですが、ページ数が多い場合は非現実的です。人によって確認すべきページは様々なので、一概には言えませんが、最低限確認すべきページを挙げておきます。

  • トップページ
  • カテゴリアーカイブページ
  • 月別アーカイブページ
  • 投稿ページ
  • 固定ページ

パターンによって数ページを抽出して確認

トップページを除いて、それぞれ数ページをサンプルとして選び確認してください。特に投稿ページは外部サイトのファイルを参照しているページで、前述の手順で URL を変更したもの、および ASP のアドレスを貼り替えたものを中心に選ぶと良いです。

確認すべき内容はミックスドコンテンツになっていないことです。

Chrome で対象のページを開いて URL の欄を確認してください。特に問題なければ左側に緑の鍵アイコンが表示されます。もしここで問題があると、インフォメーションのアイコンが表示されます。

後者は正しく https でアクセスできていない状態を表します。具体的には http のプロトコルで参照しているデータがあり、ミックスドコンテンツの状態になっている可能性があります。

そのようなページがあった場合は、ソースコードを開いて http で参照している場所を探し、修正してください。そして同様の問題が生じる可能性があるページも全て修正します。

モバイル表示も確認すること

レスポンシブデザインを採用していれば、基本的には複数デバイスの確認は不要ですが、スマートフォン用に wp_is_mobile() 関数等を噛ませて表示分岐をしている場合、確認が漏れる可能性があります。

スマホ版の画面表示を確認する方法の1つとして、Chrome ブラウザのスマートフォン表示用シミュレーターを利用するのをおすすめします。次のページに具体的な使い方を記載しています。Chrome のバージョンが古いので、画像イメージに差異はありますが、概ね使い方は同じなので参考にしてください。

PC 版 Chrome はスマホ表示用のシミュレーターが組み込まれている
ブログや Web サイトを構築している人が悩まされる要因の1つとして、スマホ用サイトの表示が含まれます。SNS や検索サイトからの流入を見込んでいるサイトであれば、ス...

最終確認が終わったら、WordPress 側の修正は終了です。後は Google 関連のツール設定です。

利用する Google サービスの設定変更

Google Analytics

Google Analytics

Google Analytics へアクセスして、対象サイトのページを開きます。上部のメニューにある [管理] を選択し、真ん中にあるプロパティの項にある [プロパティ設置] を開きます。

そしてデフォルトの URL を http:// から https:// へ変更(プルダウン選択)して保存します。

同様に [管理] メニュー押下直後に、右側に表示されるビューの項にある [ビュー設定] を開き、ウェブサイトの URL のプロトコルをプロパティ設定と同様に https:// へ変更します。

これで Analytics の変更は完了です。

Search Console

Search Console – ホーム

サーチコンソールは今まで使っていた http 版 URL で登録された情報を https に変更することができません。よって https 版の URL を新規に登録し直さなくてはいけません。

トップ画面の右上にある [プロパティを追加] より https 版の URL を追加します。僕の場合は「https://nj-clucker.com」で登録を行いました。

所有権の確認が必要になりますが、そもそも http の状態で確認が取れているのであれば、特に何もする必要がなく、そのまま [確認] ボタンを押下することで所有権が確認されます。

後はこれまで http 版で登録していた状態と同様に設定すれば良いですが、何を設定したのか記憶にない人も多いでしょう。そんな時はメッセージを開いてください。

https://nj-clucker.com/ の検索パフォーマンスを改善できます

このようなタイトルのメッセージが届いているので、そちらに表示される内容に従ってアカウント設定を行いましょう。(場合によっては届かないケースもあるようです。)

ただ、最初に所有権の確認をしてしまえば、特に指示に従って行うようなことは殆どありません。ただし、絶対に行わなくてはいけないことがあります。それは、サイトマップの送信です。

ブログを運営しているのであればサイトマップの利用は必須と考えているので、サイトマップを利用している前提で書いてしまいましたが、WordPress ではサイトマップは標準機能ではないため、Google XML Sitemaps のようなプラグインを導入する必要があります。

もし設定していないのであれば、これを機にサイトマップを準備しましょう。

Search Console へ登録するタイミングは、エックスサーバーで SSL の設定を行ってから1時間ほど時間を置いてから行ってください。https でアクセスできるようになっても SSL の証明書にドメインが登録されるまでタイムラグが生じることがあります。

もし Search Console への登録が早すぎると「SSL/TLS 証明書にドメイン名 https://nj-clucker.com/ がありません」といったメッセージが届きます。Google からのメッセージは心臓に良くないので(笑)、時間に余裕を持って登録を行ってください。

Google から「SSL/TLS 証明書にドメイン名がありません」とメッセージが届いた原因を探る
先日、エックスサーバー上に構築したサイトの SSL 化を実施しました。WordPess 内のデータ変更から、利用している Google サービスの変更に至るまで。詳細...

これでエックスサーバー上の WordPress の SSL 化の作業は終了です。かなり多くの修正が必要になりますが、確実に SSL 化へ移行できるよう、細かい部分まで突っ込んだ説明を行いました。

近い将来 SSL 化が当たり前の Web 社会になりますので、移行作業だけは手間を惜しまず、エラー無く確実に https でアクセスできるよう頑張ってください。

以上、エックスサーバー上の WordPress 構築サイトを SSL 化した手順の紹介でした。

Name :
気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。目指すところへの道のりは険しいですが、自分が自分らしくあるために、一歩ずつ進んでいきます。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。よろしければフォローお待ちしています。

プロフィール詳細 Twitter @_NJ69_
Facebook ページ nj-clucker.com シェア
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑