Webの記録

エックスサーバーの無料独自SSL「Let’s Encrypt」をWordPressに設定して、カンタンhttps対応

投稿日:2016年7月1日 更新日:

この記事は約 6 分で読めます。

xserver20160630
2016年6月30日から、「エックスサーバー」の全プランにおいて、「Let’s Encrypt」によるドメイン認証型SSL証明書の無料発行および設定機能の提供が開始されました。
無料で、しかも手軽に、SSL化できるとならば、早く試してみなければ・・・。
そんなワケで、WordPressに対してエックスサーバーの無料SSL「Let’s Encrypt」を設定してみます!

Chromeブラウザのバージョン56から「HTTPSでなければ警告を出す」動きになっているそうです。httpsへ切り替えるなら、今!ですね。

【追記】2016.11.29にこの記事を部分的に加筆しました



やってみたこと・目次

  1. 今回試した条件
  2. 簡単なSSL化手順
    1. WordPressの設定
    2. 過去に投稿した記事の内容を一括置換ができるプラグイン
    3. 最終チェック・どうしても「安全でない~」が消えない場合
    4. うまくいかない時の、最後の神頼みプラグイン「SSL Insecure Content Fixer」
    5. 301リダイレクト
    6. SSL化を取りやめたいとき
  3. Search Console・Googleアナリテクスなどの設定
  4. 感想など
  5. 参考にしたサイト


今回試した条件

今回試してみた時の状態は以下のとおり。

  • 独自ドメイン取得済
  • エックスサーバーを利用している
  • WordPressを設定完了している


簡単なSSL化手順

エックスサーバーでSSLの設定

手順はとても簡単で、エックスサーバーにある「SSL設定」のページを参考に、入力していくだけでした。

手順1:エックスサーバーのサーバーパネルにログインし、設定したいドメインを選択した状態にします。その後に、「SSL設定」をクリックします

xserver20160630_1

手順2:「独自SSL設定設定の追加」タブで、設定したいドメインを選択します。下にある「独自SSL設定設定の追加(確定)」ボタンを押します。

xserver20160630_2

手順3:「SSL設定の一覧」タブの中に、今回設定したドメインがちゃんと表示されたら、サーバーパネルでの設定は完了です。

xserver20160630_3


SSL化したURLをブラウザで表示してみます。すぐに表示できるときと、1時間程待たないと表示できないときがあります。

WordPressの設定

サーバーのSSL設定が完了し、ブラウザで表示できたら、WordPressにログインします。管理画面の「設定」→「一般」で「WordPress アドレス (URL)」と「サイトアドレス (URL)」のURLを「https」に変更します。

xserver20160630_4

画像や内部リンクの絶対パスを、「http」から「https」に変更します。
完全にSSL化できると、ブラウザで緑の鍵マークがURLの左に表示されます。(画像はGoogle Chrome)
xserver20160630_5
※WordPressの記事中の画像やリンクなど、全てに「http」から「https」に書き換えができてないと緑色の鍵マークが出ません。
テーマで読み込まれているjQueryやプラグインなども、書き換えが必要となります。(場合によっては、テーマやプラグインの見直しも必要になるかと思います)


過去に投稿した記事の絶対パスを「http」から「https」一括置換ができるプラグイン

search-pattern_ttl
手動で「http」から「https」に変更が大変・・・という時に、プラグイン「Search Regex」がとても便利そうです。
※私は自力で書き換えした後に見つけたので、書き換えできているか最終チェック用に使いました。
【使い方】
「Search pattern」に「http://~」をのドメインを入力、「Replace pattern」に「https://~」のドメイン入力して、「Replace」ボタンをクリックすると、修正箇所が一覧で表示されます。
置き換えたい時は、最後のボタンは「Replace&Save」の方をクリックします。
しかし、置き換えがちゃんとできているかは確認が必要です。
※記事数がとても多い場合は「Limit to」で一括で書き換える上限を設定した方が良いかもしれません。

