2017年版: WordPressでのhttpからhttpsへの詳細移行ガイド

この度、本サイト全体を常時SSL化、完全HTTPS化しました。幸いなことに大きな問題も発生せず、無事に移行を行うことができました。以前は、SSL化は証明書の取得にもコストがかかり、作業も大変だったようですが、現在は無料でSSL化することもできます。

移行化作業の情報などもネット上に開示されており、とても参考になりました。ツールもWordPressは充実しているので、移行作業の工数を大幅に減らすことができます。

運営期間、サイトの種類・コンテンツ、環境にもよりますが、WordPressであれば、https化は簡単に行うことができることを実感しました。


スポンサーリンク

HTTPS移行の主な作業項目・手順

主な作業内容、手順は以下の通りです。

  1. データベースのバックアップ
  2. ドメインのSSL設定
  3. 内部リンクをhttpからhttpsに変更
  4. WordPressのサイトアドレス設定をhttpsに変更
  5. rel=”canonical”の対象URLをhttpsに変更
  6. .htaccessにHTTPSへの301リダイレクトを追加
  7. ブラウザでの表示確認
  8. Google Search ConsoleとAnalyticsの登録
  9. Search Consoleにサイトマップを追加
  10. SNSなどのリンクアドレスをhttpsに変更
  11. HSTSの設定

作業項目を見ると、作業量が多いように思いますが、実際に作業を行った時、予想していたよりもはるかにスムーズに移行を行うことができました。

移行作業を行う上で、本サイトが使用しているテーマ、Simplicityの作者わいひらさんの記事を全面的に参照しました。

エックスサーバーが独自SSLを無料かつ無制限で利用できるようになりました。この、エックスサーバーの「ユーザーにどんどん利便性を提供していく姿勢」には相変わらず頭が下がります。そのSSLなんですが、何年か前なら結構なお金のかかっていたものが無

基本的な移行作業手順と内容は、テーマやレンタルサーバーによって変わるものではありませんが、上記記事では、本サイトと同じ環境(WordPress, Simplicity, 、エックスサーバー)でわいひらさんが行った手順を詳細にお書きくださっていたので、本当に参考になりました。

わいひらさん・寝ログさんの記事のおかげで、https移行の作業時間を大幅に短縮することができました。この場を借りて、御礼申し上げます。本当にありがとうございました!!

以下、行った主な作業を順を追って紹介します。

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

作業を行う前に、バックアップを取っておくことは重要なことです。バックアップすれば、作業中に何か問題が起きたり、うまく作業を行うことができなかった時に、元の状態に戻すことができます。

バックアップは、今回の作業に限らず、定期的に行うべきことです。特に今回のような比較的大きな変更作業を行う場合は、バックアップを行うことは重要です。

バックアップと言っても、データベースファイルをダウンロードするだけの単純な作業です。データベースのバックアップのやり方は色々あります。

エックスサーバーの場合は、サーバーパネルにログインして、MySQL設定からMySQLバックアップのタブを選んで、作業を行うサイトのデータベースファイルの”エクスポート実行”ボタンを押すとデータベースファイルをダウンロード(バックアップ)することができます。

WordPressでは、プラグインを使って、データベースのバックアップを行うこともできます。今回は、プラグインを使う方法でバックアップしました。

私が使用したのは、BackWPupです。バックアップを行った時にチェックしたBackWPup最新版のWordPress対応バージョンは4.6.2でした。本サイトのWordPressのバージョンは4.7.0でした。バージョンの更新が6ヶ月前と少し古かったのですが、他の同種プラグインも、どれも更新は少し前でした。データベースのバックアップは比較的単純な作業なので、プラグインとWordPressのバージョンの互換性はそれほど神経質にならなくても大丈夫です。

BackWPupを使用したデータベースバックアップのやり方

ワードプレスの管理画面の左がwに表示されるメニューのBackWPupにポインターを合わせる(マウスオーバーする)とサブメニューが表示されます。サブメニューから、ダッシュボードを選びます。

BackWPupのメニューからダッシュボードを選ぶ

