「XAMPP」を利用したWordPressのローカル環境構築 その3

xamppでローカル環境構築

「XAMPP」を利用したWordPressのローカル環境構築 その2」では、「XAMPP」を利用してローカルPCに新規の真っ新なwordpress環境を構築する方法を紹介しました。
これにより、ローカル環境でwordpressを始めることが可能になりましたね。
今回は、新規ではなく、サーバー環境のwordpressを移行する方法を紹介します。これでサーバー環境のデザイン改良など色々試すことが可能になりますね!

また、僕はサーバー環境はマルチドメイン化しており、複数サイト運営しています(実際には「タスLife」以外は放置ですが…)。
よって、僕の環境を参考にするために、マルチドメイン化に対応したローカル環境の作成手順を紹介します。通常のシングルドメインの方の場合は、この手順よりシンプルになりますので、「通常なら…、マルチなら…」と補記を加えながら説明しますね。

記事が3本にもわたってしまい長くてすみません、、、最後までお付き合い頂ければと思います。では早速行きます!

 

サーバーデータの保存

※通常、マルチの両タイプともに同じ手順です。

僕は、サーバーデータの保存を「BackWPUp」というプラグインで行っています。
よって、「BackWPUp」でバックアップを取ったデータがある前提で話を進めます。

「BackWPUp」によるバックアップの方法は、こちらの記事どおりに行えばサクッと設定できます。

上記の内容で十二分に理解できるとは思いますが…、一応、私が行った設定内容も別記事で紹介しますね。

 

サーバーデータの移行

※通常、マルチの両タイプともに同じ手順です。

では、バックアップした2つのデータをもとに、「XAMPP」ローカル環境にサーバー環境のwordpressを移行します。

・wordpressのデータベース(記事などデータベースに格納されているデータ)
・wordpressのサーバーデータ(プログラムファイルなど)

1. htdocsフォルダ直下に適当なフォルダを作成します。この例では、「tasulife」にします。
なお、すでに「「XAMPP」を利用したWordPressのローカル環境構築 その2」のように、新規にwordpressをインストールしている場合は、「htdocs」フォルダ直下の「wordpress」フォルダは削除します。

「XAMPP」を利用したブログサイトのローカル環境構築

 

2. 1.で作成したフォルダに、wordpressのサーバーデータをすべて配置します。

「XAMPP」を利用したブログサイトのローカル環境構築

 

データベースの作成

※通常、マルチの両タイプともに同じ手順です。

 

1. 「XAMPP」の設定画面のMySQL行の「Admin」ボタンをクリックします。

「XAMPP」を利用したブログサイトのローカル環境構築

 

2. phpMyAdmin画面が開いたら、インポートリンクをクリックします。

「XAMPP」を利用したブログサイトのローカル環境構築

 

3. ファイルインポート画面が表示されるので、ファイル選択でwordpressデータベースファイルを選択し、「実行」ボタンをクリックします。

「XAMPP」を利用したブログサイトのローカル環境構築

 

なお、wordpressデータベースファイルを解凍(もしくは展開)すると、「〇〇.sql.gz」ファイルが生成されます。その「〇〇.sql.gz」ファイルを
解答(もしくは展開)すると、「〇〇.sql」フォルダが生成されるので、「〇〇.sql」フォルダを開いてください。その中に入っている「「〇〇.sql」ファイルを当画面で指定すればOKです。

「XAMPP」を利用したブログサイトのローカル環境構築

 

あらっ…、エラーになってしまいました。よくよく見ると、「ファイルサイズが大き過ぎる」とのことです。確かに、ファイル容量を見ると若干超えていました。。。
そこで、PHPのファイル最大値の設定を変更しようと思います。

「XAMPP」を利用したブログサイトのローカル環境構築

ファイルサイズがPHPの設定で許可された最大値を超えていた。。。

「XAMPP」を利用したブログサイトのローカル環境構築

確かに、最大2Mという記載が。。。

「XAMPP」を利用したブログサイトのローカル環境構築

ファイルサイズが2Mを若干超えている。。。

 

4. ということで、PHPフォルダの「php.ini」ファイルを修正します。「C:\xampp\php」直下にファイルがあります。
そのファイルの以下の点を確認してください。

「XAMPP」を利用したブログサイトのローカル環境構築

 

(1). 「upload_max_filesize」という記述を探してください。これは、1ファイル当たりの最大アップロードサイズです。僕は、「2M」になっていたので、「5M」に修正しました。

