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証明書申請情報)を入力する」にチェックし、申請情報を変更してください。
エラー修正(DNS編)
筆者はまずここで躓きました。※無事に追加できていれば読み飛ばしてください。
エラーが発生し、SSLの設定追加ができませんした(スクショ撮り忘れました)。
SSL設定一覧タブを見ても変化なしで焦りました。
が、原因はすぐにわかりました。ドメインのDNSの設定がXSERVERが指定するDNSになっていませんでした。
筆者はムームードメインでドメインを取得しましたので、ムームーのコントロールパネルから「ネームサーバ設定変更」で以下のように修正しました。
ネームサーバー1~5がムームー標準のDNSになってました。
DNSの変更すると反映に数時間かかるので、しばらく待ったあと再度SSL設定追加をチャレンジし、無事に追加できました。
「SSL設定の一覧」タブから確認します。
反映までに最大1時間かかるので、しばらく待ちます(特に通知はないです)。
反映が終わったら「SSL用アドレス」リンクからページが開くようになります。
エラー修正(ブラウザキャッシュ編)
が、しかしここでもハマりました。何時間経ってもページが開きません。
※無事に追加できていれば読み飛ばしてください。
という文言から変わりませんでした…。
ここもなんとか原因がわかりました。chromeのキャッシュのせいでした。
「ctrl + Shift +Delete」を押して履歴消去画面を表示→「期間」に全期間を選択→「閲覧履歴」と「キャッシュされた画像とファイル」をONにし「データを消去」を選択します。
キャッシュ削除後、再度SSLリンクを押下したところ、無事にページが開きました。
エラー修正(SSL鍵アイコン編)
が、やはりここでも問題が発生。※無事に追加できていれば読み飛ばしてください。
httpsで開いているのに「鍵」アイコンが表示されません。
調べてみると、ページ内に「http」のリンクがある場合は上の画像にようになってしまうようです。
さらに筆者の場合はドメインを変更(前回参照)していたので、前のドメインのURLがページ内に残ってました。
これを変換するために、「Search Regex」というプラグインをインストールし、「有効化」します。
「Search Regex」はhtmlを一括で置換してくれる便利なプラグインです。
「ツール」→「Search Regex」→以下のように入力→「Search」で確認→「Replace & Save]で置換します。
筆者の場合は変換後も鍵アイコンがついてくれませんした。
ブログの各ページを開いたときの生成されたHTML(ブラウザ上で右クリック→ページのソースを表示)を見たところSearch Regexでは変換できなかった箇所がいくつかありました。
まだ「http://korns-solution.com」や「http://kama3.jp」がいくつか見られました。
これは他に入れているプラグインの設定内でURLを指定しているところでした。
「外観」→「ウィジェット」や「ツール」や「設定」から自分のドメインがついたURLで「http」になっているものを手動で変換しましょう。
これでようやく鍵アイコンがついてくれました。
エラー修正(ページが崩れてしまう編)
一体何度目か、やっぱり問題発生です。
鍵アイコンはでてくれましたが、肝心のページが崩れてしまいました。
ここは、WordPress→「設定」→「一般」→「WordPressアドレス(URL)」と「サイトアドレス(URL)」を変更すればOKです。
「http」を「https」にして「変更を保存」で確定します。
なんですが、スクショ撮り忘れましたがここがグレーアウトして変更できませんでした。
※人によっては修正後、画面が開かなくなることもあるそうです。
これはwp-config.phpの修正とphpMyAdminからDBを修正することで直します。
FTPソフトを使用してXSERVERに接続し、「wp-config.php」を取得し修正します。
FTPソフト(FFFTP)の使い方はこちらに書いてますのでご参照ください。
※XSERVERの「ファイルマネージャ」を使用して変更する方が楽かもしれません。少し下の「http→httpsへのリダイレクト」で記載します。
“WP_SITEURL”と”WP_HOME”でファイルの中身を検索し、ヒットした行をコメントアウト(”/”先頭に追加)します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* That's all, stop editing! Happy blogging. */ /** * The WP_SITEURL and WP_HOME options are configured to access from any hostname or IP address. * If you want to access only from an specific domain, you can modify them. For example: * define('WP_HOME','http://example.com'); * define('WP_SITEURL','http://example.com'); * */ if ( defined( 'WP_CLI' ) ) { $_SERVER['HTTP_HOST'] = 'localhost'; } // ↓ここをコメントアウトする //define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/'); //define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . '/'); // ↑ここをコメントアウトする /** Absolute path to the WordPress directory. */ if ( !defined('ABSPATH') ) define('ABSPATH', dirname(__FILE__) . '/'); |
次にXSERVERのサーバーパネルから「phpMyAdmin」を開きます。
WordPressで使用しているDBを選択し、「_option」のついたテーブルを選択します。
「siteurl」と「home」がかかれた行の「option_value」をhttpsURLに書き換えます。
これでWordPress→「設定」→「一般」を確認すると、URLがhttpsが付いた状態になっており、ページも正しく表示されました。
http→httpsへのリダイレクト設定
.htaccessの修正
きちんとSSL化はできましたが、実はhttpでアクセスすると普通に出来てしまいます。
そこでhttpでアクセスしたらhttpsにリダイレクトするように設定を入れましょう。
XSERVERにファイルマネージャにログインします。
※FTPユーザーとパスワードがわからないという方はこちらを参照してください。
ログインしたら、対象のドメインのフォルダ→「public_html」を開きます。
※ドメインによっては間に何階層かあると思います。
この中の「.htaccess」にチェックを入れ「編集」ボタンを選択します。
この3行を追加します。
1 2 3 |
RewriteEngine On RewriteCond %{HTTPS} !on RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] |
環境によって.htaccessの内容は違うと思います。
筆者は「RewriteEngene On」についてはすでに記述されていました。
1 2 3 4 5 6 7 8 9 |
# 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> |
他の2行を4,5行目に追加しました。
1 2 3 4 5 6 7 8 9 10 11 |
# 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> |
これでhttpのURLでサイトにアクセスし、httpsにリダイレクトされればOKです。
簡単と聞いてましたが、サーバーの移行とドメインの変更が直前にあったため、なかなか苦労しました。
しかし、これで安全性が高まり、検索順位も優遇されるはずです!!
投稿者プロフィール
.png?resize=96%2C96&ssl=1)
-
「kamaの技術ブログ」を管理しているkorns solution(コルンズソリューション) の鎌形と申します。
フリーランスのSEとして活動中です。
Javaの開発がメインですが、インフラも守備範囲ですので、幅広く投稿していきます!!!
最新の投稿
Java2019.01.22Open JDK (Java 11) をインストールする
WordPress2019.01.07気づいたらブログのアクセス件数が増えてました笑
eclipse(pleiades)2018.06.11【2018年版】Spring MVCを適用したWebアプリケーションの作成①~Maven設定編~
WordPress2018.06.08ブログを始めて3ヵ月くらい経ち…ドメインオーソリティが上がりました!