最終チェック・どうしても「安全でない~」が消えない場合

緑色の鍵マークが出ないページを、「Google Chrome」のデベロッパーツールで確認しながら、書き換えができてない部分を修正します。

しかし、アフィリエイトなどでSSL対応していないものは書き換えできませんので、独自SSL対応ができなくなってしまいます。

テーマやプラグインで読み込まれているものが原因の場合は、見直しの必要があるかもしれません。


うまくいかない時の、最後の神頼みプラグイン「SSL Insecure Content Fixer」

ssl-insecure-content-fixer_ttl

httpに接続したら、強制的にhttpsに変換する「SSL Insecure Content Fixer」を使ってみるのも、ひとつのテかもしれません。。。
【使い方】プラグインを有効化した後、設定を「Fix insecure content」は「Simple」にチェック。「HTTPS detection」は「unable to detect HTTPS」にチェック。
これで私の場合は、うまく動作しました。


301リダイレクト

「301リダイレクト」も念のためにしておきます。(「.htaccess」に以下を記述)

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


SSL化を取りやめたいとき

エックスサーバーのサーバーパネル「SSL設定」の「SSL設定一覧」の部分を開き、取りやめたいURLの右横の「削除」ボタンを押します。
この後に出てきた画面で「確定」ボタンを押すことでSSL化を止めることができます。

Search Console・Googleアナリテクスなどの設定

運営が長いサイトほど、独自SSL対応は大変です。

既に記事をインデックスさせている場合は「Search Consoleの登録」「サイトマップの更新」「アクセス解析ツールの設定」も、設定が必要です。
【Googleアナリティクス】は、「アナリティクス設定」→「プロパティ設定」でURLを修正。
【Search Console】は、httpsになったものを新規サイト登録扱いで追加設定することが必要です。


感想など

無料でSSL化を簡単にすぐできて、とても驚きました。
同じサーバーでエックスサーバーでSSLの設定はWordPress2つ試してみましたが・・・、1つ目は5分程度、2つ目は1時間程度で、全て完了できました。
これからは、個人や小規模のWordPressにも簡単にSSL化できる時代になったんだと、実感しました。
新規サイトは良いのですが、既存サイトはいろいろ見直しも発生する可能性があるので、大変だなぁと思いました。
なるべく早いうちに、見直し・導入判断した方が良さそうですね。


参考にしたサイト



WordPressをこれから始めたい方に、オススメです。「エックスサーバー




-Webの記録
-, , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

ナビゲーションボタンのコーディングについて考えてみた

この記事は約 1 分で読めます。 ナビゲーションボタンのコーディングをする時に、どんな風にコーディングしていますか? 対応するブラウザとかによっても変わると思うのですが・・・。 今回、ちょっとナビゲー …

ファイルアップロード・メール添付機能をWordPressお問い合わせプラグイン「Contact Form 7」でカンタン実現!

この記事は約 1 分で読めます。 WordPressでお問い合わせフォームを付けるときは、いつもプラグイン「Contact Form 7」を利用しています。 日本人の作者で、利用者が多く、更新頻度の高 …

no image

「Wordbooker」を使ってWordPressからFacebookへ自動表示をさせてみた。

この記事は約 1 分で読めます。最近気になっているのは、「Facebook」です。 気になる事は即実行~♪ってコトで、興味半分で早速Facebookに登録です♪ 今回は、WordPressのプラグイン …

no image

IllustratorとPhotoshopで刺繍風のイラストと文字を作ってみた。

この記事は約 1 分で読めます。布地に刺繍をしたみたいなイラストと文字をIllustratorとPhotoshopで作ってみました。 ※布地素材は既に用意している状態の説明です。

no image

thickbox.jsを使ってLightBox風モーダルウィンドウにチャレンジ♪

この記事は約 1 分で読めます。今回も、数枚の画像を効果的に見せる方法にチャレンジしたいと思います。 ・・・で、画像をクリックすると大きな画像を表示させることが出来るLightBox風にしたいなぁって …