WordPressテーマ変更!SimplicityからCocoonへ
スポンサーリンク

WordPressサブドメインでテスト環境を作る2つの方法

サブドメインでテスト環境として、WordPressをインストールして構築する方法です。ローカル環境と同じよう。人に見られない、検索エンジンにインデックスされないよう、ひと手間加えることが大切です。

WordPressは便利なプラグインも豊富で、WEBページを参考にファイルを触って、簡単にカスタマイズもできます。半面、いつエラーが起きるかわかりません。

ローカル環境(PC上)でWordPressを構築するBitNamiInstantWordPress、WEB上のサブドメインで検証してもどちらでも良いです。テスト環境を持つメリットや、構築のときやって欲しいことなどもチェックしてください。

サブドメインで誰にも見られないようプラグインを使う方法パスワード(ベーシック)認証をかける方法の2つ、やりやすい方をチェックしてください。

スポンサーリンク

なぜテスト環境が必要なのか

実験

WordPressは初心者でもカスタマイズが出来るし、欲しいプラグインも見つかります。プラグインとテーマのfunctions.phpの内容が同じだと知らずに、インストールすると競合してエラーを出すこともあるんです。

プラグインの導入ですぐエラーが出る場合・時間が経って競合する場合、またphpでの記載ミス、アップロード時のちょっとしたミスでもエラーが出ます。

エラーは自分で直さなきゃダメで…。突然画面が真っ白になって管理画面に入れないときの対処に時間かかってしまうと、その間ブログが表示されません。

LINKHTTP500内部サーバーエラー(Internal Server Error)の意味とは?誰もが理解出来るかもページ

エラーが出て大変だね…と思うのは、ホンのひと握り。ユーザーさんは、なぜ表示されないのか解らず時間を費やしたり、別のページを見るから当分訪問することもないでしょう。

直せないあいだは収益にもつながらないので、テスト環境を作るんですね^^

ローカルとサブドメイン、テスト環境を作成する違い

WordPressの構築はPC上(ローカル)でもでき、サーバーの容量を気にせず簡単にテストページを構築することが可能です。サーバーと同じようにディレクトリ(ファイル格納スペース)もあるし、データベースまで付いてきます。

LINKWordPressローカル構築はBitnamiをインストールして日本語化する!初心者が出来る全手順公開!

ローカル環境でのスマホ表示の確認も、Chomeのデベロッパーツール要素の検証を使って、確認も可能です。

『サブドメイン』を使うと、アカウントとパスワードを入れたらサブPCほか、どのデバイスでも場所を問わず繋げるのがメリットで魅力でもあります。

細かいところをあげれば、エラーを出したときエラーファイルまでのクリックの工程が少ない。サーバーのFTPを直接触り慣れてる。など、個人的にありますけど、そこはFTPソフトの設定してローカルで登録しても良さそうです。

しいて言えば下記が大きなメリットかもしれません^^

ポイント
  • 公開できる状況(困ったとき見せることが可能)
  • 困ったとき、レンタルサーバーに相談できる

テスト環境をサブドメインで作る工程

テスト環境の作り方は、サブドメインの作り方と同じです。

  1. レンタルサーバーのFTPにフォルダを作成
  2. DNSにサブドメインをセットアップ
  3. WordPrees簡単インストール

ざっくりこんな感じで簡単にできます。どのサーバーでも似た感じでしょうが、ロリポップでサブドメインのテスト環境を作る具体的な説明をしますね。

エックスサーバーは、新規WordPressをインストールする手順を参考にどうぞ。

サブドメインの簡単インストールまでの工程(ロリポップ)

ロリポップのサブドメイン設定

ロリポップ!ユーザー専用ページにログインして、公開フォルダを作成します。『独自ドメイン』を選択後、『サブドメイン設定』をクリックして、『新規作成』をクリックすると設定が出来ます。

サブドメイン設定新規登録

【公開(アップロード)フォルダ】は、【サブドメインと同じ名前】にするなど、他のものと被らないようにフォルダ名をつけてください。例えば『test』でカブらなければそれ、または、test.ドメイン(私ならtest.bibabosi-rizumu.com)など。

LINKロリポップの公開アップロードフォルダ設定の間違いが原因!サブドメインを簡単インストール後にブログが404ページに

  • ムームードメインコントロールパネルを開き設定する。

ネームサーバーのセットアップを利用中のサーバー『ロリポップ』にチェックを入れてセットアップを済ませたら、簡単インストールに入ります。認証に失敗しましたと出たら下記を参考にしてくださいね。

LINKロリポップでネームサーバー認証に失敗しましたと出た時の解決法!ムームーDNSのセットアップを完了させる手順

簡単インストールのとき1つだけ注意があって、本番と同じコンテンツを使いたい場合は、重複コンテンツ(パクリ)扱いになっては困ります。テスト環境構築の場合』は、ネット上に公開させないようにしましょう♪

  • インデックスさせない』ようにチェックを外す

ロリポップの管理画面。WordPressの簡単インストール:ノーインデックス

サブドメインをインデックス(公開)させない設定

レンタルサーバーのWordPressの設定で『インデックスさせないように』し忘れても平気です。WordPressダッシュボード内の『設定』より『表示設定』を開くと、『検索エンジンでの表示』とあります。

WordPressダッシュボード内のnoindex設定

そこの『検索エンジンがサイトをインデックスしないようにする』にチェックをして変更を保存すれば大丈夫!こうすれば、robots.txtに『クローラー来ないでっ!』と、指示を記載するのでクローラーは訪れません。

※これでインデックス(公開)されない。なぜそうなるかは、見出しの検索エンジンの仕組みの説明をご覧ください。

User-agent: *
Disallow: /

この意味は、『全ての(*)クローラー(User-agent)に対して、指示を出しますよ。全てのディレクトリ(/)このブログに、クロールしてこないで(Disallow)ね。』これは、自分で設置しなくても勝手に設置されるので便利です。

そのコードの確認方法や、その他の説明もろもろは下記に書いてます^^

LINK初心者向けで!robots.txtって何かを説明

上記リンク先にも書いてますけど、いう事聞かない質の悪いクローラーもいるので、念の為ヘッダーに、ノーインデックスを入れたら安心です。入れる場所は、下記画像のとおり<head>から</head>の間に入れます。

<meta name=”robots” content=”noindex”>
head内にメタタグを入れた例

head内にメタタグを入れた例

これで、インデックスされない状況が完成です!

方法1:プラグインを使って、テスト環境のコンテンツは見せない

URLを教えなければ、誰にも見られない状況だろうけど、実はリンクが見えちゃう事があります。そのリンクを見て、何コレ?とユーザーがそのリンクを踏んだらアクセス可能だったら、テストブログが見えてしまうんですね。

  • 見られたくなければ、誰にも見せない状況を作ればOK!

ブログにログインしないとブログを表示させない、テストページにアクセスしたらログイン画面を出すプラグイン『No Login Redirect』を導入します。管理画面のプラグインの説明は、『非ログイン時、ログイン画面にリダイレクトさせる』とあります。

LINKwp-nologin-redirect|WordPress.ORG日本語/プラグインディレクトリ

導入は、WordPressの管理画面より、

  1. プラグイン
  2. 『新規追加』をクリック
  3. キーワードに『wp-nologin-redirect』と入力
  4. 『今すぐインストール』をクリック

wp-nologin-redirectプラグインを有効にする設定画面

  1. その後『プラグインを有効化』をクリック

以上でOK!もっと詳しいことを書いてるのは、わいひらさんのページです。このページを公開されてから、プラグインをチェックしてたので使ってます。

LINK公開前のWordPressサイトをパブリックに晒したくないときは「wp-nologin-redirect」プラグインがよさそう|寝ログ

wp-nologin-redirectと競合してエラーが出るのはログイン系のもの

このwp-nologin-redirectプラグインは、ログイン系のなので他のログイン系『簡単にセキュリティ対策ができるSiteGuard WP Plugin』と競合を起こして302 Moved TemporarilyエラーでURLが無限ループをおこしたことがあります。

でもセキュリティ強化と、人に見られないプラグインはエラーが起きる場合があるから、どちらか外そうと考えなくてもいいと思いますよ^^

誰にも見られないのでエラーを出しても平気だし、焦らず直せば良いだけですから。それより見られないほうが良い&セキュリティ強化として、どちらも入れてます。

方法2:サーバー側でパスワード(ベーシック)認証をかける

サーバー上でアクセス制限をかけ、ユーザー名・パスワードを入力しログインした人のみ閲覧できる機能です。

ココではエックスサーバー・MixHost・ロリポップのパスワード認証のかけ方・その他サーバーの場合などをチェックしてください。

アクセス制限をする前にチェック

アクセス制限をすると、プラグインjetpackを導入できません。導入したい場合は先にjetpackの連携をすませて、noindex設定をおこなってください。

  1. noindex設定の前にjetpack連携※適当なページにアクセスしておくと、人気記事を取得する
  2. それらが終わったらnoindex設定・ベーシック認証の順番がオススメ^^

エックスサーバー:ベーシック認証(アクセス制限)をかける

エックスサーバー:アクセス制限の場所

サーバーパネルにログインしホームページ欄にある『アクセス制限』をクリック!つぎに制限をかけたいドメインを選択してください。

サブドメインのアクセス制限欄『ONにする』をクリック

『戻る』をクリック。

『ユーザ設定』をクリック

サブドメインのアクセス制限:ユーザーID・パスワード入力画面

  1. サブドメインのアドレスが表示されてる事を確認
  2. ユーザーIDを入力
  3. パスワードを入力
  4. ユーザの追加を選択

サイトアクセス時のID・パスを入力画面

これでアクセスすれば、ユーザID・パスワードの入力を求めらるので、入力に成功した人だけテスト環境にアクセスできるワケです^^

MixHostでアクセス制限する方法

MixHostのアクセス制限も簡単で、エックスサーバーのような感じです。

cPanelにログイン後『ディレクトリプライバシー』をクリック

public_htmlフォルダをポチッとクリック

ディレクトリプライバシー画面

  • 『このディレクトリをパスワード保護します。』にチェック。
  • サブドメインのフォルダ名を入れる感じ。

FTPで確認するとフォルダ名はわかりますよ。※これらはdemo画面です。

ディレクトリプライバシー:ユーザーの作成

そこでユーザーIDとパスワードを設定し認証をかけます。※間違ったディレクトリを指定しないよう注意。

ユーザーID・パスワードを入力して、サブドメイン・テスト環境にアクセスしてください。

デモ画面で確認しただけですので、詳しくは以下をどうぞ。

参考Directory Privacy|cPanel Documentation

ロリポップのアクセス制限

ロリポップ管理画面にアクセスして、アクセス制限を開き設定をおこなってください。工程は以下を参考にどうぞ。

参考アクセス制限の設定方法|ロリポップマニュアル

その他サーバーのアクセス制限の方法

サーバーによってカンタンにアクセス制限ができます。ご自身のサーバー名を入れて以下のように検索してみるのがベストです。

サーバー名 アクセス制限
検索
サーバー名 ベーシック認証
検索

カンタンに設置できなければ、上述見出し:『方法1:プラグインを使って、テスト環境のコンテンツは見せない』を行うのをオススメします。

テスト環境で使える!サンプルが入ったテーマユニットテストデータ

テストページの使い方はそれぞれですけど、これから自作のテーマを作ってみたいとか、そんなの全くわからないけどゆっくり勉強してみたいなら、テストブログにサンプルのデータを導入するのがオススメです。

  • 番号なしリスト番号付きリストその中の番号なしリストが、どのような表示をするか
  • 極端な例で長いタイトルや、たくさんのカテゴリ、タグがある場合のサンプル
  • 回り込みテスト
  • いろんな表示や配置のテストのサンプルなどなど数十個ある

これらのテーマユニットテストのコンテンツ導入に興味があれば、データファイルをインストールしてテスト環境に導入してはいかがでしょうか^^

外部LINKWordPressテーマユニットテストデータ日本語版を更新したよ!

本番環境のデータを移行する

サブドメインでテスト環境ブログを作ったら、本番環境のバックアップファイルのデータを移行させるのが早いし簡単なので、手順を紹介します。

FTPソフトで、バックアップデータからテスト環境へ移行

