[4]リダイレクト設定(httpからhttpsへ)[WordPress][Xserver]

[1]でドメインを取得し、[2]でレンタルサーバーに新しいドメインを追加して[3]でレンタルサーバーにワードプレスをインストールしました。次は、リダイレクトの設定をします。「ドメインの取得がまだできてないよ」という方はこちらを、「サーバーに新しいドメインを追加してないよ」という方はこちらを、「ワードプレスをまだインストールしてないよ」という方はこちらのページを参考に、ここまでの過程を済ませてくださいね。「説明はいらないから、やることだけ教えて!」という場合は、以下を参考にしてください。矢印が2つ(⇒⇒)はページ移動を意味しています。

【ワードプレスログイン】⇒⇒[一般設定]→[http://をhttps://に変更]

【エックスサーバーログイン】⇒⇒【サーバーパネル】→[ホームページ]→[.htaccess編集]⇒⇒【ドメイン選択画面】→[ドメイン選択]→[.htaccess編集タブ]→(対象ドメイン確認)→[.htaccess編集]
⇒⇒【.htaccess編集】【.htaccess欄】「以下三行コピペし、確認画面へ進む」
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]→確認して「実行」

リダイレクトの設定をするとは?

リダイレクトとは、簡単に言うと「自動的に転送させる仕組み」のことです。もともとあったサイトの記事の内容はそのままに、URLだけを変更して新しいURLに変更したい場合、古いサイトに訪れた読者を新しいURLに自動的に転送する仕組みです。

今回設定するリダイレクトの設定はこの説明とは少し異なり、『「http://」、「https://」、「http://www.」、「https://www.」を1本化させて表示させる』という設定になります。

URLを統一するを図で説明

この設定をしていない場合、
「http://○○○.○○」のページを直接打ち込むとhttpのページが、「https://○○○.○○」を直接打ち込むとhttpsのページが表示され、たどり着くページがバラバラになってしまいます。閲覧数などを知りたいときは管理が煩雑になりますし、セキュリティ的にも最初から「https」に1本化させたほうが望ましいので、この設定は記事を書き始める前に必ず行うようにしてください。

なお、この設定を行うと上の図のように「http://○○○.○○」と打ち込んでも、「http://www.○○○.○○」と打ち込んでも、「https://www.○○○.○○」と打ち込んでも、「https://…」のページが自動的に開くようになり、セキュリティ的に安全なサイトかつ、管理のしやすいサイトを運営することが可能になります。

リダイレクトの設定の仕方

リダイレクトの設定をするには「WordPress側での設定」と「エックスサーバー側での設定」の2つの設定をする必要があります。行程自体は簡単ですが、慎重に行ってほしい内容もあるのでゆっくりと進めていきます。まずはWordPressの設定から行いましょう。

WordPress側の設定

[3]の続きからおこなっている方は、管理画面URLのリンク(…wp-admin/)をクリックしてください。下の画像の赤丸のリンクです。もし、画面を閉じてしまった!場合でも大丈夫です。

簡単インストール画面からWordPress管理画面へ

画面を閉じてしまったり、日をまたいで行う場合などは、[エックスサーバーにログイン]し、サーバーパネルから[WordPress簡単インストール]をクリックして、該当のドメインを選べば上の画像のページに移動しますので、管理画面URL欄に表示されているリンクをクリックしてください。メモを取っている方は、アドレスバー(URLバー)に直接入力してもOKです。

①WordPressにログイン

管理画面URLをクリックするとWordPressのログイン画面が別のタブで開きます。ここに、[3]の工程で入力した「ユーザー名(またはメールアドレス)」と「パスワード」を入力して[ログイン]ボタンをクリックして、WordPressにログインします。

WordPressログイン画面

次回ログインの際にパスワードの入力を省きたいときは「ログイン状態を保持する」にチェックを入れてください。(PCのcookieなどの設定によっては、チェックを入れても保持されない場合があります)

②ダッシュボード画面に移動

