当サイト使用テーマ:「SWELL」を見てみる >>

【ConohaWING】WordPressでサブドメインにテスト環境を作成する方法

このサイト内のコンテンツにはPRを含む場合があります。
  • ConohaWINGでテスト環境を作りたい!
  • メインサイトの内容をそのまま移したテスト環境を作りたい!
  • テーマ移行やデザインの大幅な変更をしたい!
  • でもデザインが崩れた状態で公開したくない!

WordPressでテーマ移行や大きなデザイン変更をするのであれば、テスト環境内で実施することをおすすめします。

テスト環境内で編集すれば現在公開しているブログの外観を損なうことなく、ゆっくりテーマやデザインの変更ができます。

筆者は先日、この記事で解説する方法でブログテーマを移行(JIN➡SWELL)しております。

この記事ではConohaWINGの方向けに、サブドメインを使ってWordPressのテスト環境を作る方法を図解・画像を用いてわかりやすく解説します。

サブドメインからメインドメインに戻す手順も合わせて解説しています。

この記事でわかること

サブドメインにテスト環境を作成する方法

テスト環境から本番環境への反映方法

この記事を読めば、どんな方でもサブドメイン内にテスト環境を作成しメインドメインに反映することができるようになります。

しば

テスト環境と聞くとむずかしいと感じるかもしれませんが、正しい手順でやれば難しくありません。

運営者プロフィール・Twitter(@shibayu_blog

記事の内容

テスト環境とは?|大幅なデザイン変更時などに使用するテストサイト

テスト環境とは、文字通りテスト用の環境(サイト)です。

以下のようにサイト内のデータを大きく編集したいときに作成・使用します。

  • テーマ変更
  • サイトデザインを大きく変更する

サブドメインとは?|メインドメインの下に作成できるドメインのこと

サブドメインとは普段使っているメインドメインの下に作成されるドメインのことです。

ConohaWINGであればサブドメインは何個でも作成が可能です。

サブドメインを使ったテスト環境であれば、本番環境(メインドメイン)への移行時の不具合が最小限になります。

同じサーバー内かつ構造が同じのため不具合が少ない

【ConohaWING】WordPressでサブドメインにテスト環境を作成する方法

ConohaWINGでのテスト環境作成方法は以下のとおりです。

テスト環境作成方法
  1. サブドメインを取得する
  2. WordPressのインストール
  3. ディレクトリアクセス制限を設定する
  4. WordPressのバージョンチェック
  5. テスト環境のブログ名を変更
  6. noindex設定
  7. バックアップ環境を作成

ConohaWINGは本番環境(メインドメイン)のデータをテスト環境(サブドメイン)にそのままコピーする機能があるため、かんたんに作成できます。

記事内容・テンプレート(テーマ・プラグイン)ごとコピー可能です。

①テスト環境用のサブドメインを取得する

STEP
ConohaWINGへログイン

まずはConohaWINGのログイン画面に移動し、ログインしてください。

ConohaWING|ログイン画面

STEP
テスト環境用のサブドメインを作成する

次にテスト環境用のサブドメインを作成してください。

サブドメインは「ドメインを追加する(ConohaWing)」内のサブドメインを取得するに沿って作成してください。

②WordPressのインストール(サイトコピー)

STEP
サイト管理をクリック

まずは画面左側の上から2番目 サイト管理をクリックしてください。

STEP
テスト環境用サブドメインに切り替える

先ほど作成したテスト環境用のサブドメインに切り替えてください。

切り替えを押すと以下の画面が表示されます。

左側の切り替えをクリックしてください。

STEP
+WordPressをクリック

左側から2つ目のタブゾーンがサイト設定、上部のタブがWordPressになっていることを確認してください。

確認したら画面右上あたりにある、+WordPressをクリックしてください。

STEP
WordPressをインストールする

最後にWordPressをインストールします。

設定方法は以下のとおりです。

  • インストール方法
    サイトコピー
  • コピー元
    本番環境(メインドメイン)を選択
  • コピー先URL
    入力不要
  • コピー種別
    全て
  • データベース名
    変更不要
  • ユーザー名
    おぼえやすいもの
  • パスワード
    任意のパスワード
STEP
インストール完了の確認

以下の画面が表示されれば、インストールは完了です。

表示されない方は上部のhttps://www.〇〇.〇〇.com/(WordPress)をクリックすると表示されます。

③サブドメインのディレクトリアクセス制限を設定する

次にサブドメインのディレクトリアクセス制限を設定しましょう。

むずかしく聞こえますが、単純に自分だけが閲覧できるようにする設定のことです。

Googleがテスト環境(サブドメイン)を認識してしまうと、本番環境(メインドメイン)の評価が下がる可能性があります。

重複コンテンツ(パクリ)とみなされるため。

しば

忘れずに設定しておきましょう。

STEP
サイトセキュリティをクリック

左側から2つ目のタブゾーンのサイトセキュリティをクリックしてください。

STEP
ディレクトリアクセス制限をクリック

上部タブのディレクトリアクセス制限をクリックしてください。

STEP
+ディレクトリをクリック

画面右上の+ディレクトリをクリックしてください。

STEP
保存をクリック

バーの中は入力不要です。

そのまま保存をクリックしてください。

STEP
IDとパスワードを設定する

写真内①→②→③の順でクリックしてください。

ユーザー名・パスワードを設定するバーが表示されます。

おぼえやすいユーザー名お好きなパスワードを入力してください。

STEP
設定完了を確認

サイト設定管理画面URLからWordPress管理画面に移動してください。

移動した際に以下のような画面が表示されればディレクトリアクセス制限は成功しています。

(5)「IDとパスワードを設定する」で設定した任意のIDパスワードを入力してログインしましょう。

④WordPressのバージョンチェック

本番環境(メインドメイン)テスト環境(サブドメイン)各々のWordPress管理画面でWordPressのバージョンを確認しましょう。

しば

基本的に同じになっているはずですが、念の為確認をしておきましょう。

両方とも最新になっていればOKです。

◆確認方法

WordPress管理画面の一番右下に記載されています。

◆アップデート方法

WordPressのアップデート方法は以下の記事を参考にしてみてください。

⑤テスト環境(サブドメイン)のブログ名を変更

テスト環境(サブドメイン)のブログ名を変更しておきましょう。

本番環境(メインドメイン)テスト環境(サブドメイン)を間違えて編集することがないようにするため。

区別しやすい名前をつけてください。

◆具体例 

  • テストサイト
  • デモサイト  など 

⑥検索エンジンがインデックスできないようにする設定

管理画面左側の設定タブ表示設定から検索エンジンがインデックスできない設定をしておきましょう。

ディレクトリアクセス制限をかけているため大丈夫だとは思いますが、念のためこちらも設定しておいたほうが無難です。

⑦バックアップ環境(サブドメイン)を作成

バックアップ環境(サブドメイン)を作成しておくことをおすすめします。

本番環境(メインドメイン)をまるごとコピーしたバックアップ環境(サブドメイン)を作っておくことで、手順を間違えたとしてもやり直しが効きます。

  1. テスト環境(サブドメイン)
    テーマ移行・大幅なデザイン変更用
  2. バックアップ環境(サブドメイン)
    バックアップ用(編集しない)

バックアップデータをダウンロードしておくだけでも良いですが、上記のやり方のほうが勝手が良いです。

あとから簡単にデザインを見返すことができるため

作成方法は先ほどテスト環境(サブドメイン)を作成した方法と全く同じです。

バックアップ環境(サブドメイン)も忘れずに作成しておきましょう。

これでテスト環境(サブドメイン)の完成です。

しば

おつかれさまでした!
次の項ではテスト環境で編集したデータを本番環境に反映させる方法を解説します。

【ConohaWING】テスト環境(サブドメイン)から本番環境(メインドメイン)に変更を反映させる方法

ConohaWINGでテスト環境(サブドメイン)から本番環境(メインドメイン)にデータを反映させる方法は以下のとおりです。

本番環境への反映方法
  1. テスト環境のデータをエクスポート
  2. 本番環境にデータをインポート
  3. ブログ名を戻す
  4. noindexの解除

①テスト環境(サブドメイン)のデータをエクスポート(取り出す)

テスト環境(サブドメイン)のデータをエクスポートする(取り出す)ために、プラグインAll-in-one WP Migrationを使用します。

この操作はテスト環境(サブドメイン)でやってください。

STEP
プラグイン「All-in-one WP Migration」のインストール・有効化

テスト環境(サブドメイン)のWordPress管理画面からプラグイン新規追加をクリックし、検索バーに以下をコピーして貼り付けてください。

All-in-one WP Migration

以下のプラグインですので間違えないようにしてください。

All-in-one WP Migration
All-in-one WP Migration

インストールしたら有効化しましょう。

STEP
テスト環境(サブドメイン)のデータをエクスポート

有効化するとWordPress管理画面の左側タブバーの中にAll-in-one WP Migrationが表示されますのでクリックしてください。

その後エクスポートをクリックしてください。

エクスポート画面に切り替わったら以下の手順でエクスポートしてください。

  1. 高度なオプションをクリック
  2. メディアライブラリをエクスポートしないにチェック
  3. ファイルをクリック

本番環境(メインドメイン)テスト環境(サブドメイン)のメディアライブラリの中身は同じになっています。

以下の画面に切り替わったらwww.〇〇.comをダウンロードをクリックしましょう。

これでPCのダウンロードフォルダテスト環境(サブドメイン)のデータが保存されました。

②本番環境(メインドメイン)にデータをインポート(入れる)

先ほどエクスポートしたテスト環境(サブドメイン)のデータを本番環境(メインドメイン)にインポートさせます。

この操作は本番環境(メインドメイン)でやってください。

STEP
本番環境(メインドメイン)にプラグイン「All-in-one WP Migration」のインストール・有効化

本番環境(メインドメイン)のWordPress管理画面からプラグイン新規追加をクリックし、検索バーに以下をコピーして貼り付けてください。

All-in-one WP Migration

以下のプラグインですので間違えないようにしてください。

All-in-one WP Migration
All-in-one WP Migration

インストールしたら有効化しましょう。

STEP
インポート容量アップ用プラグインのインストール

有効化するとWordPress管理画面の左側タブバーの中にAll-in-one WP Migrationが表示されますのでクリックしてください。

その後インポートをクリックしてください。

インポート画面に切り替わったら以下の手順でインポート容量アップ用プラグインのインストールをしてください。

  1. 最大アップロードファイルサイズを上げる方法をクリック
  2. プラグインファイルをダウンロード
  3. WordPress管理画面でプラグイン新規追加プラグインのアップロードをクリック
  4. (2)でDownloadしたプラグインファイルをアップロード有効化
1|最大アップロードファイルサイズを上げる方法をクリック
2|プラグインファイルをダウンロード(1)
2|プラグインファイルをダウンロード(2)
4|(2)でDownloadしたプラグインファイルをアップロード有効化

Premium版しか表示されない方

最近「Premium版しか表示されなくて困っている!」というお問い合わせがありました。

無料版のサポートが終了したのか、2021年7月現在は無料版のインポート拡張プラグインがダウンロードできません。

同じように困っている方は以下の記事で紹介されているやり方を試してみてください。

>>All In One WP Migrationの容量の制限を上げてインポートする方法

STEP
テスト環境(サブドメイン)のデータを本番環境(メインドメイン)にインポート

有効化まで完了したらWordPress管理画面の左側タブバー内のAll-in-one WP Migrationインポートをクリックしてください。

以下の画面が表示されるため、先ほどテスト環境(サブドメイン)からエクスポートしたデータをドラッグ&ドロップでインポートしてください。

開始>をクリック

怖いことが書いてありますが、先ほど作成したバックアップ環境(サブドメイン)にバックアップしてあるため大丈夫です

STEP
パーマリンクの設定

インポート後、以下のような画面が表示されます。

パーマリンク構造を保存するをクリックしましょう。

パーマリンク構造を保存するをクリックすると以下のような画面が表示されます。

パーマリンク設定に変わりがないことを確認し、変更を保存をクリックしてください。

STEP
インポートの完了

完了>をクリックしてください。

③ブログ名を戻す

インポートが完了したら本番環境(メインドメイン)のブログ名をすぐに戻しましょう。

インポートしたことでテスト環境(サブドメイン)でつけたブログ名になっていると思います。
忘れずに戻しておいてください。

④検索エンジンがインデックスできるようにする設定

管理画面左側の設定タブ表示設定から検索エンジンがインデックスできるようにする設定をしておきましょう。

忘れると検索エンジンにインデックスされなくなるため注意してください。

これでテスト環境(サブドメイン)で行った変更を本番環境(メインドメイン)へ反映することができました。

本番環境(メインドメイン)内に変更が反映されていることを確認してください。

しば

おつかれさまでした!

まとめ|デザインの大幅な変更時はテスト環境を作成しよう

テスト環境をサブドメインに作成する方法では、テーマ変更をはじめとする大幅なデザイン変更であっても自分のペースで編集することができます。

サブドメインにテスト環境を作成する方法は以下のとおりです。

テスト環境作成手順
  1. サブドメインを取得する
  2. WordPressのインストール(サイトコピー)
  3. サブドメインのディレクトリアクセス制限を設定する
  4. WordPressのバージョンチェック
  5. テスト環境(サブドメイン)のブログ名を変更
  6. 検索エンジンがインデックスできないようにする
  7. バックアップ環境(サブドメイン)を作成

テスト環境での編集した内容を本番環境に反映させる方法は以下のとおりです。

本番環境へのの反映方法
  1. テスト環境(サブドメイン)のデータをエクスポート(取り出す)
  2. 本番環境(メインドメイン)にデータをインポート(入れる)
  3. ブログ名を戻す
  4. 検索エンジンがインデックスできるようにする設定
しば

大幅なデザイン変更をするときはサブドメインにテスト環境を作成するようにしましょう!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


記事の内容