XSERVER-WordPressのWebサイトSSL(https)化手順

こんにちは!korns solution(コルンズソリューション)のkamaです。

今回はXSERVER(エックスサーバー)で構築したWordPressのWebサイト(ブログ)を常時SSL化する手順についてです!

個人的なブログでもはやり通信の暗号化はした方がいいですし、検索順位も上がるという噂もあります。

XSERVERは無料で独自SSLをつけることができます。

かなり悪戦苦闘してしまったので、その辺を含めてご説明します。

XSERVERのSSL設定

 対象ドメインの選択

まずXSERVERのサーバーパネルにログインします。

サーバーパネルログイン画面

サーバーパネルログイン画面

パネルメニューから「SSL設定」を選択します。

対象のドメインを選択します。

ドメイン選択

ドメイン選択

 独自SSL設定追加

「独自SSL設定の追加」タブ→SSL化対象のURLを選択→「独自SSL設定を追加する」を選択します。

※必要に応じて「CSR情報(SSL証明書申請情報)を入力する」にチェックし、申請情報を変更してください。

独自SSL追加

独自SSL追加

 エラー修正(DNS編)

筆者はまずここで躓きました。※無事に追加できていれば読み飛ばしてください。

エラーが発生し、SSLの設定追加ができませんした(スクショ撮り忘れました)。

SSL設定一覧タブを見ても変化なしで焦りました。

が、原因はすぐにわかりました。ドメインのDNSの設定がXSERVERが指定するDNSになっていませんでした。

筆者はムームードメインでドメインを取得しましたので、ムームーのコントロールパネルから「ネームサーバ設定変更」で以下のように修正しました。

ネームサーバー1~5がムームー標準のDNSになってました。

ムームーDNS設定

ムームーDNS設定

DNSの変更すると反映に数時間かかるので、しばらく待ったあと再度SSL設定追加をチャレンジし、無事に追加できました。

「SSL設定の一覧」タブから確認します。

SSL設定一覧

SSL設定一覧

反映までに最大1時間かかるので、しばらく待ちます(特に通知はないです)。

反映が終わったら「SSL用アドレス」リンクからページが開くようになります。

 エラー修正(ブラウザキャッシュ編)

が、しかしここでもハマりました。何時間経ってもページが開きません。

※無事に追加できていれば読み飛ばしてください。

SSLページエラー

SSLページエラー

という文言から変わりませんでした…。

ここもなんとか原因がわかりました。chromeのキャッシュのせいでした。

「ctrl + Shift +Delete」を押して履歴消去画面を表示→「期間」に全期間を選択→「閲覧履歴」と「キャッシュされた画像とファイル」をONにし「データを消去」を選択します。

キャッシュ削除

キャッシュ削除

キャッシュ削除後、再度SSLリンクを押下したところ、無事にページが開きました。

 エラー修正(SSL鍵アイコン編)

が、やはりここでも問題が発生。※無事に追加できていれば読み飛ばしてください。

httpsで開いているのに「鍵」アイコンが表示されません。

URL鍵アイコン無し

URL鍵アイコン無し

調べてみると、ページ内に「http」のリンクがある場合は上の画像にようになってしまうようです。

さらに筆者の場合はドメインを変更(前回参照)していたので、前のドメインのURLがページ内に残ってました。

これを変換するために、「Search Regex」というプラグインをインストールし、「有効化」します。

「Search Regex」はhtmlを一括で置換してくれる便利なプラグインです。

Search Regexプラグイン

Search Regexプラグイン

「ツール」→「Search Regex」→以下のように入力→「Search」で確認→「Replace & Save]で置換します。

Search Regex置換

Search Regex置換

筆者の場合は変換後も鍵アイコンがついてくれませんした。

ブログの各ページを開いたときの生成されたHTML(ブラウザ上で右クリック→ページのソースを表示)を見たところSearch Regexでは変換できなかった箇所がいくつかありました。

まだ「http://korns-solution.com」や「http://kama3.jp」がいくつか見られました。

これは他に入れているプラグインの設定内でURLを指定しているところでした。

httpのURLの残骸

httpのURLの残骸

「外観」→「ウィジェット」や「ツール」や「設定」から自分のドメインがついたURLで「http」になっているものを手動で変換しましょう。

これでようやく鍵アイコンがついてくれました。

鍵アイコンつきURL

鍵アイコンつきURL

 エラー修正(ページが崩れてしまう編)

一体何度目か、やっぱり問題発生です。

鍵アイコンはでてくれましたが、肝心のページが崩れてしまいました。

壊れたブログトップページ

壊れたブログトップページ

ここは、WordPress→「設定」→「一般」→「WordPressアドレス(URL)」と「サイトアドレス(URL)」を変更すればOKです。

「http」を「https」にして「変更を保存」で確定します。

URL変更

URL変更

なんですが、スクショ撮り忘れましたがここがグレーアウトして変更できませんでした。

※人によっては修正後、画面が開かなくなることもあるそうです。

これはwp-config.phpの修正とphpMyAdminからDBを修正することで直します。

FTPソフトを使用してXSERVERに接続し、「wp-config.php」を取得し修正します。

FTPソフト(FFFTP)の使い方はこちらに書いてますのでご参照ください。

※XSERVERの「ファイルマネージャ」を使用して変更する方が楽かもしれません。少し下の「http→httpsへのリダイレクト」で記載します。

“WP_SITEURL”と”WP_HOME”でファイルの中身を検索し、ヒットした行をコメントアウト(”/”先頭に追加)します。

次にXSERVERのサーバーパネルから「phpMyAdmin」を開きます。

WordPressで使用しているDBを選択し、「_option」のついたテーブルを選択します。

「siteurl」と「home」がかかれた行の「option_value」をhttpsURLに書き換えます。

optionテーブル

optionテーブル

これでWordPress→「設定」→「一般」を確認すると、URLがhttpsが付いた状態になっており、ページも正しく表示されました。

 

http→httpsへのリダイレクト設定

 .htaccessの修正

きちんとSSL化はできましたが、実はhttpでアクセスすると普通に出来てしまいます。

そこでhttpでアクセスしたらhttpsにリダイレクトするように設定を入れましょう。

XSERVERにファイルマネージャにログインします。

※FTPユーザーとパスワードがわからないという方はこちらを参照してください。

ファイルマネージャログイン画面

ファイルマネージャログイン画面

ログインしたら、対象のドメインのフォルダ→「public_html」を開きます。

※ドメインによっては間に何階層かあると思います。

この中の「.htaccess」にチェックを入れ「編集」ボタンを選択します。

public_htmlフォルダ

public_htmlフォルダ

この3行を追加します。

環境によって.htaccessの内容は違うと思います。

筆者は「RewriteEngene On」についてはすでに記述されていました。

他の2行を4,5行目に追加しました。

これでhttpのURLでサイトにアクセスし、httpsにリダイレクトされればOKです。

簡単と聞いてましたが、サーバーの移行とドメインの変更が直前にあったため、なかなか苦労しました。

しかし、これで安全性が高まり、検索順位も優遇されるはずです!!

投稿者プロフィール

koki kamagata
koki kamagata
「kamaの技術ブログ」を管理しているkorns solution(コルンズソリューション) の鎌形と申します。

フリーランスのSEとして活動中です。

Javaの開発がメインですが、インフラも守備範囲ですので、幅広く投稿していきます!!!

コメントを残す

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