自分で契約しているドメインにサブドメインを作成してテスト環境とし、構築したWEBサイトのデータをテストアップします。
クライアントのサーバーもXserverであれば同じ環境と見て差し支えないので、表示崩れや動作チェックもこのテスト環境で行えます。
初期ドメインではサブドメインを作成できません。独自ドメインを利用していることが条件となります。このサブドメインはいくら作成しても無料。
目次
サーバーパネルで設定する
サーバーパネルにログインし、ドメインのサブドメイン設定へ

サブドメインを作りたいドメインの「選択する」をクリック。

サブドメイン設定画面に映るので、タブの「サブドメイン設定追加」をクリック。
作りたいサブドメインを入力(◯◯◯.ponsyon.com
の ◯◯◯部分)
ドキュメントルートはお好みで。
/ponsyon.com/public_html/(サブドメイン名).ponsyon.com/
より
/ponsyon.com/public_html/(サブドメイン名)/
の方が好きかな。
サブドメインを複数作成するなら、コメントに分かりやすくメモを書いていた方が◎。

ドキュメントルートはフォルダ名に関係してくる
FTP情報自体は通常のponsyon.comと同様になります。
今回、/ponsyon.com/public_html/test/
で作成したので、
test
フォルダができました。こちらにテストサイトのデータを作成してアップロードしていきます。

/ponsyon.com/public_html/test.ponsyon.com/
で作成すると、test.ponsyon.com
というフォルダができている筈です。管理しやすい方で進めましょう。
「確認画面へ進む」&「追加する」
(前述の説明とは逆に/ponsyon.com/public_html/test.ponsyon.com/
で進めています。何回かやり直してるうちに入れ替わっちゃいました💦)

ページ遷移に数秒待たされてーーサブドメイン設定の追加が完了!

「サブドメイン一覧」タブに遷移すると反映待ちアイコンが付いているので、実際に反映されるのに1時間ほどかかるので待つ。

反映されるとこうしてアクセスできるようになります(まだ何もアップロードしていないので、Xserverのデフォルトの画面です)。

WordPressを使う場合はインストールする
サーバーパネルTOPの下の方にある「WordPressの簡単インストール」をクリック。

「ドメイン選択画面」に移動するので、該当ドメインの「選択する」をクリック

「WordPressインストール」タブをクリック。
「サイトURL」のドメイン部分がプルダウンになっているので、作成したサブドメインを選択する。

あとは普段通りに入力して

「確認画面に進む」でOKなら「インストールする」
ちょっとぐるぐるして
WordPressのインストールが完了。

管理画面URLをクリックすると

WordPressのログイン画面です。無事インストールされました!
Basic認証も忘れずに
テストサイトの場合はBasic認証をかけるのを忘れずに。テスト状態なのに第三者にアクセスされるのも嫌ですが、Googleのbotに巡回されて検索結果に表示されたら最悪です。
上記記事のとおり.htaccess
を編集して手動で対応もできますが、Xserverはサーバーパネルから簡単に設定できます。
サーバーパネルTOP画面から「ホームページ」の「アクセス制限」へ。

該当ドメインを選択して、「フォルダ一覧」に遷移します。
ここではtest
ですね。このアクセス制限をONにして、まずtable下の「設定する」をクリック。

該当フォルダに鍵アイコンが付きます。
そして横の「ユーザー設定」をクリック。
ここでID&パスワードを指定し(「現在のURL」はひとまずスルーでOK)、

「確認画面へ進む」をクリックし、OKなら「追加する」をクリックします。
これだけで簡単設定できました。

作成したサブドメインにアクセスして、Basic認証のダイアログが表示されたらOK!
