ブログ作り方【後編】URLの細かい設定

ブログmemo

WordPressのブログ環境構築、後編です。
前編ではサーバーの申込みから、独自ドメイン取得、サーバーへのWordPressインストールまで行いました。

※このブログはXserver とWordPressを使用しています。

後編の主な作業です↓

手順書の内容【後編】
  1. URLとWordPressのインストールフォルダをヒモづけ
  2. WordPressの常時SSL化(http→https)

WordPressをインストールする際に「インストールURL*」を指定せずにそのままインストールした場合は、上記1.の作業は関係ないので
2.の作業のみ行ってください。

「インストールURL」について詳しくは前編:「4. WordPressを簡単インストール」を参照

なかなかブログの書き始めれないけれど、
今回でサーバーとWordPressの環境構築が完了します。
途中までやって続きは明日でも大丈夫!

広告

ブログURLとルートディレクトリについて

作業の前に、少し技術的な話。知らなくても良いですが、知っていると役立ちます。

インターネットで
https://odariko.com/ 
にアクセスすると、このブログのトップページが表示されますが、

このURLって、サーバーのどこにアクセスしているのでしょう?

答えは、

前回作業した際に「ドメイン設定」をして自動生成されたドメインフォルダの一つ、「public_html」です。

このフォルダを “ルートディレクトリ” と呼びます。

サーバーにドメインを設定すると作成されるフォルダ群

正確にはこのルートディレクトリ「public_html」フォルダ内の、“このファイル”を表示してね
ということを、プログラムが行っているのですが、細かすぎるのでここでは省略。

ディレクトリの話は、こちらのサイトがかなり参考になりました
WordPressをインストールするディレクトリはどこがよいのか?

あれ、前回散らかるのが嫌とか言って
このフォルダに直接WordPressインストールしてないよね?
このフォルダの中にさらに「/wp」てフォルダを作ったよね?

そうです、ルートディレクトリ内に、さらに “サブディレクトリ「/wp」を作りました。WordPressが「public_html」ではなく「public_html/wp」の中にあります。

つまり、今のままではWordPressで書いたブログのトップページは、URLに
https://odariko.com/wp
と入力しないと表示されません。

※この記事を書いている時は、すでにすべての作業を終えているのでhttps://odariko.comでトップページが表示されます。

これをhttps://odariko.comという入力で
ブログのトップページが表示されるように変更していくのが今日のメイン作業です。

広告

1. サブディレクトリにあるWordPressをメインに設定

WordPressをインストールする際に設定した自分のディレクトリ(「/wp」など)をブログのメインディレクトリにする作業をします。

WordPressの設定

前回WordPressを自動インストールして、完了した時に通知された、WordPressの管理画面URLにアクセスし、ログインします。

WordPressにログイン

WordPress管理画面

この管理画面は、今後ブログを書く際に毎回ログインするのでブックマークすると便利。

左側のメニューから「設定」→「一般」に進みます。

設定→ 一般へ

WordPress一般設定

表示された「一般設定」画面の、サイトアドレス(URL)から、”/wp”を消します

「一般設定」画面

サイトURLを設定

WordPressの設定が完了したので、サーバーの設定に進みます。

サーバーの設定

サーバー側で2つのことをします。

①サブディレクトリから index.php.htaccess ファイルをルートに移動する
index.phpファイルを編集する

【サーバー】の設定|①「index.php」「.htaccess」をルートに移動する

Xserver管理画面にログインします。
トップページの「ファイル管理」から、ファイルマネージャー画面へ進みます。

Xserver管理画面

FTPサーバーを開く

WordPressをインストールしたディレクトリまで進みます。


「独自ドメイン名のファイル」→「public_html」→「wp」

wpフォルダ内

「wp」フォルダ内にある、
・index.php

.htaccess
を、1つ上の「public_html」フォルダ(ルートディレクトリ)にコピーします。

※もとの「wp」フォルダ内の index.phpと.htaccessファイルは削除するか、「index.php.bkup」など名前を変えて無効化します。

広告

サーバーの設定|② index.php を編集する

「index.php」を選択し、「編集」をクリック。

元々記載されている
require( dirname(_FILE_) . ‘/wp-blog-header.php’ );
の部分を

/* */でコメントアウトして
require( dirname(_FILE_) . ‘/wp/wp-blog-header.php’ ); を記載します。

/* wordPressのルートディレクトリ変更 */
/* require( dirname(_FILE_) . '/wp-blog-header.php' ); */
require( dirname(_FILE_) . '/wp/wp-blog-header.php' );
index.phpの編集画面
index.phpファイル

ファイルを編集する際は /* ●月●日 △ △ のため変更 */ のように、コメントを残しておくと便利。プログラムを書き換えると、この変更、自分がした?元から書かれてた?ということがありますので。

2. http://example.com/wp を “Not Found” にする

上記1.を行い、http://example.com でブログのトップページが表示されるようになりました。

しかし、今のままでは http://example.com/wp でも表示されてしまいます。このURLにアクセスした時は “Not Found”を返すように設定します。

ちなみに、このあと次の手順3. で

http://example.com/wp にアクセス→ http://example.comリダイレクト

という処理を設定するので、この手順2.は要らないといえば要らないです。
私は念のため設定してます。

WordPress管理画面で「設定」→ 「パーマリンク設定」へ。

設定で、デフォルト以外を選択します。「投稿名」か 「数字ベース」がおすすめ。

以上、パーマリンク設定を変えただけで、http://example.com/wp が “Not Found” になります。

3. http://example.com/wp へのアクセスをリダイレクトさせる

上記の手順2.で http://example.com/wp にアクセスすると “Not Found” と表示されるようになりましたが、Not Foundではなく、トップページに移動するようにします。

ふたたび、Xserverの管理画面の「ファイル管理」からルートディレクトリに進みます。

Xserverの管理画面

FTPサーバーを開く

「public_html」フォルダ内の「.htaccess」ファイルを編集します。

.htaccessファイル内 RewriteEngine On の下に
RewriteRule ^(wp/|wp)$ / [R=301,L]
を追記するだけです。

ついでに、もう一行
DirectoryIndex index.php index.html
も追記しておきます。

※ルートディレクトリに「index.php」と「index.html」という2つのファイルがありますが、htmlではなくphp(WordPressのファイル)の方を優先して表示してね、という設定です。

これで、http://example.com/wp にアクセスすると、リダイレクトされて、ブログトップページ http://example.com に遷移するようになりました。

長い・・。もうワンステップで終わりです!

4. WordPressを常時SSL化する

ブログのURLが「http://~」→「https://~」になるように設定します。

  • サーバー側のSSL設定
  • WordPress側のSSL設定

作業内容は主に2つ、下記をそれぞれ行う必要がありますが、

前回の環境構築【前編】手順3.でXserverに独自ドメインを設定した際に

「☑無料独自SSLを利用する」をチェックしたので、

すでにサーバー側の設定は完了しています!

XserverのSSL設定

WordPressの方を設定します。

WordPressの「設定」→「一般」へ。

WordPress一般設定

・WordPressアドレス (URL)
・サイトアドレス(URL)
をそれぞれ「http:」→「https:」にするだけです。

完成

以上で、ブログを始めるための基本環境の構築が完了しました!

長い。長かったよ。。

次回は、ブログのテーマ(デザイン)をインストールします。

がんばれブログ作り!

タイトルとURLをコピーしました