WordPressにログインすると、ダッシュボード画面が表示されます。下の画像にある数字はWordPressのバージョンで、WordPressをインストールした時のバージョンが表示されています。この場合は『WordPress5.9』で、概要などの説明は下に書かれています。

WordPressに初めてログインした最初の画面

「セキュリティ保護なし」表示

エックスサーバーの管理URLからWordPressへ初めてログインすると、アドレスバーの部分に『セキュリティ保護なし』と現れる場合があります。これは、http://・・・のURL(httpsのsがないURL)が表示されているための警告表示ですが、これから設定を行うので安心してください。次に進みます。

③一般設定画面へ移動

左側の黒い部分の一覧(メニュー)から、[設定]を選択してクリックします。

設定を選択してクリック

設定にマウスを合わせると(マウスオーバー)右側に設定項目が表示されるので、[一般]ボタンをクリックすることもできますが、「一般設定」に移動する場合は[設定]ボタンを直接クリックするだけで移動できるので覚えておくと便利です。

④「s」を挿入(2か所)

一般設定の画面に移動したら、上から3項目目と4項目目の「http://」を「https://」に変更します。

 

http://をhttps://にする(2か所)

1項目目:サイトのタイトル

1項目目のサイトのタイトルは、エックスサーバーのサイトでWordPress簡単インストールをした際に設定した「ブログ名」が反映されています。サイトのタイトルは変更可能ですが、あまり頻繁に変更するのはお勧めしません。

2項目目:キャッチフレーズ

次のキャッチフレーズは、WordPress簡単インストールの際に設定項目はありませんでした。デフォルトでは「Just another WordPress site」というテキストが入力されていますが、このテキストは削除して空白にしてください。

【参考記事:キャッチフレーズを空白にする理由】

3項目目:WordPressアドレス(URL)

WordPressアドレスは、WordPressが保存されている場所のURLです。基本的に3項目目のWordPressアドレスと4項目目のサイトアドレスは、このサイトの工程のとおりに進めていけば同じURLになるはずですが、WordPressのインストール時にファイルを指定した場合などは異なることもあります。(下記画像参照)

WordPressインストール時にフォルダを設定した場合

WordPressアドレスは「http://」を「https://」に変更するだけにして、URL自体の追加削除はしないようにしましょう。サイトにたどり着けないなどのトラブルが実際に起こっています(対処方法はあるようですが、私は変更したことがないので詳しく説明することはできません)。

4項目目:サイトアドレス(URL)

サイトアドレスは、サイトにアクセスするためのURLです。前述のように「フォルダを指定」した場合、「サイトアドレス(URL)」と「WordPressアドレス(URL)」は異なったURLになります。

いずれにしても、「http://」を「https://」に変更(半角小文字の「s」を入力)するだけです。ほかの部分は追加や削除などして変更しないようにしてください。サイトが閲覧できなくなる可能性が生じてしまいます。

5項目目:管理者メールアドレス

管理者メールアドレスは、WordPress簡単インストール時に入力したメールアドレスが反映されています。WordPressからお知らせなどを受信します。

⑤その他の設定(任意)

一般設定の画面では、そのほかに日付形式と時刻形式を選択する項目があります。

ここで設定する必要はありませんが、お好みの表示形式を選択してもOKです。

日付形式と時刻形式を選択可

WordPress側の設定終了

以上でWordPress側の設定は終了です。ここまでの状態では、アドレスバーに「http://」から始まる自サイトのURLを打ち込んでもまだ「https://・・・」に転送されません。

httpのまま転送されず・・

 

エックスサーバー側の設定

WordPressの一般設定の変更が終わったら、次はエックスサーバー側の設定です。

①エックスサーバーにログイン

まずはエックスサーバーアカウント(https://secure.xserver.ne.jp/xapanel/login/xserver/)にログインします。

エックスサーバーログイン画面

②サーバーパネルに移動

ログインしたら[サーバー管理]ボタンをクリックして、サーバーパネルに移動します。

該当するサーバーID右側にある[サーバー管理]]をクリック

 

③[.htaccess編集]をクリック

