エックスサーバー無料独自SSLでWordPressを常時SSL化するやり方を解説していきます。
ブログ・サイトのSSL化はChromeで『保護された通信』とサイトの信頼性を確保するためにも必須の作業です。
逆にこのような表示がでたらやっぱり印象はよくないですよね。
今までWordPressでブログを構築していた人はもちろん、新規ブログを立ち上げる際にも必ず行ってください。
新規で立ち上げるWordPressでは、そこまでデメリットはないですが、今まで構築していたWordPressに関してはしっかりとバックアップをとった上で『http://→https://』へ書き換えていかないといけません。
また、使用されているASPによってはアフィリエイトリンクの書き換えも必要になるので、確認しておきましょう。
- バックアップをとる
- エックスサーバーでSSL設定を行う
- WordPressの設定からURLを変更する
- Search Regexて内部リンクを置換する
- .htaccess にリダイレクト用のコードを追記する
といった手順で行いますので、1つずつ解説していきます。
①事前にデータベースのバックアップをとる
まずは、事前にデータベースのバックアップをとっておきます。
こうしたWordPressの設定を直接変更する際には、必ずと言っていいほど『バックアップ』を取るべきです。
サーバーによっては、サーバー側でバックアップをとってくれている場合もありますが、復元する際にほとんどの場合お金がかかるので、可能な限り自力でやっておいた方が良いでしょう。
金額的には数万円かかりましたね。
時間的には結局数日〜1週間以上かかることがほとんどですので、外注する際は計画的に行った方が良いでしょう。
自力で行った際に『もし間違えてしまったらどうしよう！？』ということがあっても、バックアップをとっておけば問題ありません。
復元してもう一度やり直せばOKです。
バップアップにはプラグインを使用します。
- BackupWPup
- UpdraftPlus
バックアッププラグインはこのどちらかがおすすめですし安心です。
経験上、どちらでもトラブルはありませんでしたが、復元しやすいのはUpdraftPlusｄで、情報が多いのは現在のところBackWPupですね。
情報が多いものの方が一般的には安心ですのでここでは、データベースのバックアップ方法としてBackWPupで解説していきます。
- WordPressにログイン
- 『プラグイン』
- 新規追加
- BackupWPup のインストー ル・有効化
を行い、Wordpress 管理メニューの「BackWPup→ Dashboard (ダッシュボード)」メニューを選択します。
ダッシュボード画面が表示されたら、「One click backup, Download database backups』もしくは以下のような表示が出ますので、クリックして SQL ファイルを取得します。
すると、サイト名とデータベース名から名前が付けられた以下のような SQL ファイルがダウンロードされます。
これには結構時間がかかる場合があるので、その際はしばらくお待ちください。
②エックスサーバーでSSL 設定を行う
次にエックスサーバーの『サーバーパネル』にログインします。
ログイン後『SSL設定』をクリックしてください。
次に、ドメイン選択画面で、SSL化したいドメインの列の『選択する』をクリックします。
そうしましたら『SSL設定』の画面になりますので、『独自SSL設定の追加』のタブをクリックします。
設定ドメインが正しいことを確認し、画面右下の『独自SSL設定を追加する(確定)』をクリックしてください。
ちなみに、設定対象ドメインの下に『CSR情報(SSL証明書申請情報)を入力する』のチェック項目は選択しなくてOKです。
その後は『SSL新規申請中です。しばらくお待ち下さい』と表示されます。
すると今度は画像のように『独自SSL設定を追加しました』というメッセージが表示されますので確認してください。
最後に、『SSL設定一覧』を開くとこのようにSSL用アドレスが表示されます。
『SSL要アドレス』をクリックするとSSL化されたサイトが表示されますが、先程のメッセージでもあったように、設定が反映されるまで最大1時間程かかります。
また、反映されていない間はエラー画面が表示されますので、サイトが正しく表示されるようになってから次の設定に進みましょう！
- この接続ではプライバシーが保護されません：Chrome
- 安全な接続ではありません：Firefox
- このWebサイトのセキュリティ証明書には問題があります：Microsoft Edge
といったようなメッセージがお使いのブラウザによって表示されますので、この間は次に進むことはできません。
③WordPress の設定から URL を変更する
設定が反映されたら今度は以下の手順で、WordPressの設定からURLを変更していきます。
- SSLしたいサイトの管理画面『設定』→『一般』をクリック
- WordPressアドレル(URL)・サイトアドレス(URL)のURLを『https』表記に変更する
- 設定後『Search Regex』で『Replace』をクリックして置換
- 置換前、置換後全てのURLが正しければ『Replace＆Save』をクリック
といった手順で行っていきますので、1つずつやり方を解説していきます。
- SSLしたいサイトの管理画面『設定』→『一般』をクリック
- WordPressアドレル(URL)・サイトアドレス(URL)のURLを『https』表記に変更する
まずはこの手順を以下の画像のようにやっていきます。
変更前
変更後
このように設定できたら『変更を保存』をクリックしてください。
そうすると、再度ログイン画面に飛ぶので、ログインをしてhttpsになっていればOKです。
④Search Regexて内部リンクを置換する
次は前項で挙げた
- 設定後『Search Regex』で『Replace』をクリックして置換
- 置換前、置換後全てのURLが正しければ『Replace＆Save』をクリック
をやっていきます。
WordPressプラグイン『Search Regex』をインストールし有効化してください。
その後、WordPress管理画面の『ツール』→『Search Regex』をクリックします。
するとこのような画面になりますので、以下の項目を同じように設定してください。
- Source：Post content（デフォルト）
- Limit to：No limit（デフォルト）
- Order By：Ascending（デフォルト）
- Search pattern：http://wp-simplicity.com（SSL化する前のあなたのURL）
- Replace pattern：https://wp-simplicity.com（SSL化後のあなたのURL）
- Regex：選択不要
設定ができましたら『Replace』をクリックしてください。
ここまでの作業では、一度置換した結果が表示されるだけで、本当に置換されている状態ではありません。
『Replace』をクリックすると、置換した結果を一時的に表示した一覧が並びます。
実際に『Search Regex』が置換する部分は上の画像の赤字の部分。
薄黄緑色の部分が置換前、下の薄黄色の分が置換後になります。
この時点で、置換前後のURLが間違っていないかを確実にチェックしておきましょう！
置換後は元に戻せないので注意してください。
置換前・置換後全てURLが正しいことを確認できましたら、『Replace＆Save』をクリックしましょう。
正しくSSL化ができていた場合は、サイトを更新すると『保護された通信』とChromeで表示が出ますので確認してみてください。
⑤.htaccess にリダイレクト用のコードを追記する
ここまでの設定が完了した時点では、まだ『http://』でも『https://』どちらでも表示が可能であるため、『https://』1本で表示されるための設定が必要です。
そのために必要なのが、.htaccess(ドットエイチティーアクセス)なんですね。
そうしましたら、エックスサーバーのサーバーパネルで『.htaccess編集』をクリックし、SSL化したいドメインの『選択する』をクリックして下さい。
『.htaccess編集』のタブをクリックし、画像のように以下の表記になっていることを確認します。
# BEGIN WordPress
# END WordPress
そうしましたら『# BEGIN WordPress』の上に以下のコードを入れてください。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]</IfModule>
挿入後は以下の画像のようになります。
ここで注意しておきたいのが、以下のような表記がある場合があること。
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php $ – [L]RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]</IfModule>
# END WordPress
こういった場合は、以下のコードと文字列が重複する場合があるため、エラーが出ることがあるので注意してください。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]</IfModule>
文字列に重複した箇所はある場合には、以下の赤字の部分で表記したように、異なる文字列の部分だけを挿入してください。
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule
^(.*)$https://%{HTTP_HOST}%{REQUEST_URI}
[R=301,L]
RewriteBase /
RewriteRule ^index¥.php$ – [L]RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]</IfModule>
# END WordPress
これらのことが確認できましたら、以下の画像のように『.htaccessを編集する』をクリックしていきましょう。
ここまでの.htaccess を編集する作業は、今まで使っていたhttpのURLからうまくhttpsのURLにリダイレクトがかかるようにするために行っています。
うまくリダイレクトができるようになったかどうかは、検索エンジンて元の http://~の URLで検索す るとすぐに https:// ~のURLに変換されて検索されるかを見れば確認できます。
その他の設定
ここまでのサイトに関する設定では、アフィリエイトを行っていく上では少し足りません。
- Search Console
- Google Analytics
- アフィリエイトリンク修正
最低でもこれらのことは実施しておきましょう。
その他でにもSNSやGRCの設定をしておいた方が良い場合もありますが、僕はしていないのでここでは割愛します。
Search Console
まずはSearch Consoleからやっていきましょう。
Search Consoleにログインしてください。
その後、画像のように『プロパティを追加』をクリックします。
『https:// ~』のドメインを入力し、『追加』をクリクしていきます。
その後、以下の画面になたら記載事項を確認し、チェックを入れて『確認』をクリクしましょう。
Google Analytics
GoogleAnalyticsにログイン後、どの画面でもいいので画面左下『管理』をクリックします。
その後は、『プロパティ設定』をクリック。
『デフォルトのURL』を『https:// ~』にドメインに変更し、『保存』をクリックしていきましょう！
これで解析ツールはOKです。
アフィリエイトリンクの修正
Search Regexの今までの操作では、アフィリエイトリンクが『http』のままになっています。
そのため、Search Regex を使って個別にアフィリ エイトリンクも SSL化する必要があります。
ASPによっては、ASP側で変更してくれている場合もあるのですが、
- アクセストレード
- レントラックス
のURLが変換されないようですので変換方法を記載します。
他のASPもリンクが古い場合は http のままになっているので確認するよにしましょう。
大手の場合はだいたい大丈夫ですが、小規模のクリローズドなASPは必須です。
アクセストレードの場合
アクセストレードのリンクは Search Regex て赤 字の部分を変更してください。
【変更前】
<ahref=”http://h.accesstroade.net/sp/cc?rk=000000”
rel=”nofollow” target=”_blank”> 自 由 テキスト <img
src=”http://h.accesstrade.net/sp/rr?rk=000000”
width=”T” height=”1″ border=”0″ alt=”” /></a>
【変更後】
href=”https://h.accesstrade.net/sp/cc?rk=000000”
rel=”nofollow” target=”_blank”>
7 + 7 + <img
src=”https://h.accesstrade.net/sp/rr?rk=000000”
width=”1″ height=”1″ border=”0″ alt=”” /></a>
レントラックス
レントラックスは赤字、青の部分をそれぞれ Search Regexて変更してください。
【変更前】
<imgsrc=”http://www.rentracks.jp/adx/p.gifx?idx=000000”
border=”0″ height=”1″ width=”1″><ahref=”http://www.rentrocks.jp/adx/r.html?idx=000000&
dna=0000″ target=”_blank”>自由テキスト</a>
【変更後】
<imgsrc=”https://www.rentracks.jp/adx/p.gifx?idx=000000”
border=”0″ height=”1″ width=”1″><ahref=”https://www.rentracks.jp/adx/r.html?idx=000000
&dna=0000″ target=”_blank”>
自由テキスト</a>
よくあるエラー＆対処方法
以上でSSL化は完了ですが、画像やテーマによってはエラーが出る場合がありますので、解消法を掲載しておきます。
サイドバーやヘッダーに画像が入っているものは、Search Regexの一括変換の対象外でので、直接『https:// ~』の表記に変更したり、画像を登録し直す必要があります。
サイトロゴ画像を変更
まずはWordPress管理画面の『外観』から『カスタマイズ』→『サイトロゴ・アイコン』をクリックしていきましょう。
ロゴ画像をアップロードの欄に、アップロードされている画像を消し、再度『画像を選択』よりアップロードし直していきます。
トップページの画像
トップページの画像も同様に対応していきましょう。
全てのテーマで起きるわけではないですが、STORK・TCD・AFFINGERでエラーが確認されているようです。
サイドバーの画像やリンク
WordPressの管理画面で『外観』→ウェジェットをクリック。
『メインサイドバー』や『フッター』などに挿入しているテキスト内リンクが『http』のままになっていないか確認し、『https』に書き換えましょう。
プラグイン内のエラー
WordPressプラグイン『postsnippets』など、プラグインの設定で使用しているリンクはSearch Regexの一括変換の対象外ですので、個別で『https』の表記に書き換える必要があります。
TCDの場合
『LazyLoad』のプラグインが有効化されていると、SSL後画像が表示されません。『LazyLoad』のプラグインを停止すると直ります。
STORKの場合
LPページの表記がSearch Regexの一括変換の対象外ですので、個別に変換しましょう。
moreタグの場合
記事内に『more』タグを使用している場合、このリンクはSearch Regexの一括変換の対象外ですので、個別に変換しましょう。
ワードプレスの常時SSL化エックスサーバー編のまとめ
エックスサーバーでワードプレスを常時SSL化するやり方をご紹介してきましたが、いかがでしたでしょうか？
一見作業が多く、難しく感じてしまうかもしれませんが、実際にやってみるとそこまで時間のかかるものではありません。
稼いでいる人は、主要サイトは外注化してしまって、ゆっくり管理しているサイトを自分で行うようにするといいですね。
とはいえ、僕はその時間も惜しかったので全部外注しました。
やっぱり時間って一番大事ですからね。
優先順位を考えて、前もって取り掛かることを意識していきましょう。
見た目的にもセキュリティーに関してもそうですが、『保護された通信』というのは大きな要素ですし、Googleがそうしましょうというならするしかありません。
Webサイトとはお店と同じですので、より安全でスムーズなサイトである必要があるわけです。