BackWPupのダッシュボードが表示されます。ダッシュボードの右下に表示される1クリックバックアップの下の青いボタン”データベースのバックアップをダウンロード”をクリックします。

BackWPup ダッシュボード画面から

パソコンのダウンロードフォルダー等に、ファイル名の後に拡張子sqlがついたファイル(例:database_name.sql)がダウンロードされます。

以上でバックアップは完了です。

作業項目リストに戻る

ドメインのSSL設定を行う

本サイトはエックスサーバーを使用しています。サーバーにSSLの機能設定の追加を行います。設定の仕方は、レンタルサーバー会社によって多少異なりますが、やることは基本的に同じです。

エックスサーバーのサーバーパネルにログインし、メニューの中から”SSL設定”を選択します。

エックスサーバー・サーバーパネル管理画面

ドメイン選択画面が表示されます。表示されるドメインの中から、SSL化を行うドメインの欄の”選択する”とクリックします。

エックスサーバーSSL設定を行うドメイン選択画面

選択したドメインのSSL設定画面が表示されます。設定前なので、「現在、独自SSL設定はありません。」と表示されています。”独自SSL設定の追加”と表示されているタブをクリックします。

SSL設定画面

設定対象ドメインのサイトが表示されているのを確認後、”独自SSL設定を追加する(確定)”のボタンをクリックします。

SSL設定最終確認画面

上記、SSL設定追加を実行すると、「SSL新規取得申請中です。しばらくお待ちください。」とメッセージが表示されます。申請が完了すると、『「www.example.com」に独自SSL設定を追加しました。』というメッセージが表示されます。SSL設定追加完了画面

上記設定完了のメッセージの下に、補足説明として「SSL設定が反映するまで、最大1時間程度かかります。」と表示されています。

”SSL設定の一覧”のタブをクリックすると、無料独自SSL一覧に設定を行ったサイトとSSL用のアドレスが表示されます。

設定後のSSL設定一覧画面

設定後、直ぐに上の画面のSSL用アドレスのURLをクリックしても、SSL設定が反映していないため、ブラウザで安全ではない旨の警告が表示されます。反映完了後は、警告は表示されなくなります。

以上で、ドメインのSSL設定は完了です。

作業項目リストに戻る

内部リンクの変更

上記SSL設定を行ったことで、ドメインはhttp://からhttps://に変更されました。この変更に伴いサイト内のリンクアドレスもhttpからhttpsに変更する必要があります。

内部リンクの変更(書き換え)をマニュアルで行うのは大変です。しかし、WordPressの場合はSearch Rogexと言うプラグインで簡単に行うことができます。Search Rogexは、サイト内を対象ワードを検索して、置き換える(書き換える)機能を持ったプラグインです。

Search Rogexは、サイトの引っ越し(URLの変更)作業を行う時にとても便利な機能を提供するプラグインです。httpからhttpsへの移行は、サイトの引っ越しと基本的に同じ作業が(も)発生します。

Search Rogexを使って内部リンクの置き換えを行う

WordPress管理画面左のメニューにポインターを合わせる(マウスオーバーする)と表示されるサブメニューから、Search Rogexを選びます。

Wordpress ツール・サブメニュー表示

Search Rogexの画面が表示されます。

上段に表示される項目、Source: “Post content”, Limit to: “No Limit”, Order By: “Ascending”は、そのままで大丈夫です。検索の対象は投稿コンテント、制限は設けない、昇順と言う意味の設定です。