サーバーパネルに移動したら、「ホームページ」項目内の[.htaccess編集]ボタンをクリックします。

サーバーパネル、htaccess編集をクリック

④ドメイン選択

.htaccess編集]ボタンをクリックするとドメイン選択画面が表示されるので、.htaccessを編集するドメインの右横の[選択する]をクリックします。

htaccess編集するドメインを選択

なお、このドメイン名の並び順ですが、取得順ではなくアルファベット順になっています。新しく取得したドメインだから下にある訳ではないので注意してください。

2つ目以降のドメインだと、似たドメイン名が並ぶこともあります。.htaccessを編集したいドメイン名をしっかりと確認してから[選択する]ボタンを押しましょう。

⑤[.htaccess編集]タブをクリック

.htaccess編集をするドメインを選択すると、まず最初に「使用前のご注意」として確認を促されます。ドメインが正しく表示されているか確認後、エックスサーバーからの注意事項をよく読んでください。

.htaccessの注意事項

「心当たりがない記述があっても、自動的に書き込まれている場合もあるので不用意に削除しないでね」と書かれています。内容を確認したら[.htaccess編集]タブをクリックしましょう。

⑥最上段を数行改行

ここからはさらに慎重におこなってください。まず、不意にキーボードに触れてしまって困った!!ということにならないように、先に最上段を数行改行しておきます。私は一気に5~6行ほど[改行キー]を押してしまいます。(※この方法は、筆者の完全オリジナルな方法です。他のサイトには書かれていない方法かもしれませんが、私はこの方法で記述していてエラーもなく動いているので大丈夫です)

.htaccess編集画面で一番上を改行

編集画面で上に幅のある空白行を作っておくと、もしキーに触れて文字を追加削除してしまうような事態に陥っても、元に戻すことが比較的容易なのでおすすめです。

⑦最上段に以下3行をコピペ

空白の行のさらに上、最上段に以下3行をコピー&ペーストしてください。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

コピー&ペーストの方法は、マウスドラッグをして3行を選択状態にします。選択状態のまま、色の変わっている部分にマウスを当てて右クリックし、[コピー]をクリック。その後、最上段にカーソルを移動して再び右クリックし、[貼り付け]をクリックします。

ショートカットキーの場合は、[Ctrt+C]でコピー、[Ctrt+V]で貼り付けです。

.htaccess編集画面でコピペ

⑧確認画面へ移動

コピー&ペーストして3行の挿入が済んだら、右下の[確認画面へ進む]をクリックします。

⑨内容を確認して実行

.htaccess編集画面を確認して実行

⑩完了

.htaccess編集画面を確認して[実行する]をクリックすると、「完了しました」と表示された画面になります。これで「http」から「https」へのリダイレクト設定も終わりです。最後に、設定が正しくされているかを確認して、この工程を終了します。

.htaccess編集完了画面

サイトの確認

WordPress側の設定とエックスサーバー側からの設定の2つの設定を終えたら、正しく設定されたか確認してみましょう。

http://から始まるURLをアドレスバーに打ち込んでください。表示されたページのアドレスは「https://ドメイン名」になっていますか?

次に、http://www.から始まるURLをアドレスバーに打ち込んでみてください。表示されたページのアドレスは「https://ドメイン名」になっていますか?

最後に、https://www.ドメイン名をアドレスバーに打ち込んでください。このURLはhttps://から始まりますが、1本化されて表示されるページは「https://ドメイン名」になっているはずです。

すべてのページの確認が済んだら、この工程は終了です。お疲れさまでした。次はユーザー名のセキュリティ対策をします。

おまけ・・・覚えておくと便利なこと

今回ログイン時に使用した「WordPressの管理URL」は、わかりやすいところに控えておくと便利です。サイトが閲覧できなくなってしまった場合など、このURLからログインして設定を確認することができます。

もし、メモを取り忘れてしまった場合は、「https://○○○/wp-admin/」がURLなので○○○部分にドメイン名をいれて移動してください。

>フッターCTA見出し

フッターCTA見出し

フッターCTAの本文を入力

CTR IMG