XserverでSSL化後にAll緑のhttpsを表示させる対処法

rapture_20160319203520

XserverのWordPressブログに独自SSLを導入する方法で無事契約ができたら、WordPress側でSSLに対応した設定が必要になります。

WordPressのカスタマイズに不慣れな方に向けて、わかりやすく解説してみました!緑のhttps表示を目指して、あともうちょっとがんばりましょう。

内部リンクの修正

自ブログの記事内で張っているリンクや画像のURLの冒頭は「http://~」で記述されているため、「https://」へ変更しましょう。

ただ手作業の変更は膨大な時間が掛かりますので、プラグインを利用します。

Search Regexプラグイン(全記事の一括置換)

インストールをしたら下記の設定にします。

Search Regex

1・Source

Post content(記事に対して検索を行う)

2・Limit to

Nolimit(検索や置換の上限数なし)

3・Order by(検索結果の表示順)

Ascending – 昇順
Descending – 降順 ここはお好みで!

4・Search pattern

ここに検索対象となるURLを入力。私の場合は「http://at15.biz」

5・Replace pattern

ここに置換するURLを入力。

「https://at15.biz」で入力しても問題ないのですが、「//at15.biz」にすることで、「//」より前の情報をWordPressが自動で取得してくれるようです。

これで、万が一SSLをやめる時が来ても、また置換せずOKになります。

6・Search

変更前に検索対象となるURLが含まれるデータを表示。

7・Replace

変更前に置換後のデータを表示。

8・Replace & Save

一括置換して、データを保存する。

Replace & Saveを押さない限り、データが変更される事はありません。

ウィジェットのURL変更

上記のプラグインではウィジェットを対象にできません。ウィジェットの画像やリンクを手作業で修正します。もしフッターもカスタマイズしていたら変更しましょう。

SNSボタンのURL変更

最新のSNSボタンはhttpsになっていますが、使用してるテンプレートによっては古いリンクの場合がありますので、手作業で「https://」に変更しましょう。外観→テーマの編集で直接phpを変更します(バックアップ必須)

https:に変更
  • hummingbird →「parts_sns.php」と「parts_sns_short.php」
  • Stinger →「sns.php」と「sns-top.php」
  • Simplicity →「sns.php」一部対応済
  • 賢威 → 最新版ではhttpsのURLを使用してました。

設定後にSNSボタンにカーソルを合わせて、URLが「https://」になっていることを確認できたらOK。

SNSのURL確認

.htaccessに追記

「http://」でアクセスしても「https://」に転送されるように設定をします。

「.htaccess」はテーマの編集から操作できず、サーバー内からダウンロードして修正をします。メモ帳では開けないので「TeraPad」をダウンロードしておきましょう。

.htaccessのダウンロード

1・インフォパネル→ファイルマネージャーにログインします。

ファイルマネージャーにログイン

2・SSL化したドメインをクリック。

ドメインをクリック

3・Public.htmlをクリック。

パブリックをクリック

4・.htaccessをクリックしてダウンロード。

public.htmlをクリック後に「wp」や「WordPress」のフォルダがある場合は、その中にWordPressがインストールされていて、.htaccessがあります。

.htaccessのダウンロード

5・.htaccessをTeraPadの上にドラッグして開く。

念のため.htaccessをファイルコピーして元データを残しておくといいですね。
https2

6・ファイル上部に追記

開いたファイルの1番上に下記のコードを記述します(すでに記述されているコードを上書きしないように!)

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

Header set Strict-Transport-Security "max-age=31536000;" env=HTTPS
最後に改行を2回入れて保存します(改行しないとエラーになります)
改行を入れる

7・保存した.htaccessをサーバーにアップロードします。

先ほどのファイルマネージャーで.htaccessを選択し、「public.html」にアップロード。

「wp」や「WordPress」フォルダがある場合は、そちらを指定しましょう。
.htaccessアップロード

表示URLの変更

1・wordpress管理画面の設定で表示URLを変更。

「http://」を「https://」に修正して変更を保存。

URL変更

これで設定終了です。お疲れ様でした!さっそく緑httpsになっているか確認しましょう。

一部httpsになっていない時の対処法

ここまで設定しても一部のページで緑httpsになっていない場合があります。この場合は地道にひとつひとつ原因を探さねばなりません^^;

そんな時に便利なのがFirefoxです。このブラウザーならエラー箇所をつきとめることができますよ。

Firefoxでエラー原因の確認方法

1・カギマーク→詳細をクリック。

Firefox

2・メディアをクリック。

ここに表示されるURLで「https://」になっていないものを修正していきましょう。

Firefoxの詳細

ただhttpsに未対応の外部サイトは、こちらでどうしようもないので諦めます・・・・。

最後に

GoogleアナリティクスとSearch Consoleで、「https://」のURLで再設定をしましょう。

さぁ、全ての作業が完了しました!これで個人ブログなのに無駄に安全な訪問者に優しいブログへ生まれ変わりましたね(笑)

httpsにしたからといって急に順位が上がったり、アクセスが増えるものではないですが、httpsに対応していないサイトよりは優遇されるかもしれませんね。あとは地道に記事を更新していきましょう^^

*メールアドレス
*お名前(HN可)