LoginSignup
1
8

More than 5 years have passed since last update.

稼働中ワードプレスサイトのローカル開発環境準備

Last updated at Posted at 2017-03-06
この記事ではWindows8.1を使っています。
XAMPPのインストールはしてある前提です。(この記事ではC:\xamppにおいています。)
また本番環境のDBのバックアップも用意しているものとしています。

はじめに

公開中/稼働中のWordPressサイトをローカル開発環境に構築する方法です。
コピーだけするとデータベースエラーや、お馴染みの真っ白い画面になるので、それらを解決するためのポイントをまとめてみようと思います。自分を含め非エンジニアの方の(馴染みのないファイルを触るのが)なんか怖いを解決できたらいいなと思って書きます。

工程は
1.データベースをインポート
2.WordPressをダウンロード&データベースを設定変更
3.WordPressの設定変更
4..htaccessを設定変更
という流れです。

1.データベースをインポート

Php My Adminからインポートして2箇所変更していきます。
まずはXAMPPを起動したらApacheとMySQLのstartボタンをそれぞれクリックして起動。続いてApacheの左から二つ目のAdminボタンをクリック。

00.jpg

2017年3月時点では以下のような画面です。ナビゲーションのphpmyadmin(下図右上)をクリックします。
02.jpg

以下のような画面に移って、データベースタブを選んだら任意の名前(ここではlocalWordpressとしました。)をつけてデータベースを作成します。
03.PNG

インポートタブを開いて、作成したデータベースを選んでいることが確認できたら準備しておいたデータベースファイルをインポートします。
04.PNG

[ポイント]XAMPPでアップロードできるファイルサイズを上げる
私はここで.sqlファイルをアップロードできませんでした。原因はXAMPPのアップロードできるファイルサイズの上限が小さすぎたためです。以下のファイルを2箇所変更することで解決できました。
C:\xampp\php
開くとかなりなが~いファイルですが、600~900行目(超ざっくり)くらいに目的の記述があります。
; post_max_size = 8M
; upload_max_filesize = 2M
post_max_sizeとupload_max_filesizeで検索するとすぐ見つかりました。
それぞれ以下のように編集します。
post_max_size = 500M
upload_max_filesize = 500M
先頭の;とファイルサイズの変更になります。500Mの部分はデータベースのファイルサイズに応じて変更してください。

2.WordPressをまるっとダウンロード

対象のWordPressをサーバからまるっとコピーしてXAMMPフォルダの中のhtdocsの中のXAMMPフォルダにいれましょう。
C:\xampp\htdocs\xampp
仮にあなたのサイトがyourwpという名前なら下記の構造になります。
06.png

用意できたらphpMyAdminにもどります。先の工程でインポートしたデータベースは本番環境用のものでしたのでローカル環境用に2箇所ほど変更していきます。下の例は接頭辞がppcなっていますが、wpと読み替えて進めてください。wp_optionsというテーブルを選んでください。
05.PNG

option_nameカラムでsiteurl(先頭にあると思います)を編集します。
本番環境のurlが記述してあると思うので、ローカルのものに書き換えます。(yourwpの部分が任意です)
http://localhost/xampp/yourwp
07.png

もう一つ、option_nameカラムでhomeというのが次のページにあると思うので同じように編集します。

3.WordPressの設定変更

もう一息です。
wordpress内のwp-config.phpというファイルを編集してデータベースと接続できるようにします。
場所はyourwp/wp-config.phpです。図にするとこんな感じです。
08.png
開いたら下図の4箇所を設定変更します。
09.png

   
DB_NAME localWordpress
DB_USER root
DB_PASSWORD 空にしておきます
DB_HOST localhost

保存すれば一旦ここで確認してみましょう。環境によっては今タイミングでうまくサイトが見られるはずです。
ブラウザから以下にアクセスしてください。
http://localhost/xampp/yourwp/
(yourwpの部分は任意)

エラーが出る場合は引き続き進めていきます。

4..htaccessを編集

次に触るファイルはC:\xampp\apache\conf\httpd.confです。.htaccessファイルをXAMMPの環境で正しく認識させるための工程になります。
10.png
ファイルを開いたら最下部に行き、以下のコードを追加します。

<Directory C:/xampp/htdocs/xampp>
    AllowOverride All
</Directory>

変更したら保存してXAMMPのコントロールパネルからapacheを再起動します。

最後に.htaccessを変更します。
場所は先ほど編集したwp-config.phpと同じ場所(yourwp/.htaccess)です。
.htaccessファイルはサーバの設定などが記述してあるファイルで、本番環境からそのままダウンロードしたものだと都合がわるい場合が多いようです。今回は内容をすべて削除して以下の内容を記述し直します。
ポイントはRewriteBaseとRewriteRuleのところです。例のごとくyourwpを任意で書き換えて保存してください。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /xampp/yourwp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /xampp/yourwp/index.php [L]
</IfModule>

# END WordPress

ここまで行うとローカル環境でワードプレスサイトが無事表示されるはずです。

まとめ

私はデザイナーをしていますが、状況によってプログラマやエンジニアに助けを借りずにワードプレスの環境設定を行わないといけないこともあります。今回のローカル環境の用意もわからないことが多いなりに調べながらやったことを次回からサクッと出来るようにまとめてみました。
.htaccssの設定などこの方法ではうまくいかないこともあるかもしれませんが、うまくいかないときはまた調べながら追記していこうと思います。

1
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
8