wpをHTTPS（SSL）化した手順＠Xserver・さくら・FUTOKA

ブログアフィリエイト
2018.06.19

2018年7月からGoogleさんが「SSL化してないサイトはめっちゃ警告を出したるで～」というので、重い腰を上げて手持ちのサイトをSSL化することにしました(*´Д`)

サーバーの『SSL化ボタン』みたいなものをポチれば終わりだろ、って思ってたけどそんなわけはなく、思いのほか面倒だったりしたので備忘録として殴り書きしておきます。

自分が契約しているサーバーは主に「Xserver」「さくら」「FUTOKA」の３つ。
それぞれでSSL化を行いましたので、まとめて解説します。

サーバーにてSSL化

Xserver、さくら、FUTOKAともに無料でSSL化が可能。

基本的にはサーバーのコンパネでポチるだけ！

Xserver

サーバーパネルにログインし「SSL設定」を開く。
XserverのSSL設定

対象ドメインを選択してSSLを追加する。

数分から数時間ほどで完了

さくらインターネット

サーバーコントロールパネルにログインし、左のメニューから「ドメイン/SSL設定」を選択。
さくらインターネットのSSL設定

対象ドメインの証明書「登録」をクリック。
「無料SSLの設定へ進む」ボタンをクリック。
「無料SSL化を設定する」ボタンをクリックして完了。

FUTOKA

勝手にSSL化されるらしい(ﾟ∀ﾟ；)
FUTOKAで作ったサイトを調べてみたら、Googleにhttpとhttpsが混在する状態でインデックスされていたw

有り難いと受け取るべきか、ありがた迷惑と受け取るべきか・・・

wp設定にてwpURL・サイトURLの変更

wpのURLをhttpsに変更する。

wpにログインして、設定→一般。
wpのHTTPS設定

WPアドレスとサイトアドレスをhttp→httpsに変更
wpのHTTPS設定

一度強制ログアウトされる。

htaccessで301リダイレクト

SSL化しただけだと、HTTPとHTTPSのふたつが存在することになってしまいます。
そこでhtaccessで301リダイレクトを行いhttpsに統一、及びページ評価を受け渡す必要があります。

基本的には.htaccessに下記のコードを記述するだけ。

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

Xserver

サーバーパネルにログインしてメニューからhtaccessを選択
Xserverのリダイレクト設定
ドメインを選んで、「.htaccess」編集タブからいじる。

さくら

さくら専用のSSL化用プラグイン『さくらのレンタルサーバ 簡単SSL化プラグイン』がある。
htaccessをいじらなくても、プラグインを入れて有効化・実行すればリダイレクトされるようになる。

詳しい使い方はさくらの公式ヘルプにて。
常時SSL化プラグインの使い方

FUTOKA

サーバーパネルにログインしてメニューから「.htaccess設定」をクリック。
設定するドメインの「編集」ボタンをクリックして修正。
FUTOKAのHTACCESS

自分だけなのか分からんけども、FUTOKAのサーバーパネルがめっちゃ重い・・・(*´Д`)

記事内の画像URLをプラグインで一括変換

次に記事内の内部リンク（主に画像）をURLをhttpsに変更する。
手動でやると作業が終わる前に2018ワールドカップが終わってしまうので、『Search Regex』のプラグインを使って一括で変換する。。。

プラグイン画面で「Search Regex」を検索し有効化。
Search_Regexプラグイン

ツールメニューからSearchRegexを開く。

Search_Regexプラグイン２

Search Patternに検索する文字列を入力。（例：http://wadanatu.com）
Replace Patternに置き換える文字列を入力。（例：http://wadanatu.com）

URLを入力したら、「Replace ＆ Save」ボタンをクリックし、一括変換を開始。

カスタマイザーの画像を読み込み直す(ロゴや背景など)

テンプレートのカスタマイザーで画像を設定している場合は再設定が必要。
ヘッダ画像・ロゴ画像・背景画像などなど。
同じ画像を読み込み直して保存するだけで良い。

正しくSSL化されているかチェック

Chromeでサイトを開いてSSL化が成功しているかをチェック。

URLの横のアイコンを確認しよう

SSL_成功

SSL＿問題あり

！マークが出ている場合は、HTTPSではなくHTTPで読み込まれている画像等が残っていたりするので、さらに修正が必要！

chromeのdevtoolコンソールでチェック

問題箇所を確認するためにサイトを開いた状態でchromeのデベロッパーツールを起動。
サイト上を右クリックで「検証」か、F12キーで開ける。

choromeデベロッパーツール

上のタブからコンソールを開き警告が出ているものを確認。
「mixed content」と出ているものがHTTPでリンクされてますよ～的なメッセージになりますので、これが読み込まれているところをチェックして修正していきます！

ウィジェット・プラグイン・CSS・functionなどチェック

なんとなく目星をつけたら、片っ端から修正作業！！！！

ウィジェット・プラグイン・CSS・functionなどいろんなところをチェック。

プロフィールやサイドバーで使われている画像などはおそらくウィジェットの可能性。
ランキング広告の画像等を一括で管理している場合はプラグインの可能性。

CSSやfunciton.phpは自分でいじった記憶がなければ見なくても良い。

そんな感じでコンソールの警告が出なくなるまで修正を繰り返す

おわり

URLに緑の鍵マークが出たら無事にSSL化の完了！

サイトを複数持っている場合は、頑張ってすべて行いましょう(*´Д`)

SSL化して「順位が下がった」とか「サイトが飛んだ」とか、よく耳にしていたので、とりあえず影響少ないサイトだけ実行してみました。
メインサイトはギリギリまで様子見てからやりますか( ﾟДﾟ)y─┛~~

【追記】wpのログイン時間で無限ループ発生

Xserverを使用しているサイトの一つをSSL化しようとしたところ、ｗｐのログイン画面にてエラーが発生するようになった。

『リダイレクトが繰り返し行われました』

タイミングとしては、Xseverでhttps設定を行い、ｗｐにてURLを変更したあとですね。

他のサイトは問題なく進められたのにナゼ(・・?

幸いなことにページは問題なく表示されている、ダメなのは管理ページのみ。

取り急ぎwp-confing.phpにhttpのURLを記述し、一時的にURLを戻す。

define('WP_HOME','http://hogehoge.com');
define('WP_SITEURL','http://hogehoge.com');

※hogehoge.comのところは自分のサイトのURLで

なんとか管理画面に入れるようになったので、キャッシュ系のプラグインやリダイレクトプラグインを停止してみるも変わらず・・・・

そんな中、見つけたのがこちらのサイト
エックスサーバーでWordpressをSSL化（https）する時に無限ループでハマった＠Qiita

どうやらwp-config.phpに下記のコードを記述しないといけないらしい。

$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';

動いた(・∀・)！！

ほんと助かった！！

ってか、同じエックスサーバーでどうしてこうも挙動が違うのか(*´Д`)

コメント

タイトルとURLをコピーしました