WordPressをhttpからhttpsにSSL化する手順(エックスサーバー編)

WordPress

SSL化(http→https)の手順

1.データベースのバックアップをとる
2.サーバーパネルででSSL設定を行う
3.WordPressの設定からURLをhttpsに変更する
4.サイト内のリンクを全てhttpからhttpsに置換する
5.「.htaccess」でhttpからhttpsへリダイレクトする
6.エラーを修正
7.各種ツールの登録をHTTPSに変更する
8.SNSのシェアカウントを引き継ぐ

データベースのバックアップをとる

何があっても復元できるように必ず事前にバックアップを取っておきましょう。

何もなければそれでいいのですが、何か作業を行う場合はバックアップを取ることを忘れずに。

ちなみにここでいうところのバックアップは、WordPressのデータベースと、ファイルそのものです。

どちらも手動でもプラグインでもバックアップできますので、お好みの方法でバックアップを取りましょう。

詳しくはこちらの記事をどうぞ

WordPress のバックアップ

サーバーパネルででSSL設定を行う

エックスサーバーのサーバーパネルにログインしてSSL設定をクリックします。
⇒ サーバーパネル

ドメイン選択画面でSSL化するドメインを選択します

「独自SSL設定の追加」タブを選択

独自SSL設定を追加する(確定)」をクリック

「SSL新規取得申請中です。しばらくお待ちください。」と出るのでしばらく待つと完了します。

SSL設定の一覧を見ると設定できているのが分かります。

SSL化してすぐはhttpsのURLにアクセスしても下のような表示になりますが、反映されるまでにしばらくかかりますので、少しの間待ちましょう。

ちなみに私は30分後に確認しから反映されていました。

WordPressの設定からURLをhttpsに変更する

WordPressのダッシュボードでhttpをhttpsに変更します。

設定 ⇒ 一般設定 ⇒ WordPressアドレス(URL)とサイトアドレス(URL)の2か所をhttpsに変更 ⇒ 変更を保存

URLがhttpからhttpsに変わるので再ログインする必要があります。

サイト内のリンクを全てhttpからhttpsに置換する

これでサイト自体のURLはhttpsになったのですが、記事内に設置したリンクや画像を表示するリンクがHTTPのままなので、すべてをHTTPSに変更します。

と言っても1つずつ変更して行くのは途方もない作業になってしまうので、Search Regexというプラグインを使って一気に置換します。

置換ツールはワードプレス「WordPress」の引っ越し!データベースごとサーバーやドメインを移転する方法で使った、Safe Search Replaceを使っていたのですが、寝ログさんのWordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)という記事でSearch Regexというプラグインを紹介していたので、そちらの記事を参考にして置換しました。

プラグインなのでこちらの方が簡単です。

Search Regexをインストールして有効化する

Search Regexをインストールして有効化します。

プラグイン ⇒ 新規追加 ⇒ キーワードに「Search Regex」と入力 ⇒ 今すぐインストール

Search Regexで一括置換する

HTTPをHTTPSに置換します。

ツール ⇒ Search Regex ⇒ Search patternとReplace patternに各URLを入力 ⇒ Replace
※取り合えずここでは「Replace & Save」ボタンはクリックしない

【Source】Post content(そのまま)
【Limit to】No limit(そのまま)
【Order By】Ascending(そのまま)
【Search pattern】http://abc.com(SSL化する前のURL)
【Replace pattern】https://abc.com(SSL化後のURL)
【Regex】チェックは入れない

Resultsでズラーっと表示されているのは、置換するものが1519件見つかったという意味です。

Search patternでhttpを探して、Replace patternのようにhttpsに置換しますよという感じです。

背景が薄い緑色から、薄いオレンジ色の文字列に置換されますよという意味です。

ここではHTTPからHTTPSに置換される表示になります。

数量が多い場合はちょっと骨が折れますが、間違って置換されると問題なので念のため書き換え前のURLと書き換え後のURLはちゃんとチェックしておきましょう。

全てチェックして問題がなければ「Replace & Save」ボタンをクリックして置換完了です。

occurrences replaced と表示されれば置換成功です。

数も1519になってます。

.htaccessでhttpからhttpsへリダイレクトする

現在はhttpとhttpsがどちらも存在している状態になっています。

両方でアクセスしてみると分かると思います。

Googleはhttpとhttpsを別のURLだと認識するので、これだと同じコンテンツが2つ存在していると認識してしまい評価が変わってしまう可能性がありますので、HTTPからHTTPSに301リダイレクトをしてURLを統合します。