(2). 「post_max_size」という記述を探してください。これは、1回のアップロードファイルすべての合計サイズです。僕は、ここも「2M」になっていたので、「5M」に修正しました。

「XAMPP」を利用したブログサイトのローカル環境構築

 

サイズは、各々のファイルサイズと比較して、調整してください。修正後、ファイルを上書き保存して、XAMPP設定画面で、ApacheとMySQLを再起動します。
それぞれ、「Stop」ボタンをクリックして停止したことを確認して、再度、「Start」ボタンをクリックしてください。

 

5. 再度、3.と同様の手順でSQLファイルからデータベースデータをインポートします。無事インポート完了しました!

「XAMPP」を利用したブログサイトのローカル環境構築

 

wordpress設定ファイルの修正

※通常、マルチの両タイプともに同じ手順です。

 

次に、wordpressの設定ファイルを修正します。設定がサーバー環境になっているため、それをローカル環境用に設定する必要があるためです。

1. 「C:\xampp\htdocs\tasulife」直下にある、「wp-config.php」ファイルをエディタで開きます。

「XAMPP」を利用したブログサイトのローカル環境構築

 

2. 修正箇所は以下のとおりです。

/** WordPress のデータベース名 */
define(‘DB_NAME’, ‘XXX’); ←作成したデータベース名に変えてください。

/** MySQL のユーザー名 */
define(‘DB_USER’, ‘root’); ←「root」に変えてください。ただし、ユーザー名を変更している場合は、変更した名称を入力してください。

/** MySQL のパスワード */
define(‘DB_PASSWORD’, ”); ←空欄に変えてください。ただし、パスワードを変更している場合は、変更したパスワードを入力してください。

/** MySQL のホスト名 (ほとんどの場合変更する必要はありません。) */
define(‘DB_HOST’, ‘localhost’); ←「localhost」に変えてください。

修正後、ファイルを上書き保存してください。

 

データベースに登録しているのドメイン名の変更

※6.以外は、通常、マルチの両タイプともに同じ手順です。6.は、マルチのタイプのみ1つ手順が多くなります。

データベースにサーバー環境のドメイン名が多数登録されているため、そのままだとローカル環境で操作をしても、サーバー環境を見に行ってしまうことになります。よって、データベースに登録されているドメイン名を一括で修正する必要があります。
また、wordpressにはシリアライズされたデータも登録されているため、簡単には修正できません。そこで、「Search Replace DB」というツールを使って、一括でドメインの名称変更を実施しましょう。

1. 公式HPにアクセスします。

2. 「Download Search Replace DB」の欄に必要事項を入力し、「SUBMIT」ボタンをクリックします。なお、チェックボックスはすべてにチェックしましょう。

「XAMPP」を利用したブログサイトのローカル環境構築

 

3. 「interconnect/it」からメールが届くので、「here」リンクをクリックしましょう。すると、ダウンロードページが起動するので、「Search-Replace-DB-3-1-0-emaildownloads.zip」を任意の場所に保存します。

「XAMPP」を利用したブログサイトのローカル環境構築

 

4. ダウンロードしたzipファイルを解凍(もしくは展開)し、解凍後のフォルダをサーバーデータを移行したフォルダにコピー&ペーストします。
「C:\xampp\htdocs\tasulife」ですね。

「XAMPP」を利用したブログサイトのローカル環境構築

 

5. ブラウザで「http://localhost/tasulife/Search-Replace-DB-master/」にアクセスすると、以下の画面が表示されます。
※「http://localhost/tasulife/Search-Replace-DB-master/」の「tasulife」の部分は、各々で変更してください。

「XAMPP」を利用したブログサイトのローカル環境構築

6. ドメインの置換処理
画面のdatabase部の「name, user, pass」は、各々のデータベースに適した内容になっているか確認してください。

「XAMPP」を利用したブログサイトのローカル環境構築

それがOKであれば、search/replace部の、replaceテキストボックスに、サーバー環境のドメインを、withテキストボックスに、ローカル環境のドメインを入力してください。
僕の場合は、replaceテキストボックスに「tasulife-23.com」、withテキストボックスに「tasulife」と入力しました。

「XAMPP」を利用したブログサイトのローカル環境構築

入力後、「dry run」ボタンをクリックしてください。クリックすると、置換対象の件数がテーブルごとに表示されます。ここでは、このくらいあるのかー、くらいに思っていてください。
確認後、「live run」ボタンをクリックすると確認ダイアログが表示されるので、「OK」ボタンをクリックして、置換処理が実行されます。
※僕は、「タスLife」のサイトのみローカルで再現するため、1度の置換で済みますが、多数のサイトを復元する際は、その数だけ置換してください。ただし、手順は同じです。〇〇を△△に変えるってだけです。

