暗号化した通信をする上で避けて通れないSSLを導入したので、その手順をまとめます。
実はずっと前からSSL自体は設定していたのですがWordPressの設定をサボっていました(笑)
Googleなどの検索エンジンもSSL対応のサイトを優遇するそうなのでSEO的にも有利ですね。
アクセスや記事が少ないうちに対応を完了させておくと精神的にも良いですよ。
そこで備忘録を兼ねて記事にしてみました。
後で調べたらXserver公式のマニュアルにも簡単ですが、SSL化について書かれていたのでこちらも参考にしてみて下さい。
・Xsever公式マニュアル – Webサイトの常時SSL化
SSLとは?
SSLとは “Secure Sockets Layer” の略語で、暗号化した通信を行うためのプロトコルでNetscape社が提唱したのが始まりです。
プロトコルとは、今回の場合は、通信の手順のことを表します。
SSLでHTTP通信を行うことで安全性の高い通信を実現します。
これによって個人情報を扱うWebサイトでは基本的に必須の技術です。
アドレスが “https://” で始まるのでアドレスで判断できます。
今回、SSLの導入を実施した背景には、今月から通販サイトの運営をすることになりSSLの設定をした時にこのブログ (WordPress側) が設定されていないことに気付いたというからです。
このブログ自体は個人情報の取り扱いはありませんけどね。
でも、今後はSSL化されていないサイトはブラウザ側で警告が表示されるようになるかもしれませんからやっておくに越したことはないです。
(2018/04/26現在では、SSL化されているとブラウザのアドレスバーなどに安全なサイトとして表示される仕様です)
Xserverで無料独自SSLを設定
まずは、Xserverで独自SSLを取得していきます。
Xserverは標準で無料作成できますが、一般的には数万円以上かかります。
(これが全てのWebサイトに導入されていない理由の一因ですね)
設定方法はXserverのマニュアルに詳しく書かれているので以下をご確認下さい。
Xserver マニュアル – 無料独自SSL設定
設定完了後、1時間程度でSSLの設定が完了するのでそれまで待ちましょう。
ちなみにですが、SSLの設定をしても通常の非SSLでアクセス可能です。
(https://でもhttp://でも接続できます)
“https://~~” というHTTPS通信で接続できるようになれば設定完了ですので、次の設定へ進みましょう。
XserverのサーバーパネルからSSL設定を開きます。
サブドメインを選んで設定します。サブドメインが無い場合は “www.ドメイン名” を選べばOKです。
WordPressでサイトアドレスを設定
続いて、WordPressでサイトアドレスの設定をしていきます。
これはとても簡単で、設定 > 一般 から “hhtp://” を “https://” にするだけです。
この設定を行うとWordPress内の記事やTOPページなどへのリンクが “https://” になります。
但し、画像などのURLは “http://” のままなので、次の工程で置換していきます。
※この状態で “https://~~” にアクセスすると、ブラウザによっては “全てが安全でないため一部要素をブロックしました” のようなSSL化する前よりも不安を煽るような表示がでることがあります。
設定を変更するのはここだけです。設定後に一番下の “変更を保存” を押すことを忘れないで下さい。
WordPressの “http://” のURLを “https://” に置換
これがなかなか大変です。
自動で変換してくれるスクリプトがあるのですが、全てを変換してくれるわけではないので自動で変換できなかった分は手動で変換する必要があります。
Search Replace DB で一括置換
まずは、”Search Replace DB” という自動でWordpress内の文字列を変換してくるスクリプトを使います。
プラグインの “Search Regex” でも置換できますが、記事数が多かったり変換数が多いとエラーで失敗するらしいので以下の方法をおススメします。
まずは、interconnect/it の “Database Search and Replace Script in PHP” ページからダウンロードの申請を行います。
以前は申請など不要で直接ダウンロードできたようですが、今はメールでダウンロードリンクが送られてくる仕様になったようです。
interconnect/it – Database Search and Replace Script in PHP
※ “Database Search and Replace Script in PHP” はWordPress公式も推奨の変換手段です。
ダウンロードの申請をします。必要事項を記載したら “Submit” でメールが送られてきます。
入手して解凍したフォルダの名前を任意の他人が想定しにくい名前に変えておきます。
“Search-Replace-DB-3-1-0-emaildownloads-ojmsahifpwjdwekfn” とか適当に。
この後にサーバへUPしてWordPressのDBにアクセスするので万が一他人に使われてしまうとサイトが破壊される危険がある為です。
任意の名前に変更できたらWordPressのインストールディレクトリにUPします。
UPロードが完了したら “https://WordPressのサイトアドレス/先ほど決めた任意のフォルダ名/” にアクセスします。
すると、自動的にWordPressのデータベース情報が取得されるので置換処理をします。
一番上の “replace XXXXX width YYYYY” という欄にSSL前後のアドレスを入れます。
この時、自分のサイトのURLだけが置換されるように XXXXX = “http://WordPressのサイトアドレス”、”https://WordPressのサイトアドレス” とします。
XXXXX = “http://”、”https://” とすると外部へのリンクなどでSSLに対応していない場合はそのリンク先でエラーとなりますのでご注意下さい。
置換するアドレスが確認出来たら “live run” ボタンで置換を開始します。
完了したら直ぐに先ほどUPロードしたフォルダを全て削除しておきましょう。
(何度も書きますが、他人にDB情報を渡さない・改竄されない為です)
“dry run” ボタンでは、どのように変換されるかのプレビューが表示できるので、必要に応じて確認して下さい。
テーマの編集で手作業による置換
ここが一番大変です。
テーマの中にあるURLが “http://” のままなので、ブラウザのページ内検索機能などを駆使して一つずつ “https://” に変更できるか確認して変更していきます。
コメント行 (WordPressで見ると茶色っぽい文字色の部分) は無視して構いません。
外部画像やCSSなどは取得先がSSLに対応していることを確認して “https://” に変更しましょう。
SSLに対応していない場合は、利用規約など問題なければ自分のサーバにダウンロードして自分のドメイン内の参照として下さい。
WordPressで悩んだのが、”http://schema.org/” のマークアップです。
マークアップ (その要素にどんな情報が書かれているかGoogleなどの検索エンジンに伝える役目があります) 自体は良いことなのですが、このURLの “http://” を残しておくと気分が余り良くありません。
“http://” のままでも警告は出ないのでそのままにしておいても構いません。
(SSLにも対応していますが、非SSLのURLが正規みたいです)
テーマの編集以外でもウェイジェットや追加CSSに “http://” がある場合は、この機会に修正しておいて下さい。
Xserverで301リダイレクトを指定
最後にXserverで301リダイレクトの設定をします。
301リダイレクトとは、”恒久的な転送” と言われ、主にサイトのドメイン移行などで用いられます。
この設定を行うと、従来の “http://” でアクセスされても自動的に “https://” のアドレスに転送されます。
301リダイレクトは “.htaccsess” に以下の命令を追記することで可能です。
詳しい解説はググってみて下さい。
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule>
こちらの呪文のような命令を “.htaccsess” の先頭に追加して設定完了です。
“.htaccsess” の編集は “public_html” ディレクトリのファイルを直接viなどで編集するか、ftpでファイルをダウンロード→編集→アップロード、Xserverの場合はサーバパネルから可能です。
記載内容を間違えるとサイトが表示されなくなることがあるので、バックアップは取っておくようにして下さい。
まとめ
以上、XserverでのSSL化に関する備忘録でした。
今後はSSLが必須になる時代になるかもしれませんので、まだ導入していない方は早めのSSL化を済ませては如何でしょうか?
無料でSSLが取得し放題なXserverさん、ありがとうございます♪
ご質問等あれば、コメントやお問合せからお願いします。
コメントを残す