Search pattern(検索パターン)には、SSL化前のサイトURL(例:http://www.example.com)を入力し、Replace pattern(置き換えパターン)には、SSL化後のURLを入力します。(例:https://www.example.com)

Regex:のボックス欄はチェックする必要はありません。以下の画像は、本サイトの場合の入力例です。

Search Regexに検索と置き換えワードを入力する

下の実行ボタンは、”Search”(検索), “Replace”((検索)と置換), “Replace&Save”(置換と保存)の3種類があります。

実際に置き換えを行う前に、確認のため”Replace”ボタンを押してSearch Regexを実行します。

以下の画面のような検索・置き換え実行の結果(Results)が表示されます。検索対象のパターンと置き換えパターンが赤字で表示されています。

Search RegexのReplace実行後の画面

本サイトはコンテンツが少ないため、上記画像の検索結果は271と少ないです。記事が多いサイトの場合は、記事数の分とプラスアルファ多くなります。

置き換え前と置き換え後の内容を確認します。念のため、実行して問題がないか一つ一つ確認します。手間はかかりますが、トラブル・問題発生のリスクを軽減するためにも重要な確認作業です。

確認作業後、特に問題がなければ、”Replace & Save”ボタンを押して、置き換えを実行します。

Search Regex置き換え実行画面

置き換えが完了すると、Search Regexの下に、実行された(置き換えられ保存された)件数が表示されます。

Search Regex置き換え実行後の画面

以上で、内部リンクの変更は完了です。

作業項目リストに戻る

WordPressのサイトアドレス設定をhttpsに変更

WordPressのアドレス設定をhttpからhttpsに変更します。

管理画面左のメニューから設定にポインターを当て(マウスオーバー)、表示されるサブメニューから”一般”を選びます。

Wordpress 設定サブメニューから一般を選びます。

WordPress アドレス(URL)とサイトアドレス(URL)を、httpからhttpsに変更します。

変更前:

WordPressアドレス設定変更前

変更後:

入力後、”変更を保存”のボタンを押します。これで、WordPressのサイトアドレスの設定の変更は完了です。

作業項目リストに戻る

rel=”canonical”の対象URLをhttpsに変更

rel=”canonical”の参照先のURLもhttpからhttpsに変更する必要があります。この作業は、Googleがhttpsへの移行で推奨する作業の一つです。

canonicalタグで参照しているURLがhttpのままで残っていると、検索インデックスにhttpが残ってしまうようなことが発生した事例が過去にあったとのことです。

サイトをHTTPSへ移行した際には、rel=canonicalで指し示すURLも忘れずに https:// に更新すること。http:// のままだと移行前のHTTPのURLがインデックスに残ってしまうことがある。

canonicalタグの参照がhttpで残っているかの確認は、内部リンクの変更で紹介したSearch Regexを使用すると簡単にできます。

Resourceの設定を、”Post meta value”にして、Search patterにhttp:のアドレスを入力して検索してみて下さい。

Search Regexでメタ値を検索する

検索してもhttpを参照しているcanonicalタグがなければ、何もする必要はありません。これは念のための確認です。

httpを参照しているcanonicalがあった場合は、上で紹介したようにSearch Regexを使って、httpからhttpsへの置換を行います。

私の場合、Search Regexでメタバリューの検索を行ったところ、幾つかのcanonicalタグの参照先がhttpで残っていました。そのため、それらをhttpsに置き換えしました。

作業項目リストに戻る

.htaccessにHTTPからHTTPSへの301リダイレクトを追加

サイトの引っ越しと同様にhttpで始まる旧アドレスでアクセスが行われた場合に、移行した新しいhttpsのアドレスに転送する処理を.htaccessに追加する必要があります。転送は、301リダイレクトを使用します。

.htaccessのバックアップ

リダイレクトを追加する前に、バックアップを行います。.htaccessは、”public_html”のディレクトリ(サイトリソースのルートディレクトリ)にあります。FTPでダウンロードするか、ファイルをコピーしておきます。

.htaccessは、非常に重要なファイルなので、変更を行う前にバックアップを必ず行う方が良いです。

HTTPSへの301リダイレクトを追加

.htaccessの編集の仕方は、データベースのバックアップと同様にやり方は色々あります。FTPで編集するのが一般的です。(エックスサーバーのサーバーパネルからも編集はできます。)

.htaccessに以下のコードを追記します。

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

一行目の”RewriteEngine On”は、既に記述されていれば、必要ありません。

リダイレクトの動作確認

Search Consoleを使用して、リダイレクトが正しく動作しているかの確認を行います。移行前のサイトのプロパティから、”Fetch as Google”を行って確認します。

移行前のサイトからFetch as Googleを行ってリダイレクトの動作確認する

英語になっていますが、紫色の文字のhttpのアドレスから、オレンジ色で”Redirected”(リダイレクトされました)と表示されています。リダイレクト先は、httpsになっています。

さらに、Fetchのログ(Downloaded HTTP response:の下の表示)から、問題なく301リダイレクトされていることが確認できました。

ブラウザからもマニュアル入力で”http://example.com”と入力して、転送の確認を行います。”https://example.com”が表示されていれば、大丈夫です。

ここまでの作業で、サイト側の基本的なHTTPS移行作業は完了となります。

作業項目リストに戻る

ブラウザでの表示確認

普及している主なブラウザでは、表示しているサイトのURL欄(アドレス欄)にそのサイトが安全であるか否かの付加情報を表示するようになっています。上に書いた様なHTTPSへの移行作業を行った後、ブラウザでHTTPS移行後のサイトを表示して確認を行います。

HTTPSのサイトで安全な接続になっている場合の、主要ブラウザの表示例を紹介します。

Chrome

Chromeでは、”鍵マーク”、”Secure(安全)”、”https”が緑色で表示されます。

Chromeアドレスバーでの安全な接続表示例

鍵マークをクリックすると、安全な接続であることのメッセージ(ここでは英語ですが、日本語の場合もあります)が表示されます。安全な接続のメッセージ表示

Safari

Safariでは、アドレスの前に鍵マークがグレーで表示されます。私の使用しているSafariでは、アドレスバーにhttpまたは、httpsの表示はされません。

Safariアドレスバーでの安全な接続表示例

鍵マークをクリックすると”暗号化された接続を使用しています”と表示されます。暗号化によりhttpsのサイトから、またはhttpsへのサイトへの情報はプライベートな状態を保ちますの意味のメッセージが表示されます。(画像では、メッセージは英語で表示されていますが、日本語の場合もあります。)

Safariでの暗号化による接続のメッセージ表示例

Firefox

Fireboxでは、緑色の鍵マーク、続いてhttpsからのURLフルアドレスが表示されます。

Firefoxアドレスバーでのhttps接続表示例

鍵マークの左側に表示されているiマークをクリックすると、安全な接続であることのメッセージ(ここでは英語ですが、日本語の場合もあります)が表示されます。Firefoxの表示形式は、Chromeに似ています。(Chromeの表示形式は、Firefoxに似ています。)

Firefoxでの安全な接続のメッセージ表示

表示形式はブラウザのバージョンなどによっても異なる可能性があります。今後、細かい表示形式は変更となる場合があります。

上はページ上のリソース(要素)が全てSSL化されている場合の表示例です。運用歴が長く、記事数も多いサイトの場合は、上のように表示されないことが多いようです。

httpsでも全てが安全ではない状態

https化しても、サイト、ページの一部にhttpによる接続(記述)が残っていたりするとhttpsの前に鍵マークが表示されません。Chromeでは、iマークをクリックすると、サイトへの接続が完全に安全になっていない旨のメッセージが表示されます。

Chromeでの全てが安全な接続でない時のメッセージ表示

Firefoxでは、鍵マークに黄色の注意マークが加えられて表示されます。青色のiマークを押すと、赤字で接続が安全でないとメッセージが表示されます。黄色の注意マークに、「このウェブサイトは安全でないコンテント(例えば画像)が含まれています。」と表示されます。Learn More(日本語では”詳細表示”)をクリックすると、詳しい内容が表示されます。

Chromeでの全てが安全な接続でない時のメッセージ表示

運用歴が長く、記事数が多いサイトでは、一部にhttpの参照などが残っていて、全てが安全ではない状態を示すブラウザ表示になることが珍しくないと思われます。対応策については、冒頭で紹介したSimplicity製作者わいひらさんのサイトSSL化の記事内に書かれていることなどをご参照下さい。運用歴が長く、記事数が多くなればなるほど、SSL化は作業が多くなり、大変なことだと思います。

作業項目リストに戻る

Google Search ConsoleとAnalyticsの登録

httpからhttpsへの移行は、URLが変わるため、サイトの引っ越し(アドレス変更)と基本的に同じ取扱となります。Search ConsoleやAnalytics等のサイト運営に必要なツールの設定も行う必要があります。

Search Consoleの登録はAnalyticsを設定していると簡単にできるため、先にAnalyticsの設定変更を行います。

Google Analyticsの設定変更

Analyticsにログインして、https化したサイトを選択します。画面上段のメニューバーの”管理”をクリックし表示される管理項目の中から、”プロパティ設定”を選択します。

Google Analytics管理メニュー画面

プロパティ設定で表示されるデフォルトのURLがhttpで表示されているはずです。”http://”の部分をクリックし表示されるドロップダウンメニューからhttps://を選びます。

デフォルトURLのプロパティ設定をhttpsに変更する

画面下の青色の”保存”ボタンを押すと変更登録完了となります。Analyticsの変更は以上です。続いて、Search Consoleの登録を行います。

Search Consoleの登録

httpとhttpsではURLが異なるため、Google Search Consoleでは別アドレスとして取り扱います。そのため、Search ConsoleにhttpsのURLで新たに登録する必要があります。

Googleは、Search Consoleでwww.example.comとexample.comの両方を登録することを推奨しています。

Search Consoleにサイトマップを追加

httpsのURLで作成されたサイトマップをSearch Consoleに登録します。

作業項目リストに戻る

SNSなどのリンクアドレスをhttpsに変更

SNSや関連サイトからのリンクのアドレスをhttpからhttpsに変更します。本サイトは休眠中だったので、関連サイトからのリンクは貼っていませんでした。

外部からのリンクは、httpのままでもリダイレクトされてhttpsに行くので当該作業はオプション的なものです。

私の場合は、Twitterからのリンクをhttpsに変更しました。(それだけです。)

作業項目リストに戻る

HSTSの設定

Googleは、HTTPSのサイトではHSTSをサポートすることを推奨しています。以下は、Search ConsoleヘルプページのHTTPSを実装する場合のおすすめの方法に記載されているHSTSの説明です。

HSTS は、自動的に HTTPS ページをリクエストするようにブラウザに指示する仕組みで、ユーザーがブラウザのアドレスバーに http を入力した場合でも HTTPS が使用されます。検索結果に安全な URL を提供するように Google も指示されます。これらはすべて、保護されていないコンテンツをユーザーに提供するリスクを最小限に抑えるものです。

Googleが推奨しているので、HSTSの設定も行いました。詳しい内容は、別途、記事を投稿予定です。

作業項目リストに戻る

以上です。作業を行う前までは、かなり不安だったのですが、実際にやってみると思いの外、スムーズにhttps化することができました。以前と比べると、移行作業を行う環境は格段に整っていると思います。

本サイトは、投稿記事数が少なかったこともあり、無事、大きな問題もなく移行することができました。ラッキーだったと思います。

運営期間が長く、記事数が多いサイトの場合は、https化は依然として作業は大変と思います。私の運営するサイトでも、長期間運営しているサイトについては、当面、https化することは予定していません。そのサイトは、WordPressではない古いオープンプラットフォームで動作する箇所があるため、https化は厳しいと思っています。

運営する比較的小規模なサイトの方は、https化する予定です。更新情報などがあれば、追記、または、新規に記事を投稿致します。

https化の動向や常時SSL化後の状況などによって、今後の対応を考えていく予定です。https化に費やした時間より、この記事を作成することにかかった時間のほうがはるかに長くなってしまいました。

関連記事:本サイトの主要なシステム構成と使用しているWordPressのテーマ、サイトで使用中のお勧めプラグインについて紹介しています。

本サイトのシステム構成、使用テーマ、お勧めプラグインについて
本サイトを構成する主要なシステムと使用しているWordPressのテーマ、プラグインを以下に紹介します。 運用サーバー 本サイトは、レンタルサーバーを利用して運営しています。使用しているサーバーは...

スポンサーリンク

2017年版: WordPressでのhttpからhttpsへの詳細移行ガイド
この記事をお届けした
Blogging Lifeの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする