【XAMPP】WordPressでのローカル環境を構築方法
通常サイト制作をする場合、FTPでサーバーにアップロードして表示確認をすると思いますが
ローカル環境で開発すれば、サーバーにアップロードせずに表示確認ができます。
自分のPC内にローカル環境を構築するパッケージはいくつかありますが（XAMPP・MANP・WAMPなど)、今回はXAMPPでの構築方法をお伝えします。
XAMPPをインストールする
まずは公式サイトからXAMPPをダウンロードしインストールしてください。
XAMPPダウンロードはこちら
今回Cドライブ直下にインストールしたていで進めていきます。
WordPressファイルを設置する
XAMPPのインストールが完了したら、WordPressファイルを公式サイトからダウンロードしましょう。
WordPressダウンロードはこちら
以下のディレクトリに新規フォルダを作成し、その中にWordPressファイルを設置します（今回「test」というフォルダを作ります）
Cドライブ > xampp > htdocs > test > ここにWordPressファイル設置
XAMPP内のファイル編集
httpd-vhosts.confというファイルを編集しますので開いてください。
※普通にhttpd-vhosts.confのファイルを開いて保存しようとしても、管理者権限で保存できないことがありますので、以下の方法で管理者権限で開きます。
メモ帳を右クリック → 「管理者権限で開く」 →「httpd-vhosts.conf」を開く
階層は以下の通り
Cドライブ > xampp > apache > conf > extra > httpd-vhosts.conf
# Virtual Hosts
#
# Required modules: mod_log_config
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.
#
# Use name-based virtual hosting.
#
##NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any block.
#
##
##ServerAdmin webmaster@dummy-host.example.com
##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
##ServerName dummy-host.example.com
##ServerAlias www.dummy-host.example.com
##ErrorLog "logs/dummy-host.example.com-error.log"
##CustomLog "logs/dummy-host.example.com-access.log" common
##
##
##ServerAdmin webmaster@dummy-host2.example.com
##DocumentRoot "C:/xampp/htdocs/dummy-host2.example.com"
##ServerName dummy-host2.example.com
##ErrorLog "logs/dummy-host2.example.com-error.log"
##CustomLog "logs/dummy-host2.example.com-access.log" common
##
デフォルトではこのような記述になっています。
##がコメントアウトで、このファイルのコードはデフォルトでは機能してない状態です。
既存の記述の下にローカル環境を構築したいファイルのディレクトリなどを新規に書き足していきます。
「VirtualHost」の部分をコピペして値を変更していきます。
ServerAdmin webmaster@dummy-host2.example.com
DocumentRoot "C:/xampp/htdocs/test"
ServerName l-test.com
ErrorLog "logs/test-error.log"
CustomLog "logs/test.com-access.log" common
追加後の記述がこちら。
変更する箇所は…
DocumentRoot → ローカル環境を構築したいファイルの階層を指定
ServerName → サイトを表示させるための仮のURLを指定（どのような名前でも大丈夫ですが、l-test.comの.comや.jpなどのようにドメイン名を指定しておいてください）
ErrorLog → エラーがあった際にログがたまるファイルを指定（自動でファイルが作成されます）
CustomLog → 変更ログ？がたまるファイルを指定（自動でファイルが作成されます）
今回1つのサイトのローカル環境を構築しますが、このように書き足していくことで無制限にローカル環境を構築できます。
このように１つのサーバーで複数のドメインを運用する技術をバーチャルホストと呼びます。
イメージとして、１つのマンション(実ホスト)の中にいくつも貸し部屋（バーチャルホスト）がある感じに似ています。
めっちゃ便利！！
hostsファイルを編集
次にhostsファイルを編集します。
Cドライブ > Windows > System32 > drivers > etc > hosts
# Copyright (c) 1993-2009 Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP for Windows. # # This file contains the mappings of IP addresses to host names. Each # entry should be kept on an individual line. The IP address should # be placed in the first column followed by the corresponding host name. # The IP address and the host name should be separated by at least one # space. # # Additionally, comments (such as these) may be inserted on individual # lines or following the machine name denoted by a '#' symbol. # # For example: # # 102.54.94.97 rhino.acme.com # source server # 38.25.63.10 x.acme.com # x client host # localhost name resolution is handled within DNS itself. # 127.0.0.1 localhost # ::1 localhost
デフォルトの記述がこちら。
IPアドレスとドメインがセットで書かれており、このファイルを書き換えることでドメインを任意のIPアドレスに向けさせることができます。
一番下に、「IP ドメイン名」の行があるので、そこにローカルホストIP（127.0.0.1 ）と先ほど「httpd-vhosts.conf」で設定したServerNameのドメインを入力して保存します。
127.0.0.1 l-test.com
wp-config.phpの作成
次にデータベースの読み込み先を指定するために、wp-config.phpというファイルを作成します。
WordPressのデータ内にある「wp-config-sample.php」を開いてください。
Cドライブ > xampp > htdocs > test > wp-config-sample.php
/** WordPress のためのデータベース名 */
define('DB_NAME', 'database_name_here');
/** MySQL データベースのユーザー名 */
define('DB_USER', 'username_here');
/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'password_here');
デフォルトのこの部分を下記の用に変更します。
/** WordPress のためのデータベース名 */
define('DB_NAME', 'test-db');
/** MySQL データベースのユーザー名 */
define('DB_USER', 'root');
/** MySQL データベースのパスワード */
define('DB_PASSWORD', '');
データベース名 → 後ほど作成するデータベース名（なんでもOK)
ユーザー名 → root(必須)
パスワード → 空欄(必須)
ユーザー名、パスワードに入れる文字は決まっているので、データベース名のみ任意で変更してください。（「test-db」というデータベースを作る提で進めます）
変更後、wp-config.phpというファイル名でwp-config-sample.phpと同階層に保存してください。
データベースを作る
XAMPのアプリケーションを開いてください。
Cドライブ > xampp > xampp-control.exe
MySQLの項目の「Start」→「Admin」の順にクリック
phpMyadminが表示されますので、「データベース」→「データベース名入力(wp-config.phpで設定したデータベース名。今回は「test-db」を作成)」→「作成」
これでデータベースが作成されます。まだ空の状態ですが、このままでOKです。
表示確認してみよう
ここまでで、ローカル環境の構築作業は終了。
実際に表示確認してみましょう。
XAMPの「Apache」「MySQL」両方をStartしてください。
そして、ブラウザを開き「httpd-vhosts.conf」で保存したServerNameで表示確認しましょう。（今回の場合「l-test.com」）
「WordPressのサイト名」「ログインID」「パスワード」の設定画面が表示されれば成功。そのまま任意の情報を入力してください。
エラーが出る場合
◆データベース接続確立エラー
→wp-config.phpで指定しているデータベース名とphpMyadminで作成したデータベース名に差異がある可能性があるので確認しましょう。
◆WPインターナルエラー
→サーバーのPHPバージョンとWordPressのバージョンが合っていない可能性あり。→ 最新バージョのWordPressをダウンロードしてきて入れ替えてみる
◆表示されるが、CSSなどのリンクを読み込んでない
→wp-configで指定しているURLのwwwを外してみる
◆トップを表示させてもファイルがダウンロードになる
→htaccesの記述が間違っている可能性があるので、以下に変更
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
まとめ
いかがでしたでしょうか。
ローカル環境の構築はフロントエンジニアにとってもはや必須技術。
自分のパソコン内で仮想サーバーを構築するので、ネット環境のつながっていない外出先でもサイトを表示させたり作業ができます。
本番環境のサーバーに影響を与えることなく開発を進められるので、ローカル環境で開発完了後、本番環境にアップというのが基本的な流れになります。
よきコーディングライフを！