本番環境のデータをバックアップしたものを、ダウンロードしテスト環境にアップすればOKです!

  1. pluginsフォルダ
  2. themesフォルダ
  3. もし画像ファイルもサブドメインで表示させたいなら、uploads

※3の画像ファイルは、特に目的がなければ不要。

移行は、この2つのフォルダだけでOK!まずは本番ブログのバックアップを(間違えず)とってくださいね。

下記リンクは普段のバックアップだけでなく、復元に必要なバックアップも合わせて紹介してます!

※テスト環境構築するので『.htaccess』や『robots.txt』『wp-config.php』の移行は必要ありません^^

次の見出しの内容に、合うことも書いてるので参考まで。

どうぞ(o^ー’)
LINK初心者向け!WordPressのバックアップ方法、記事をエクスポートする手順

データベースの設定も同じようにしたい

  • ウィジェットや、広告、記事を入れたい場合は、既存のモノ見ながら設定する
  • アドクイックタグを使いたい場合
    1. 設定よりアドクイックタグを選択
    2. 下へスクロールしてエクスポート
    3. サブドメインのテストページにインポート

※サブドメインに広告を入れても、アドセンスに認証されてます。もし不安ならサブドメインを認証することも可能です。※独自ドメインで新たにするなら、この工程はしておきましょうね。

  • アドセンスの認証されたサイトを追加する工程
    1. アドセンスにログイン
    2. 左上をクリック
    3. 『設定』をクリック
    4. 『サイトを管理』
    5. 『自分のサイト』をクリック
    6. 右上の青●+をクリック
    7. サブドメインを入力して『サイトを追加』する

管理画面の設定で触らないもの

触ったらダメなものを一応、書いておきますね。

ダッシュボードの設定画面で触ると面倒になるものは『一般』の『WordPressアドレス』、『サイトアドレス』のURLです。これは触りません^^

サブドメインをテスト環境として使うのが目的なので必要ないのは、更新の情報サービスのping設定、検索エンジンでの表示のインデックスしない設定あたりは、触らなくってもOK!プロフィールとかもですね。

この機会にいつでも復元できるように、バックアップをとっておきませんか!?それから復元は、確認しながらしてくださいね。

LINKWordPress初心者向けバックアップデータのファイル復元!データベースのインポート方法

テスト環境から本番環境にファイルを移行するリンク

テスト環境でカスタマイズしたファイルは、FTPソフトで本番環境へ転送するのが手っ取り早いです。

もしそのファイルが、あなたの使っているテーマの管理画面上にあるなら、本番ファイルをテストブログへ移行したもので、ファイル編集が成功したものを、管理画面の該当ファイルにコピペすればOK!

  • 管理画面上になければ、FTPソフトで転送します。

その方法と、エラーが出そうだからテスト環境で試した方が良いファイル、本番でエラーが出たら困るのでその対処を書いた初心者向けページを参考にどうぞ。

LINKWordPressのテストサイトの使い方!本番環境へ移行する方法

さいごに

何度もバックアップは沢山とって来られたと思います。でも復元はエラーが出ない限り滅多にしないことなので、慎重にやってください。独自ドメインとサブドメインを間違えてアップロードしたら、焦るでしょうしね(´ー`)

WordPressでエラーを出して困ってる人も沢山います。その対処のQ&Aを参考まで。

LINKWordPress初心者の疑問!バックアップ・エラー対処・復元のQ&A集

本番でエラーが出たとき、何をしたら良いか知ってますか!?バックアップファイルからの復元です。けどプラグインが原因なら、

  • プラグインを切る、または該当プラグインの削除。

テーマの編集でphpを触ってエラーがでた時、一瞬で表示させる方法。おまけ

FTPでエラーが出たテーマの名前を変更したら、別のテーマが表示されるって知ってましたか!?

そんなテーマはありません。ってことで、一時エラー画面からバイバイできて管理画面に入れますよ。

  • 別のテーマを準備しておくのも手!って話^^

その後、名前を元に戻してゆっくりバックアップデータからの復元したり、該当箇所を直せばOK!

LINK簡易的バックアップ!初心者用WordPressファイル内説明と、5秒で復元する方法

それでは、かうたっくでした!

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る
タイトルとURLをコピーしました