ITオンチでも意外に出来る!!WordPressサイトをhttpからhttpsへ常時SSL化した手順まとめ「中編」(Xserver版)

ITオンチでも意外に出来る!!WordPressサイトをhttpからhttpsへ常時SSL化した手順まとめ「中編」(Xserver版)

この5月のGW中にサイトをhttps化(常時SSL)しました。

やってみようと思ってはいましたが、何かあった時に困るので「やるなら長期休みに入ってから」としてたので、遂に実現と相成りました。

前回は「サイト内部に関する設定」をお伝えしました。
【前回の記事はコチラ】

今回は、その続きの「サイトの外に対しての設定」をお伝えしていきます。

前回もお伝えしましたが、私はWebサイトをいじったりするのは苦手です。
ハッキリ言って「ITオンチ」です(苦笑)

そのくせ、サイトを運営していくと「もっと良くしたい」という欲に駆られて、色々と「いじってみる」が、上手くできない事が大半・・・

調べてやってみても、分かっている人が「当然の事」として省いている手順の箇所で引っかかり止まって挫折ってのが定番のパターンです。

なので、今回、私がやった手順をほぼすべて画像で説明します。
説明も、専門用語は極力無くし、なるべく簡単に書いてみました。

私も最初はかなりハードルが高いと思っていましたが、
やってみると、意外と「簡単やん!」と思いました。

これを見て、私の周りにいる「IT系よく分からなーい!」
と言っているあなた。きっとできます!

では、さっそくお伝えしていきます。

https化に向けた手順

前回お伝えした「全体の手順」のは以下の通りです。

1. エックスサーバーでSSL設定する
2. WordPressの設定を変更する
3. サイト内URL(リンクや画像)を全て置換する
4. .htaccessにリダイレクト用のコードを追記する
5. SSLエラーのチェックと修正
6. 外部サービス&ツールの設定を変更する
7. SNSのシェア数を引き継ぐ

となります。

前回は「1〜3」までをお伝えしました。
今回は「4〜5」のお伝えになります。

前回もお伝えしましたが、これらを1つの記事にすると、
「物凄く見づらい&分かりにくい&両多過ぎ!」

と「挫折街道まっしぐら」になるので、私の方で各項目ごとに区切る事にしました。

「1~3」が内部関連
「4~5」外部関連
「6~7」他サービス関連

となります。※これは私が手順内容により独自に分けただけです。

それでは、外部関連に関する「4~5」をお伝えしていきます。

スポンサーリンク

「.htaccess」にリダイレクト設定をする

前回、無事に内部リンクを全て書き換え完了したら、次は
「http:とhttps:が一緒のサイトです」という設定をします。

これで、Googleさんや他のサイトに対し「同じサイト」であることを認識して貰えます。

実はある意味ここが一番キケンかも知れません。
間違えると、一瞬でサイトが「真っ白」になります。
ただ、戻し方はあるので真っ白になっても焦らず「大丈夫・大丈夫」とゆっくりつぶやいて下さい(笑)

※一応、プラグインでも対応は可能ですが、プラグインは使っているテーマや他のプラグインと干渉する恐れがあるので、私の方針として極力プラグインは使わないやり方でやります。

エックスサーバーにログイン

再びサーバーにログインします。
エックスサーバーのサイト⇒「インフォパネル」⇒でログイン。「サーバーパネル」にログインします。
サーバーパネルにログインしたら、「ホームページ」の箇所の「.htaccess編集」をクリックします。
編集したいドメイン名を選び「選択する」をクリック。
.htaccess編集画面に移ると、ちょっとした注意喚起の文章が出ます。

ここの「.htaccess編集」のタブをクリックすると、.htaccessの編集画面に変わります。
人によっては少しだけ何かが書いてあったり、結構な量が書いてあったりすると思います。

.htaccessにコードを書き込む作業

さて、いよいよコードを書き込む作業に入っていきます。

ちょっと待った!

ここで作業に移る前に、まずこの「htaccess」に書いてあるコードを全てをコピーし、Evernoteなりワードパットなり何でもいいので貼り付けて必ず残しておいて下さい。万が一、間違えてしまった場合の「大切な命綱」になりますので。

既存のコードの保存が終わりましたら、次は以下のコードを「.htaccess」にコピペします。

既にあるコード一覧の一番先頭に、リターンキー押して既存コードとのスペースを1つ空けてからコピペして下さい。(1つ空けると後々管理しやすいです)こんな感じにコピペして下さい。

コピペが終わったら、下にある「.htaccessを編集する(確認)」をクリックします。クリックした後、もう一度一番下までスクロールし「.htaccessを編集する(確定)」をクリックします。確定後は「.htaccessを編集しました。」になります。これで.htaccessの編集は完了となります。

が、本当に完了しているのか?間違ってないのか?
確認のために、一度、変更するサイトURLを入れて見て下さい。

問題なく見れれば、完了。
真っ白のページで見れない!!となった場合は、もう一度、.htaccessの編集に、Evernoteなりワードパットなりにコピペして保存しておいたモノを貼り付けて下さい。

そうすれば、無事に元の戻ります。

ここで何とか峠は超えた感じですかね。

サイト全体を安全な状態にする

ブラウザーで設定したサイトを見ると、しっかりURLが変わっているのが分かります。これで無事にSSL化されました・・・が、よく見ると、URLバーの右側に何やら盾のマークに「×」が付いているでは!?詳細を見てみると「承認されていないソースからのスプリクトを読み込もうとしています。」と出ます。

ナニコレ?
早い話が「完全にSSL化」されてない訳です。
要は「ページ内でhttpとhttpsが混在している」とう事です。

うーん、
さっき「Search Regex」で一括置換したのに何故?

ここで役立つのはGoogle Chromeの「デベロッパーツール」です。
※他のブラウザーを使っている方のやり方は省略します。

デベロッパーツールは、Chromeの右上の「︙」をクリックしメニューを出し、「その他ツール」内の「デベロッパーツール」を選びます。デベロッパーツールを開いたら「Console」のタブをクリック。すると、問題がある部分が確認できる様になります。よく見ると、「httpsのURL」と「httpのURL」の2つ表示されているのが分かります。

内容を見てみると・・・コレどこ??

エラー箇所は簡単にわかります。
エラーしているURL(httpで始まる方)をクリックすると、問題がある箇所が分かります。見た瞬間「ここかぁーー!!」
コレ、俺のプロフィール画像やん!(笑)

ここで、1つ分かったことは、
ウィジット内やテーマ内に独自に書き込んだ箇所は、手動でhttpからhttpsへ変えてやる必要があるという事です。

私はこの他にも、テーマ内のヘッダーに独自の設定をしていましたので、そちらを削除(httpsに書き換えると、何故か上手く動かなかったので)しました。

これで、無事エラーがなくなりました。これは変更前のURL

スマホサイトも問題なく「鍵マーク」が付いてます。左側が従来のサイト、右側がSSL化したサイトです。

おぉ〜!遂にここまで来ました。

これで、自分のサイトに関する設定は完了しました。

まとめ

いかがでしたか?

前編と思うと、ちょっと難しいかったかと思います。
でも、やってみると、意外にできちゃったりしませんでしたか?

やるまでは「何か難しいなぁー」とか「面倒臭ぇー!」と思っていたけど、やってみると案外できちゃう事ってありますよね。

私は苦労はしましたが、思ってたよりは簡単にできました。
(あくまでも「思ってたよりは」です)

次は、外部のサービス(主にGoogleのツール)を使っている人に関係する設定になるので、まだ全く使っていないよ」という方は、ここで「終了」となります。
お疲れ様でした!

スポンサーリンク