さくらインターネットのレンタルサーバーでWordPressを使用しているWebサイトを、SSL対応(httpからhttps)しました

よければこの記事をシェアしてみませんか?

2014年8月にGoogleが「HTTPS everywhere」を提唱したことによって、様々なサイトがSSL対応を行うようになりました。

ユーザーがもっと安全にサイトを閲覧できるよう、すべてのサイト所有者の皆様に HTTP から HTTPS への切り替えをおすすめしたいと考えています。

出典:Google ウェブマスター向け公式ブログ: HTTPS をランキング シグナルに使用します

私自身がこのWebサイトを作成しはじめた時も、「httpsの方がセキュリティー上は安心なサイト」というイメージだよな、とは何となく思っていました。ただ、実際にはサイト作成そのものに準備時間が必要だったので、それどころではなかったという状況でした。

フリーランス人事がサイトを公開してから半月経て気づいたこと
サイトそのものの作成は先月下旬から行っておりましたが、実際に「公開」しはじめたのはちょうど半月前です。もちろん、「公開」の前でもURLを知っ...

とはいえ、まだコンテンツもそれほど多くもない現時点で、SSL対応を行っておいた方が安心だろうと思い、着手することにしました。調べてみると、この手のことがあまり得意ではない私にとっては、結構時間がかかりそうだったのでこの3連休に行うことにしました。

このページのURLも

https://www.aldoni-hr.com

に変更しました!!

スポンサーリンク

まずはやるべきことを一覧化した

前後関係もあるはずなので、まずはやるべきことを一覧化しました。最終的には、タスクとして不足していたものもあったので、「参考資料」レベルになってしまいましたが(笑)、だいたいのタスクボリュームはわかりました。大きくわけると以下の通りです。

  1. SSL証明書の取得→サーバーへの設定
  2. WordPressの設定変更・リダイレクト設定
  3. コンテンツや外部リンクURLの変換
  4. 付随ツールのURL変更・再登録
  5. Facebook、Twitterなどのプロフィール情報変更

それぞれにさらにタスクは細分化されますが、これだけでもかなりのボリュームです。しかも、「2」はタスクの前後関係を間違えて、サイトそのものにアクセスできなくなったり・・・とてんやわんやでした。

SSL証明書の取得→サーバーへの設定

SSL証明書は、私がサーバーをレンタルしている「さくらインターネット」のコントロールパネル上で、直接申し込みました。3年間有効で3456円なので、それほど大きな出費でも無い。私のサイトで個人情報を扱うのは、「仕事のご依頼・お問い合わせ」フォームのみです。オンラインショッピングサイトは、別サイトで、かつ既にhttpsになっているので考慮不要。そういうこともあって、「必要最低限」のレベルのものにしました。

SSLのサーバーへの設定など一連の作業手順については、いろんなサイトで記事をアップされていました。ただ、画面イメージが若干古かったり、手順がスキップされているものもあったので、最終的には公式サイトが一番わかりやすかったです。

WordPressの設定変更・リダイレクト設定

ただ、この公式サイトのSTEP3が終わると、即時にhttpsに対応されるかのような表現となっており、ここでひっかかりました。さくらインターネットのサーバーは若干特殊です。そのため、Wordpressをインストールしている場合は、「リダイレクトループ」が発生します。つまり、URLに「https://・・・」と入力しても、しばらく待機した後エラー画面が表示されます。

そこで、やらなければいけないことが2つ。

  • WordPressのコンソール画面にて、URLを「http・・・」から「https・・・」に変更
  • htaccessとwp-configの設定変更(リダイレクト対応)

これはコンソール画面のURL変更が最初。そうしないと、コンソール画面にログインできなくなります。私は、ここで一回引っかかり、一度設定を戻す羽目になりました。

htaccessとwp-configに関する具体的な手順や、どういうロジックを記載するのかは、「httpからhttps さくらインターネット」などと検索すれば多くのサイトが出てくるので、そちらを参考にしていただいた方が確実です。この件については、さくらインターネットの公式サイトには掲載されていないので、「先人の知恵」が役立ちました。

一点、追記。バックアップツールとして「BackWPup」を使用している場合は、htaccessファイルに1文追加が必要です。具体的には、以下のコードを「RewriteEngine On」と「RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$」の間に追加しましょう。そうしないと、Backupツールが動かくなります。

RewriteCond %{REQUEST_URI} !^/wp-cron.php$

コンテンツや外部リンクURLの変換

ここまで終わると、「うわべ」は完成です。サイトを見てくださる方が「http・・・」とURLを入力しても、自動的にリダイレクトして本来のサイトにアクセスするようになっております。(とはいえ、ブックマークとかされている方は、是非ともURLの変更をお願いします。)

次に、各記事や画像、さらには外部リンクなどのURL変更です。これは全て手作業で変更することもできますが、かなり量が多いのでツールを使いました。それがこちら。

その後、機械的に変換できない部分もあるようなので、終わってから目検で確認しました。Webタイトルが表示されている「ヘッダー背景画像」のURLは自動変換されなかったようなので、画像の再アップで対応。

さらに、Style.cssと呼ばれるファイルのソースコードの直接修正が必要な個所も2つほどあったのですが、その解決策にたどり着くまではだいぶ時間がかかりました。Google先生のおかげで解決はできました。しかし、Wordpressの使用テーマ(テンプレートのようなもの)によって対応が異なるので、そもそも何がネックなのかをクリアにすることに、時間がかかったとも言えます。

付随ツールのURL変更・再登録

アクセス数などを確認するために登録しているGoogle Analytics、広告管理ツールのGoogle AdSenseやAmazon アソシエイトといった付随ツールのURLの変更を行いました。さらにhttpとhttpsでは別サイトとなるため、再登録をしないといけないツール(Google Search Console)もありました。とはいえ、この辺はちょっと調べれば手法もわかるので、抜けモレさえなければ大丈夫です。

Facebook、Twitterなどのプロフィール情報変更

意外と忘れがちなのですが、自分で手入力でWebサイトURLを記載している箇所の修正です。現時点だと、独立してから間もないこともあり全て掌握しているはず。たぶん全部網羅したでしょう(笑)。

ちょうど名刺も増刷しようと思っていたので、URLの変更は今回反映させるつもりです。

Yahooニュースなど、そもそもhttpsとなっていない外部サイトにリンクをはっている記事もあります。こちらは記事の内容上必要なものなので、そのままとしています。そのため、そういったサイトのURL横は「鍵マーク」とはなっていません。これは、その外部サイトの対応を待とうと思います。

<ご注意>昨日(10/9)の午後6時くらいから9時近くまで、モバイルによるアクセスの際、表示の一部が崩れておりました。現在は回復しております。もし、今でも表示スタイルがおかしい場合は、ブラウザーのキャッシュを一度破棄して再度アクセスしてくださいますようお願いします。

スポンサーリンク

よければこの記事をシェアしてみませんか?

フォローしませんか?