301リダイレクトはドメインの評価を引き継ぎますので、HTTPSに変わっても何も変わりません。

今回は.htaccessというファイルにリダイレクトをするコードを追記して301リダイレクトを行います。

filezillaなどのFTPクライアントソフトでWordPressの入っている「public_html」ディレクトリを開いて.htaccessをPCにダウンロードします。

filezillaの使い方はこちら
⇒ 「FileZilla」でのファイルのアップロード&ダウンロードのしかた

PCにダウンロードしたら念のため複製してどこかに保存しておきましょう。

ダウンロードした.htaccessをテキストファイルで開いて先頭に以下のコードをコピペして保存してください。

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

コードを追記した.htaccessを上書きすればリダイレクトの設定は完了です。

SSL対応できていないエラーを修正

これでHTTPS化はできているのですが、必ずと言っていいほどエラーが出ると思います。

今回、このサイトもHTTPS化した後URLを見たら安全に接続できていないという意味のビックリマークになっていました。

正常な場合は鍵マークになるのですぐに分かると思います。

なぜこうなるかと言うと、まだHTTPSに変わっていないURLが存在し、HTTPとHTTPSが混在してしまっているからです。

プラグインで置換しきれてないURLが必ず出てくるんですね。それがエラーの原因になっているという訳です。

Google chromeのデベロッパーツールでエラーを確認し修正する

エラー(http)の見つけ方は簡単で、Google chromeのデベロッパーツールを起動してconsoleタブをクリックするだけです。

右上の点が縦に3つ並んでいるマークをクリック ⇒ その他のツール ⇒ デベロッパーツール(D)

consoleタブをクリック

右上に[!6]と出ているのがエラーの数で、「▼6」のタブをクリックすると下に展開するので6つのエラーが分かる。

今回はロゴ、OGPやTwitter Cardsで表示する画像(screenショット)、プロフィール欄の画像がHTTPのままでした。

この3つはテーマの機能でアップロードしたり、ウィジェットでアップロードした画像なのでHTTPのまま置換されていませんでした。

この3箇所を手動でHTTPSにしたらエラーが消え安全に接続できていました。

テーマを自分でカスタマイズしたことがある場合は、自サイトのURLを直接入れていないか疑ってみましょう。

WordPressは絶対パスを入れるのでここはマメにチェックして1つずつ手動で修正していきましょう。

各種ツールの登録をHTTPSに変更する

HTTPとHTTPSは別のURLだと認識されるので、アクセス解析などのツールもHTTPからHTTPSにする必要があります。

放っておくとGoogle Search Consoleからこんな通知が届くかと思います。

URLが変わったことを知らせていないのでHTTPSが認識できてないんですね。今お使いのツールをすべて確認してみましょう。

中にはHTTPSに対応していないツールもあると思いますので、必ずチェックしましょう。

私の場合は現状でGoogle Search ConsoleとGoogle Analyticsしか使っていないので、この2つのツールをHTTPSに変更する必要があります。

ただ、Google Search Consoleに関しては変更ということが不可能なので、HTTPSで新規に登録しなおすしかありません。

Google Search Console

URLを変更できないので、新規に登録をし直します。

詳しくはこちらの記事でどうぞ
Google Search Consoleへの登録方法

Google Analytics

Google AnalyticsはURL変更が可能なので、変更しておきましょう。

Google Analyticsにログイン ⇒ 左下にある「管理」をクリック

「プロパティ設定」をクリック

デフォルトのURLの三角の部分をクリックしてHTTPSに切り替る

下の方にスクロールしていき「保存」をクリック

SNSのシェアカウントを引き継ぐ

HTTPとHTTPSは別のサイトと認識されるので、FacebookやはてなブックマークなどのSNSシェア数がリセットされてしまいます。

そこでなんとかならないかなあと思っていたところさんで、SNSのシェアカウントを引き継ぐ事ができるSNS Count Cacheというプラグインが紹介されていたので、試してみました。

SNS Count Cacheをインストールし有効化したあと、SNS Count Cache ⇒ 設定で、対象SNSにチェックを入れて「設定の更新」をクリック。

※インストールと有効化は他のプラグインと同じなので省略します。

こんな感じで簡単にSNSのシェア数を引き継げるのですが、TwitterやFacebookの数を取得するには、登録しなければならないサービスがあるのでそのあたりも合わせて別記事で詳しく書きます。

とりあえずここまでで、WordPresのSSL化は問題なくできるはずです。

コメント