エックスサーバーとMixhostでSSL化した全手順！所要時間：数十分【ChromeのHTTPS警告対策】

「2018年7月以降、Chrome（バージョン 68）ではHTTP ページを開くときに「保護されていません」という警告メッセージが表示されるようになります」というメールが届きました。前々から言われてはいましたが、SSL化かぁー。めんどいなぁー、と思ってHTTPのままにしてたんですよね。今回重い腰を上げてHTTPSにしてみたら、意外や意外、ものの数十分で作業終了しちゃいました……。

エックスサーバーとMixHostでSSL化

まず初めに、今回SSL化するのはエックスサーバーとMixHostでそれぞれ運営しているWordpressブログです。
「なるべく手間を掛けない」という基本方針で行いましたが、特にアクセス数落ちてないのでやってみて正解でした。
ちなみにSSL移行の際にWordpressのプラグインを使用したり、データベースを弄ったりはしてません。そういう根本的な部分を弄る作業をしていないので、もちろんバックアップも不要。
バックアップ自体が面倒だし時間が掛かるので、取り返しのつかない変更は行ってないつもりです。まぁMixHostなら定期的に勝手にバックアップ取っといてくれるから安心だしね……。

WordPressをSSLに対応させる

まずは各サーバーでSSLの設定

HTTPSで接続できるように、まずはサーバーの設定を変更します。
エックスサーバーの場合はサーバーパネルにログインしてください。一番右の「ドメイン」欄から「SSL設定」を選択。さらにSSL化したいドメインを選択してください。

「独自SSL設定の追加」タブに移動したら、あとは「独自SSL設定を追加する（確定）」をクリックするだけ。特にチェックボックス類は弄らなくて大丈夫。画面上で申請が進行しますので、しばらく待ちましょう。
「独自SSL設定を追加しました。なお、SSL設定が反映するまで、最大1時間程度かかります。今しばらくお待ちください。」と出たらOKです。
なおMixHostは最初からSSL対応していますので追加作業は不要。これはありがたい!

サイトにHTTPSで接続してみる

サイトがSSL対応になったら、とりあえずHTTPSで確認してみましょう。通常のURLをhttpsに変更してブラウザでアクセスすればいいです。
この時にアドレスバーに「保護された通信」と緑色の字で出れば良いのですが……まぁそう簡単にはいきませんよね。
「保護されていません」と出る理由をつぶしていきましょう。

画像をすべてHTTPS接続で表示できるようにする

一番多い原因はこれです。<IMG>タグで読み込んでいる画像が、HTTP接続になっています。これを修正するのは超簡単。 function.phpにこう書いてしまいましょう。

function change_notssl_domain($text){
	$text = str_replace("http://自サイトのドメイン", "//自サイトのドメイン", $text);
	return $text;
}
add_filter('the_content', 'change_notssl_domain');

<A>タグ<IMG>共に、http://ドメイン名～ではなく//ドメイン名～とすることで、その時ページを表示している方式に勝手に合わせてくれます。http、httpsどちらかに固定する必要が無いのでめっちゃ便利。

アフィリエイトやブログパーツなどのスクリプトをHTTPS接続できるようにする

残りが無いかChrome DevToolsで確認

あとは基本的にF12キーを押して、Chrome DevToolsの警告をチェックしておけばいいです。
Mixed Content(混在コンテンツ)の警告がコンソール上にずらずら出ますんで、それだけ修正しましょう。
たとえば外部のバナー画像を表示してたりとか、Wordpressのテンプレに画像を決め打ちで入れちゃってたりとか、そういう箇所ですね。

WodpressのURLをhttpsに設定する

一旦混在コンテンツが無くなったら、基本的にはSSL対応自体は完了です。
仕上げに管理画面の設定⇒一般を開いてください。
ここの「WordPress アドレス (URL)」と「サイトアドレス (URL)」をhttpからhttpsに変更しましょう。

サーバーでリダイレクト対応

.htaccessで301リダイレクトする

あとは閲覧ユーザーと検索エンジンを誘導するためにリダイレクト設定を行いましょう。
.htaccessの一番上にこう書いてください。

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

これでサイト上のどこにアクセスしても、http接続だった場合はhttpsに強制リダイレクトしてくれます。

.htaccessでリダイレクトしたくない場合や、条件を付けたい場合

実はWordpressにはリダイレクト用の関数「wp_redirect」が用意されています。
.htaccessは素人には弄るのが難しいので、条件を付けたいときはfunction.phpでリダイレクトの設定をしてあげると楽です。
自分の場合はhttpsでのRSSフィードURLに対応していない所があったので、RSSだけはリダイレクトしない設定にしてみました。

function force_https_redirect() {
    if ( !is_ssl() && !is_feed() ) {
        wp_redirect( 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'], 301 );
    }
}
add_action ( 'template_redirect', 'force_https_redirect', 1 );

.htaccessのリダイレクトで上手くいかない人がいたら参考にしてください。

Google Analytics、Search Consoleなど外部ツールの適用

Google AnalyticsでサイトのURLをhttpsに変更する

Google Analyticsの設定欄もHTTPSに切り替えておきましょう。管理画面からプロパティの設定欄で変更できます。

ドロップダウンでHTTPからHTTPSに変更。別にURLが違っていても、アナリティクスのタグさえ埋め込まれていればカウント自体はされるのですが、今後の事も考えてきちんと切り替えておくと良いと思います。

Search ConsoleにSSL化したサイトを追加する

多分一番面倒なのがここ!
Search Consoleではhttp://で始まるURLとhttps://で始まるURLは別物として認識されます。
SSL化したサイトは新規で追加するようにしましょう。また、「wwwあり」「wwwなし」どちらも追加しておく必要があります。
さらにGoogle AnalyticsとSearch Consoleを連携していた場合は、いったん解除してSSL化したほうを連携しなおしましょう。
あとは古い方のSearch Consoleで「Fetch as Google」を実行すると、きちんと301リダイレクトされていればステータス欄に「リダイレクトされました」と表示されるはずです。
ここで失敗していると、SSLサイトがクロールされない可能性があるので、しっかり確認しておいてください。

SSL化まとめ

・エックスサーバーとMixHostでの違いは、最初のSSL化設定があるかないかだけ
・DBバックアップが必要な作業は特になし
・http⇒httpsへの置換はfunction.phpで一括処理すればラクチン
・リダイレクトで困ったらfunction.phpでやってしまおう
・外部ツールの設定変更も忘れずに

いかがでしたでしょうか? 手順さえはっきりしてれば、意外と簡単にできるSSL化でした。
混在コンテンツが多くなければ、ものの数十分で作業終了します。
今回いくつものサイトを一気にSSL化したんですが、一日であっけなく完了しちゃってビックリでした。
SSL対応で検索順位が落ちた話などもきいていたので放置していたサイトなんかもあったんですが、さすがにブラウザ上に警告が出てしまうのは避けたいと思ってSSL化に踏み切ってみました。
結果として手間を掛けずきちんとSSL化でき、アクセス数も落ちず、特に悪い点は見当たらなかったです。
迷ってる人は、とりあえずChrome68のリリース前にやっとくと良いですよ!

ニュースブロガーの独り言

Wordpressブログで躓いた事や問題解決の備忘録。PHP/HTML/CSSのTips。仮想通貨とアフィリエイトも。

エックスサーバーとMixhostでSSL化した全手順！所要時間：数十分【ChromeのHTTPS警告対策】