WordPressで作っているブログのテーマを変更したくなりました。
テーマを変えると、今まで作ってきたCSSのデザインが崩れることも多いし、サイト内の表示やデザインがグチャグチャになることがあります。
そのため、手を加えたいブログを丸々コピーしたテスト環境用のブログを作り、まずはそこで検証したり出来るようにすれば良いと考えました。
要は検索してブログが読まれる状態のままで、デザインがおかしくなったり記事が読めなくなったりするのがイヤなわけで、テスト環境さえ作ってしまえば、誰の目にも触れずに試行錯誤が出来るので、何の心配もなくいじることが可能になります。
そんな状況で、個人的に比較的簡単だと思えた方法は、サブドメインを取得してサイトをコピーするやり方です。
というわけで今回は、
- ブログはWordpressを使っている
- サーバーはエックスサーバー
- ドメインはサブドメインを取得する
- エックスサーバー内にテスト環境を構築
という環境と流れで、テスト環境を作るためにWordpressの複製を行いました。
備忘録もかねて、その方法と手順についてまとめておきたいと思います。
WordPressブログの複製・コピー｜事前準備
WordPressを複製するにあたって、事前に準備しておくと便利なものについてです。
なくても出来ますがあった方が格段に楽なので、もし知らないなんて人はこの機会に頑張って覚えるのも一つの手だと思います。
以下、事前準備が出来ている前提で話しは進んでいきます。
【最低限必要なもの】
- FTPクライアントソフト（今回はFileZillaを使用）
- テキストエディタ（今回はSublime Textを使用）
- phpMyAdminにログインするIDとパスワード（記事内で確認方法解説あり）
大層に言いましたが、この3つだけです。
後は、エックスサーバーのサーバーパネルへのログインIDとパスが分かっていれば問題ありません。
手順1.エックスサーバーでサブドメインを設定する
始まりとして、サブドメインを設定していきます。
▼まずはエックスサーバーのサーバーパネルにログインします。
▼サブドメイン設定をクリックします。
▼該当のドメインの「選択する」をクリックします。
▼「サブドメイン設定追加」をクリックします。
▼希望のサブドメインを決めます。
サブドメインは好きなものを入れてOKです。
今回はテスト環境用のドメインということで、wwwtというドメインにしました。（testとかにすると分かりやすいですねｗ）
合わせて、「無料独自SSLを利用する」にはチェックを付け（SSL化はどっちでもいいですが、本サイトと全く同じ環境にしたかったのでチェックを付けました）、「確認画面へ進む」をクリックします。
▼問題ないか確認し、「追加する」をクリックします。
▼サブドメインが設定されました。
これでサブドメインは設定されたので、反映されるまでしばし待ちましょう。
すぐにサブドメインを入れたURLにアクセスしても…
といった表示になるはずです。
大体は30分～1時間ぐらいおけば表示されることも多いですが、もし数時間おいても変わらない場合は、キャッシュが残っていることが考えられます。
その時は、「無効なURLです」という表示が出ているところで、ctrl+F5を押してキャッシュクリアしてみるといいと思います。
手順2.FTPソフトを使って、本サイトのサーバー内のファイル（テーマや画像・プラグインなど）をコピーする
サブドメインの設定が完了するのを待っている間に、本サイト（ドメインのブログ）のサーバー内に保管されているファイルをコピーします。
このコピーしたファイルを、サブドメインの方にアップし直すいったイメージです。
コピーにはFTPソフトを利用します。（エックスサーバーのサーバーパネルからも進めることが出来ますが、この機会にFTPの使い方を覚えるのもいいと思います）
FTPソフトのインストールや使い方は別で記事にしているので、そちらを参考にしてください。
ここではFile Zillaを利用して、エックスサーバー内に保管されているファイルをコピーします。
▼まずはFTPでサーバーに接続し、接続出来たら該当のドメインをクリックします。
▼「public_html」というフォルダがあるはずです。
この「public_html」というフォルダの中にファイル一式が入っているので、これを丸ごとそのままコピーします。
保存場所は自分のデスクトップ上など、場所が分かっていればどこでもOKです。
画像ファイルが多かった場合などは、コピーに時間がかかることもあります。
手順4.本サイトのMySQLデータベースをエクスポート
続いてMySQLというデータベースをエクスポートしていきます。
細かい話は省くとして、本サイト（本ブログ）で書いている記事やカテゴリーなどのデータがここに保管されています。
難しい話に聞こえますが、「phpMyAdmin」というツールを使えば、簡単にエクスポートすることが出来ます。
注意点として、phpMyAdminを利用するには、ログインIDとパスワードが必要になるという点です。
そのIDとパスを覚えている人はほとんどいないと思うので、まずはその確認方法をチェックしておきます。
phpMyAdminのログインIDとパスワードの確認方法
ログインIDとパスワードは、サーバー内にあるwp-config.phpというファイルの中に書かれています。
再度FTPソフトのFileZillaを利用して、このファイルをダウンロードします。
該当ドメインに接続したら、public_htmlの中にwp-config.phpのファイルがあります。
ファイルを見つけたらデスクトップなどにダウンロードし、そのままファイルを開きましょう。
右クリック⇒プログラムから開く、でメモ帳やテキストエディタで開くことが出来ます。（僕はSublime Textで開いてますがメモ帳で十分です）
▼その30行目前後にIDとパスが書かれています。
これを使ってログインします。
phpMyAdminにログインし、データベースをエクスポートする
エックスサーバーのサーバーパネルから、「phpMyAdmin」のログインページへ飛べるようになっているので、もう一度サーバーパネルに戻ります。
▼phpmyadmin（MySQL5.7）をクリックします。
▼ユーザー名とパスワードを入力します。
▼phpmyadminのページが開くので、「エクスポート」をクリックします。
▼「詳細」にチェックを付けます。
詳細にチェックすると、下部に詳細項目が出てきます。
▼下にスクロールし、真ん中あたりにある「生成オプション」の項目で、【DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER コマンドを追加する】にチェックを加えます。
このチェックを付けたら一番下までスクロールし、「実行」をクリックするとデータベースのエクスポートが始まります。
【*****.sql】というファイルになっているはずです。
ファイルの容量を圧縮したいときは、圧縮する方法（zipで保存）もありますが、特にしなくても大丈夫です。
これで本サイト（本ブログ）のファイルやデータがコピーできました。
手順5.サブドメインにWordpressをインストールする
そうこうしている内にサブドメインの設定が終わって、URLにアクセスできるようになっている頃のはずなので、次にWordpressをインストールします。
一旦、エックスサーバーのサーバーパネルに戻り、
▼WordPress簡単インストールをクリックします。
▼該当のドメインの「選択する」をクリックします。
▼必要事項を入力します。
「インストールURL」は作成したサブドメインを選択します。
ブログ名は好きな名前でOKです。
ユーザ名とパスワードは、Wordpressにログインする時のものになります。（あとで一旦上書きされるので何でもいいです）
入力を終えたら、「確認画面へ進む」をクリックします。
▼入力事項に間違いないか確認し、「インストールする」をクリックします。
▼インストールの完了です。
これでサブドメインにWordpressがインストールされました。
ここに記載されている「MySQLデータベース」のユーザと接続パスワードは、次にサブドメインのphpMyAdminにログインする際に必要なので、メモするなどして覚えておいてください。
手順6.サブドメインのMySQLデータベースに本サイトのデータをインポート
次は、先程エクスポートした本サイトのMySQLデータベースを、サブドメイン側にインポートします。
インポートの前に、まずはサブドメインのデータベースを削除していきます。
サブドメインのMySQLデータベースを削除する
先程と同じ要領で、エックスサーバーのサーバーパネルからphpMyAdminにログインし操作していきます。
先程メモしたサブドメインのログインIDとパスワードでログインします。
▼ログイン後、以下の手順で操作します。
- データベースの名前と書いたところに、実際のデータベース名が表示されているはずなので、そこをクリック
- 「すべてチェックする」にチェックを付ける
- ▼をクリックしてプルダウンを出す
- 「削除」を選択
▼こういった表示が出るので「はい」をクリックします。
これでデータベースが削除できました。
データベースのインポート
続けざまに、そのままインポートもやっていきます。
▼「インポート」をクリックし、ファイルを選択します。
ファイル選択は、先程エクスポートした本サイトのMySQLデータベースを選びます。
選択したら、最下部までスクロールし「実行」をクリックしてインポートが完了です。
手順7.コピーしていたWordpressのファイルをサーバーに戻す
エックスサーバーの場合、サブドメインを取得すると、public_htmlの中に設定したサブドメインのディレクトリが追加されます。
今回で言うと、設定したサブドメインは【wwwt】なので、public_htmlの中にwwwtがあります。
▼FTPソフトで見るとこんな感じ。
▼wwwtをクリックすると、Wordpressのファイルが入っています。
▼本サイトからコピーしたpublic_htmlの中のファイルを、サブドメインのディレクトリ内（今回はwwwtの中）にアップします。
ファイルをサーバーにアップする前に、念のためwwwt内のファイルを全部コピーしてバックアップを取っておいた方が安心です。
また、アップする時はそのまま上書きでもいいのですが、wwwt内のファイルは全て消去させて一旦何もない状態にして、そこからアップロードしておけば確実なのでおすすめします。
この処理を終えると、public_htmlの中にあった本サイトのファイル（wwwtを作る前のファイル）が、public_html > wwwtの中にも入ったことになります。
データのコピー自体はこれで完了ですが、複製まではもう少し作業が必要です。
手順8.wp-config.phpを編集する
wwwt内がサブドメインの中のファイルです。
が、コピーしたのは本サイト（本ブログ）のファイルがそのまま入っているので、色々と情報を書き換えていかないといけません。
まずはwp-config.phpを編集します。
wwwt内に入っているwp-config.phpを、デスクトップなどにコピーし開きます。
▼サブドメインのデータベースの情報に書き換えます。
書き換える情報が分からなければ、先程wwwt内のファイルを消す前にバックアップを取ったと思うので、そのwp-config.php内に書かれている情報をコピペすればOKです。
手順9.サブドメインのMySQLデータベース内の設定を変更する
そろそろ最後の手順ですが、データベース内の設定も変更していかないといけません。
今のデータベースには、本サイトのデータが丸々コピーされて入っているので、ドメインも本サイトのものが書かれています。
それをサブドメインに置換していく必要があります。
これはphpMyAdminにログインして書き換える方法もありますが、あまり推奨されていません。
なのでここでは、Search Replace DBを使って置換する方法をご紹介しています。
Search Replace DBを使った置換の方法
ダウンロード
置換するために、Search Replace DBのファイル一式ダウンロードしていきます。
▼トップ画面
真っ赤なカラーでちょっと大丈夫か？と思ってしまうトップ画面ですが、問題ないです。
下にスクロールするとダウンロードするためのフォームがあるので、そこに入力していきます。
▼入力フォーム
Knowledge checkには全部チェックを付けます。
後は、NameとEmailを入力しSUBMITをクリックすれば、入力したEメールアドレスにファイルダウンロード用のURLが届きます。
ちなみに、僕は名前をNontaにしています。
SUBMITをクリックしたら、入力したメールアドレスをチェックしましょう。
▼メールが届いていたら、hereをクリックするとダウンロードが始まります。
zipファイルがダウンロードできるので、それを解凍し【Search-Replace-DB-master】というフォルダ名のファイル一式があればOKです。
サーバーにアップロード
次に、【Search-Replace-DB-master】をFTPソフトを使ってサーバーにアップします。
アップする先は、サブドメイン設定で作られたフォルダ（今回で言うとwwwt）直下です。
▼Search-Replace-DB-masterをサーバーにアップロード
wwwtへのアップロードが完了したら、サブドメインのURLの後ろに/Search-Replace-DB-master/を付けてアクセスします。
もし本サイトのドメインがhttps://sample.comだとすると、今回のサブドメインはhttps://wwwt.sample.comです。
その場合のURLは、https://wwwt.sample.com/Search-Replace-DB-master/になります。
ドメインを置換
アクセス出来たら以下のような画面になっているはずです。
ここに置換するために入力します。
▼入力項目はこんな感じになります。
基本的に入力するのは、本サイト（本ブログ）になっていたドメインとサブドメインだけです。
search / replaceの箇所に入力しましょう。
「dry run」をクリックすることで、試しにどれだけの置換があるかの結果を見ることが出来ます。
問題なければ、「live run」で実行します。
大体数十秒で置換が行われますよ！
delete me でSearch Replace DBを削除！
置換が終わったら、必ずSearch Replace DBを削除します。
このファイルをサーバーに残したままだと、誰でもURLにアクセスできる状態のままになってしまいます。
万が一アクセスされてドメインを置換されたら大変ですので、忘れずに削除しましょう。
「delete me」をクリックするだけで、サーバーから削除してくれます。
手順10.サブドメインのログインIDとパスワードに変更する
サブドメインにWordpressをインストールした時に、ログインIDとパスワードを設定しました。
ですが、これまでの作業を終えた状態だと、本サイト（本ブログ）のデータベース情報をコピーしているので、ログインIDやパスワードは本サイトのものでしかログイン出来なくなっています。
それをサブドメインのIDとパスワードに変更します。
新規ユーザーを作成
▼まずはWordpressの管理画面にログインします。
▼ダッシュボードで、「ユーザー」⇒「新規作成」をクリックします。
▼新規ユーザーを作成します。
▼入力はこんな感じで。
ポイントは、権限を必ず「管理者」にして登録することです。
全て入力を終えたら、「新規ユーザーを追加」をクリックすることで登録できます。
既存ユーザーを削除
新規ユーザーを作成しただけだと、既存ユーザーでも新規ユーザーでもログイン出来る状態となるため、既存ユーザーを削除しておきます。
そのために一度Wordpressをログアウトし、新規ユーザーの方で新たにログインします。
管理画面左サイドバーから、ユーザー > ユーザー一覧をクリックします。
▼ユーザーが2名いるのが確認できるはずです。
あとは、既存ユーザーにマウスポイントを合わせ削除をクリックします。
▼削除画面
注意点は、「すべてのコンテンツを以下のユーザーのものにする」にチェックを付けて、新規ユーザーを選んでおくことです。
「すべてのコンテンツを消去します」にチェックが入った状態で削除してしまうと、記事がなくなってしまうので注意してください。
これでwwwtのサブドメインの管理画面に入れるのは、新規ユーザーで作成したログインIDだけとなります。
作業は以上です。
これで本サイトと全く同じ環境で、サブドメインのURLとしてテスト環境が完成しました。
サブドメインで同一サーバー内にWordpressのテスト環境を構築する方法｜まとめ
テーマを変えようと思ったはいいものの、かなりいじっていたので、ただテーマを変更してしまうと色んなところに不具合が出ると予想していました。
そのために、テスト環境を構築しようと思ったわけです。
初めてやった時はかなり試行錯誤しましたが、無事にテスト環境を構築出来て良かったです。
内容を自分でもまとめたおかげで、今後はテスト環境構築も、ドメイン変更やバックアップなども、今後はスムーズに出来そうです。
おまけ
テスト環境を作ったあと、テーマを変更して、同じようなデザインにしようと試みましたが、あまりにも労力がかかりそうなので断念しました。
そのままのデザインで使うだけなら問題ないものの、CSSを駆使したりデザインを大幅に改変する場合は、テーマ選びも少しは慎重にした方がいいかもしれませんね。
ぜひ参考にしてください。
僕が使っているサーバー⇒エックスサーバー 
僕が使っているテーマ⇒STORK（ストーク） 
Non太さん
先日ご相談させて頂きました、うっくんです。
Non太さんの記事を参考にコピーサイトを作ろうとしていましたが、途中でトラブルが発生してしまいました。
もしよろしければご相談に乗って頂けませんでしょうか。
貴重なお時間を割いて頂くことになるので、コンサルという形で御礼をお支払いしてもかまいません。(金額にもよりますが・・・)
ご検討頂けますようよろしくお願い致します。
うっくんさん
全然僕が分かる範囲でよければ大丈夫ですよ！
以前お送りしたメールアドレスに、内容記載してご連絡頂けると助かります。
昼間は働いてるので、もしかすると返信は遅くなるかもですが。。。
お金とか取らないので大丈夫ですよ笑
Non太さん
phpMyAdminにログインできなくなってしまっていましたが、エックスサーバーに問い合わせして解決してしました。
Non太さんの記事に沿って行っていたつもりでしたが、途中で手順が間違っていたのかもしれません。
でもこの記事のおかげでコピーサイトができました！
プラグインを使わずにちゃんとFTPをいじってできたので、今後のブログの幅を広げられそうです。
とても有益な記事をありがとうございました！
これまで別ドメインでテストサイトを構築して、本番ドメインにファイルをアップロードすることをしていましたが、サブドメインでの構築を知り、さっそく試してみました。 テーマ変更をして時間をかけて手直しをし、オリジナルサイトへのアップロードをしようとしてふと疑問が？ ご返事をいただけると大変助かります。
サブドメイン(test.abc.com)は親ドメイン（abc.COM)のpublic-htmlの配下にtestの名前で存在します。
abc.com – public-html（親ドメイン） – test – public-html(サブドメイン）
よって、test配下のpublic-html（public-html)のデータを親ドメインの(public-html)にアップロードすると、親ドメインのpublic-htmlは上書きされてしまい、テストサイト（test.abc.com)が無くなってしまうのではないか？ と考えて、いろいろとネット上で調べてみましたが、回答が見つからずに困っております。 上書きすることでテストサイトはなくなってしまうものという事であれば、それはそれで結構ですので、どのような解釈が正しいのかをコメントいただけると幸いです。
少しでも記事を参考にしてもらえたなら幸いですが、サブドメインでのテストサイトの構築について、いただいた質問について回答しておきます。
結論から言うと大丈夫です。
というのも、test直下のpublic_htmlを更新したり修正したりして、その後abc.com直下のpublic_htmlにアップロードするという流れになるかと思いますが、
public_htmlのフォルダ内すべてがそのまま入れ替わる、ということではなく、
同じファイル名のものを上書きで保存、存在していないファイルはそのまま残る、というイメージです。
「ファイル」が上書きで、public_htmlの「フォルダそのもの」が書き換えられるわけじゃないというのがポイントです。
test直下のpublic_htmlの中にtestは入っていないと思いますので、
言わばabc.com直下のpublic_htmlの中のtestフォルダは何の変化もないままに残ることになります。
言葉だけで説明するのは難しいですが、なくなることはないので大丈夫です。
と言うことになりますが、万が一不具合等があっても僕では対応しきれませんので、その点だけはご理解いただければ幸いです。
コメントありがとうございます！