黒猫さんぽみちMENUホームツイッター懸賞ツール生活に役立つ情報WordPressStinger5アフィリエイトお問い合わせ役に立つ情報、楽しい情報を発信するブログです。>XAMPPでWordPressの既存サイトをローカル開発環境に構築する方法2015/04/16Tweet0010023WordPressで運営しているブログをカスタマイズしようとすると、PHPファイルをいじって画面が真っ白になっちゃった...!なんてことがよくあります。いうことを防ぐためにローカル開発環境を作っておくと、いろいろ安全に試すことが出来て便利です。ローカル開発環境っていうのは、パソコンの中で仮想的にWordPressを再現する、ということなので、そこでいくら失敗しても大丈夫なわけです。新しいプラグインを導入したり、サイトデザインの変更を試してみたい場合にも、ローカル環境があると大変便利ですよね。今回は、まっさらなWordPressを作るのではなくて、既にサーバー上で運営しているWordPressサイトについて、XAMPPを使ってローカル環境に構築してみたいと思います。以下の様な条件で行いました。Windows7にXAMPPをインストール済みBackWPupでバックアップしたファイルを使う手順はこちらのサイトを参考にさせていただきました。わかりやすい記事に感謝です。ブラウザでXAMPPの管理画面が開くので、phpMyAdminをクリックします。データベースをクリックし、「データベースを作成する」の欄に今から作るデータベースの名前を入力して「作成」を押します。データベースの名前は「localwordpress_site01」などとしましょう。後で使うので、どこかにメモしておきます。照合順序はデフォルトのままでOK。成功するとこんな感じでポップアップが表示されます。作ったデータベース「localwordpress_site01」を選択して、インポートをクリックします。アップロードファイルの「ファイルを選択」をクリックして、PCにバックアップしてあるデータベースファイルを選択します。WordPressのデータベースファイルはsqlという拡張子です。アップロードは、zip形式やgzip形式での圧縮ファイルや、非圧縮のファイルに対応しています。例「sample_wp3.sql」ファイルの文字セットが「utf-8」であることを確認してから、画面下の方にある「実行」をクリックしてインポートします。注意XAMPPのデフォルトの設定だと、2MBまでのファイルしかアップロードできません。私のサイトもsqlファイルが20MB以上あったので、そのままではインポートできませんでした。この場合はXAMPPの設定ファイルを書き換えて、アップロードできる容量を増やします。以下、そのやり方です。ある「php.ini」というファイルを、テキストエディタで開いて次の2箇所を変更します。100M行数はXAMPPのバージョンによって異なるので、文字列で検索すると見つかりやすいと思います。「;」を削除することに注意しましょう。変更を保存したら、データベースファイルをインポートします。インポートが成功すると、このように表示されます。WordPressのデータを入れるフォルダを作ります。「nagoya-neko-local」とか、分かりやすい名前にしてメモしておきます。ローカル環境に合わせてURLを調整するブザウザのphpMyAdminに戻ります。先ほどインポートしたデータベースを、2箇所書き換えていきます。テーブル「wp_options」を選択します。一つ目option_nameが「siteurl」となっている項目の「編集」をクリックします。元のドメインのURLが書いてあるので、ここを変更します。「http://localhost/xampp/フォルダ名」のように、さっきPCに作ったフォルダ名を使って、URLを指定します。例.http://nagoya-neko.com↓http://localhost/xampp/nagoya-neko-local変更できたら、下の方にある「実行」をクリックします。次に、option_nameがhomeとなっている項目の「編集」をクリックします。2ページ目にあるので、「>」で次のページに移動してください。あとは一つ目と同じように、URLを書き換えて実行します。WordPressのバックアップデータをフォルダに入れるWordPressのバックアップデータをまるごと、さっき作ったフォルダに入れます。BackWPupでバックアップしたファイルを解凍し、中身をそのまま入れました。編集するWordPressのデータにwp-config.phpというファイルがあるので、これを編集していきます。編集する前に、オリジナルデータをバックアップとして保存しましょう。名前を変更しておきます。サーバーに戻すときはこのオリジナルファイルを使うことになります。バックアップファイルを作ったら、wp-config.phpを次のように編集します。この情報はホスティング先から入手してください。この情報はホスティング先から入手してください。'sample.xserver.jp');こんな感じの部分を4箇所変更します。この情報はホスティング先から入手してください。この情報はホスティング先から入手してください。'localhost');データベース名は自分が名付けた物を入れます。ユーザー名はrootにします。パスワードはローカルで設定していなければ空にしておきます。ホスト名はlocalhostにします。以上4箇所、変更できたら保存します。これで一応、既存のWordPressサイトがローカル環境に構築できたことになります。次のURLをブラウザで開いてみましょう。↓ローカルのサイトへのアクセスhttp://localhost/xampp/フォルダ名/↓ローカルのWordPressへのログインhttp://localhost/xampp/フォルダ名/wp-login.php※WordPressにログインするためのIDとパスワードは、サーバー上のWordPressと同じです。↓私の場合だとこんなURLになりました。http://localhost/xampp/nagoya-neko-local/でも、アクセスしてもErrorが表示されて、まだサイトが見れない人は多いと思います。私はここからいくつか変更が必要でした。Errorが出た人は、とりあえず開いたページをブックマークしておいて、次のことを試していきましょう。ローカルのWordPressサイトが表示されない場合ここまで作業しても、「.htaccessファイル」が原因でうまくいかないことが多いです。リクエストに応えることができませんでした。500」などと表示されます。これらに対処していきます。いうファイルをテキストエディタで開き、最下部に以下の記述をします。All</Directory>こんな感じになります。これはWordPressの.htaccessファイルを、XAMPPに正常に認識させるために必要な記述です。以下のサイトに詳しい解説があります。All」とすることで「.htaccess」が認識されるようになりました。NOTES設定したら、XAMPPのコントロールパネルでApacheを再起動して反映させます。2.「.htaccessファイル」を変更する.htaccessファイルには、サーバーに関する情報が記述されている場合があります。.htaccessを使ったファイルの圧縮やキャッシュの設定を使っている場合、ローカルのWordPressが動作しませんでした。それらの記述を削除します。※変更前に.htaccessファイルをコピーして、original.htaccessなどにファイル名を変更し、バックアップとしておくと良いでしょう。text/cssサーバーや運用にも依りますが、元はこんな感じでいろいろ記述されていると思います。WordPress」までだけにします。私の場合は、この時点でローカルサイトのトップページにアクセスすることが出来ました。3.サイトは表示されたが、内部リンクが機能していない今の状態でローカルサイトの内部リンクをクリックすると、XAMPPの設定画面に飛ばされることがあります。パーマリンクの設定を変更していると、こうなる事があるようです。この場合は、また.htaccessファイルを書き換えます。2箇所に、ローカルのURL「/xampp/nagoya-neko-local」を加えています。同じように、「/xampp/フォルダ名」を書き加えてください。この変更はこちらを参考にさせていただきました。wordpressテスト環境を構築するとき、.htaccessとwp-config.phpを安易に元サイトから移し変えると、痛い目に遭います。wordpressテスト環境のXAMPP内構築時の.htaccessとwp-config.phpの取り扱い|ウェブシュフようやくこれで、ちゃんと動くWordPressサイトをローカルに構築することができました!おわり私の場合、うまくいかない所がいくつもあったので、最初にすごく苦労しました。一度経験すると2回目からは数倍スムーズに行きます。どこかで躓いた方も根気よく原因を調べて、ぜひローカル開発環境を手に入れてください。WordPressスポンサーリンクTweet0010023黒猫さんぽみちもしも記事がお役に立ったら、ぜひぜひシェアしていただけるとうれしいです。超初心者なのですが、詳しく掲載されていておかげでなんとか出来そうです。ありがとうございます。PMあいるさん、コメントありがとうございます。この記事の方法では、バックアップデーターにWordPress本体も含まれています。XAMPPにまっさらなWordPressをインストールする必要はありません。データを置くだけでOKです。うまくいくことを祈ってますー。AM黒猫さん、早々のお返事ありがとうございます。WordPressをインストールしなくていいのなら、手間がひとつ減りますね。実は別サイトでは中身を入れ替えるやり方が掲載されていたので、そうするしかないのかなと思っていました。こちらで聞けて良かったです。ありがとうございました。PM非常に参考になりました!たすかりました~ありがとうございます。AMこちらを参考にローカル環境を構築しています。分かり易く助かっております。可能であれば以下について教えて下さい。バックアップデータのインポートも済ませて、ローカルのサイトへのアクセスとローカルのWordPressへのログイン画面には問題なくアクセスできます。phpMyAdminでのURLの調整、wp-config.php、.htaccessの変更も記事を参考に問題なく済ませていると思います。ところが、ログイン(この時はちゃんとhttp://localhost/xampp/example/wp-login.phpのアドレス表示)すると本番のサイトURLへ飛ばされてしまい、試しに記事を更新すると本番に反映されてしまう状況です。本番に反映されない環境が欲しいのですが、何がいけないのかが分からず困っています。以下断片的ではございますが、現状です。myadmin共に最新ver.・ブラウザはchromeを使用。IEでも同じ症状でした。・今回インポートしたものは既存サイトのメンテナンス用です。・これとは違うDB、フォルダがC:xampp/htdocs直下にあり、まっさらな状態のWPもインストール済み。これは既存のサイトのメンテナンスとは別に新しいサイトを試作予定のためです。(ちなみにこちらは正常に動作します。)・ローカルサイト(http://localhost/xampp/example/)にアクセスすると、TOPが表示された上に「お探しのページは見つかりませんでした。検索フォームから目的の記事を見つけることができます。リンクのアイコンは機能しているものの、画像が表示されていません。クリックすると本番サイトに飛んでしまいます。・まっさらな状態のWPはC:xampp/htdocs/exampleと直下にインストールする参考記事が多いのに対して、既存サイトをローカルにコピーする時はC:xampp/htdocs/xampp/exampleと階層を深くしているのには何か意味があるのでしょうか?・バーチャルホストの機能をONにする記事も見ましたが、私が求めているものと違う気がします。(でも、そもそもバーチャルホストを使わないといけないのでしょうか?)以上長くなってしまいましたがご回答頂ければ幸いです。PMninさん、こんにちは。★提案1.Apacheの再起動リダイレクトは、.htaccessファイルで実行されている場合があります。.htaccessファイルの中身を変更した場合は、Apacheの再起動をしないと変更が反映されません。XAMPPのApacheを再起動してない場合はしてみましょう。★提案2.wp-config.phpの記述1をしても効果が無い場合は、以下のwp-config.phpの記述を試してみてはいかがでしょうか。'ローカルのURL');どちらにも「ローカルのURL」を記述して、wp-config.phpに追記します。TechMemo私はこの記述をしなくても大丈夫でしたが、ninさんの症状に近いのではと思います。既存サイトをローカルにコピーする時、階層を深くしているのには何か意味があるのでしょうか?私が参考にした記事がそのようにされていたので、明確な理由は分かりません。バーチャルホストの機能をONにする記事も見ましたが、私が求めているものと違う気がします。(でも、そもそもバーチャルホストを使わないといけないのでしょうか?)バーチャルホストは、例えばブラウザでhttp://hoge.comと入力したら本来Web上のURLを見に行くべきところを、設定によって無理やりローカルのフォルダを見に行かせるためのものです。今回の件では、http://localhost/...で、一応ローカルサイトのログイン画面にアクセスできているので、バーチャルホストの設定は関係無いと思います。早々の返信ありがとうございました。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)関連記事BackWPup3.1.4でまたエラー。Regex既に投稿した記事本文について、文字列を一括で置換したいシーンがありました。...エックスサーバーmod_pagespeed設定の使い方。Stickが届きました。...Amazonプライムビデオの評価と使い方。iOSやPS4アプリでも快適に見れたよ2015年9月24日に、いよいよサービスが始まったAmazonプライムビデオ。...Amazonパントリーとは?使い方や、安いのか、メリットなどを調べますAmazonが2015年9月15日に開始した新サービス、Amazonパントリー。...運営者こんにちは。楽しいことが大好きです。サッカー、野球、フィギュアスケート、相撲あたりをよく見ます。このブログは、WordPress関連、便利ツール、スポーツ、懸賞、楽しいこと、興味のあることを書いていくブログです。役に立つ情報、楽しい情報を発信するブログです。Reserved.プライバシーポリシーTop。