7. サーバー環境でSSL化を実施している場合は、6.のドメインの置換処理に加えて、「https→http」に置換します。6.のときと同様に、replaceテキストボックスに「https」、withテキストボックスに「http」と入力して、置換処理を実行してください。

 

8. 画面のdelete部の「delete me」ボタンをクリックすることで、4.で配置した「Search-Replace-DB-master」フォルダが削除されます。
「XAMPP」を利用したブログサイトのローカル環境構築

修正後、ファイルを上書き保存してください。
通常の場合は、これで設定完了です。次の「マルチドメイン化による複数サイトを制作している場合の設定」は読み飛ばして、「ローカル環境の確認」を見てください。
マルチサイト対応を行っている方は、次を読んでください。

 

マルチドメイン化による複数サイトを制作している場合の設定

※マルチのタイプのみ実施する手順です。

通常の場合は、「localhost」を参照するだけで、ローカル環境のwordpressが見れますが、マルチドメイン化している場合は「〇〇」を参照する場合も、「△△」を参照する場合もローカル環境のwordpressを見てね。という設定が必要になります。それについて、以下で説明します。

 

1. hostsファイルの設定

このファイルは、指定したドメインを参照した際は、指定したアドレスを見てね。という設定をすることができます。

具体的には、「C:\Windows\System32\drivers\etc」内にある「hosts」ファイルを開き、一番下に

/*** 以下記述内容
「127.0.0.1  tasulife」
***/ ここまで

を追加します。「127.0.0.1」は、ローカル環境のことを指し、「tasulife」にアクセスした場合は、ローカル環境を見てね。と設定したことになります。

もちろん、「tasulife」は、各々の設定するドメインに変更してください。
僕は、「タスLife」のみをローカルで再現するため1行追加しただけですが、複数サイトを構築し、それを参照したい際は「127.0.0.1  XXXXX」と適宜追加してください。

 

2. Virtualhostの設定

Virtuslhostは、1つのサーバーで複数サイト(ドメイン)の閲覧を可能にする機能です。
Virtuslhostを利用して、どのドメインからでもローカル環境のwordpressを参照するように設定しましょう。

XAMPPでは、「C:\xampp\apache\conf\extra」にある、「httpd-vhosts.conf」ファイルに設定を記述する必要があります。
記述する内容は、

/*** 以下記述内容
NameVirtualHost *:80

<VirtualHost *:80>
DocumentRoot “/xampp/htdocs”
ServerName localhost
</VirtualHost>

<VirtualHost *:80>
DocumentRoot “/xampp/htdocs/tasulife”
ServerName tasulife
</VirtualHost>
***/ ここまで

としてください。
2つ目の<VirtualHost *:80>内で、「tasulife」にアクセスがあった際は、「/xampp/htdocs/tasulife」を見るようにと設定しています。
僕は、「タスLife」のみローカルで再現するため、その追加だけで良いですが、複数サイトを参照したい際は、サイト分だけ<VirtualHost *:80>部分を追加してください。

 

3. wp-config.phpの修正

マルチドメイン化した際に記述した内容の修正を行います。

マルチドメイン化した際に、以下の記述をしているかと思いますが、
define(‘DOMAIN_CURRENT_SITE’, ‘tasulife-23.com’);
※サーバー環境のドメイン

それを、
define(‘DOMAIN_CURRENT_SITE’, ‘tasulife’);
※ローカル環境のドメイン
に修正します。

 

4. apacheの再起動

「XAMPP」の設定画面で、apache行の「stop」ボタンをクリックし、apacheが停止したことを確認したのちに、「start」ボタンをクリックしてください。

 

ローカル環境の確認

「http://tasulife/wp-login.php」にアクセスし、wordpressのログイン画面が表示されたらローカル環境の構築が完了です!
※「tasulife」部分は、各々のドメインに変更してください。

念のため、ログインして確認してください。
「XAMPP」を利用したブログサイトのローカル環境構築

なお、SSL化しているサイトの場合、キャッシュが残っているためにサイトにアクセスできないことがあるので、その際は、キャッシュをクリアしてください。

 

まとめ

長くなりましたが、XAMPPによるローカル環境の構築ができましたね!

これで、心置きなく冷や冷やすることなく好きなように環境をいじれます。色々試して、ブログライフを充実させましょう。

 

スポンサーリンク


Pocket


SNSでもご購読できます。

コメント

コメントを残す

*

タスlife