サイトの改修やWordPressのテーマ作成の為に、XAMPPを使ってWordPressのローカル環境を構築したいとお考えだろう。
現在も多くのサイトでこの「XAMPPを使ったWordPressローカル環境の構築方法」が紹介されているが、実はXAMPPは最近仕様が変わってしまった為、大半のサイトの説明は古いものになっている。
だが安心してほしい。この記事では筆者が2019年6月にXAMPPを使ってWordPressのローカル環境を構築した経験を基に、その正しい全手順を画像付きで紹介する。
この記事の通り行えば、初めてローカル環境を構築するあなたでも15分ほどで構築が完了するはずだ。
※なお、XAMPPはWindowsにおける利用に向いている。MacでのWordPressローカル環境構築を検討している方は、MAMPを使ってローカル環境にWordPressをインストールする方法から、Macと相性の良いMAMP(マンプ)を使った環境構築の方法を確認してみてほしい。
目次
1.XAMPPとは
改めて「XAMPP（ザンプ）」とは、Windows や Mac OS X など、どのような OS 上でも WordPress が作れる環境を提供するフリーソフトだ。
次の５つの頭文字をつなぎ合わせたのが XAMPP の名称の由来となる。
- cross-platform の “cross” を意味する “X“（Windows、Linux、Mac OS X、Solaris）
- Apache HTTP サーバー（Webサーバー）
- MySQL（データベース）
- PHP（プログラミング言語）
- Perl（プログラミング言語）
XAMPP には、ローカル環境にブログサイトを作る構成がしっかり用意されており、また WordPress との相性も良い。
XAMPP はあらゆる OS 環境で使用できるが、冒頭お話した通りMac ユーザーは、Mac OS X 専用に開発された相性が良いソフトのMAMP （マンプ）を使う事をお勧めする。(参考：MAMPを使ってローカル環境にWordPressをインストールする方法)
この記事では、Windowsユーザーの方に向けて、以下の順番で「XAMPP でローカル環境を構築し、WordPressのインストール・初回起動を行うまでの手順」を紹介していく。
- XAMPPのインストール
- Webサーバー、データベースの起動
- ローカル環境のセキュリティ設定
- データベースの作成
- WordPressのインストール、初回起動
2.XAMPPのインストール
それではまず、XAMPPのインストールを行なっていこう。以下に手順を紹介する。
2-1.XAMPPのインストール手順
まずXAMPP公式サイトにアクセスし、図の通りにダウンロードの「Windowes向けXAMPP」をクリックして、ソフトウェアのダウンロードを行おう。
クリック後、以下の画面に遷移してダウンロードが行われるはずだ。
ダウンロードが完了したら、XAMPPデータをダブルクリックして起動する。
以下の警告ダイアログが表示されると思うが、「OK」をクリックすれば問題ない。
これは、「XAMPP データのインストール先を Windows のプログラム管理データ上にすると XAMPP がうまく稼働しない」ことを伝えた内容だ。後述するが、インストール先はデフォルト設定のままで進めるので特に問題ない。
次の画面が表示されたら「NEXT>」をクリック。
次画面では、インストールデータの内容を指定できる。図の通りチェックを入れ「Next>」をクリックしよう。
WordPress をインストールするには次の４つが必要になる。
Apache（Webサーバーソフトウェア）
MySQL（データベース）
PHP（プログラミング言語）
phpMyAdmin（データベース管理ツール)
これ以外のチェックは特に必要ないので、４つにチェックが入っているかを確認しておこう。
続いて XAMPP データの保存先を聞かれるので、図の通りデフォルトのままにして「NEXT ＞」をクリックする。
次に「Bitnami」の告知が表示されるが、特に利用しないので図の通りチェックを外して、「NEXT ＞」をクリックしよう。
Bitnami とは、WordPress や Drupal など様々なブログシステムが、とても簡単にインストールできる便利なツールなのだが、使うと WordPress の管理画面が英語になってしまうので、ここでは使用しない。
インストールの準備ができた内容が表示されるので、「NEXT ＞」をクリックして進めよう。
図はXAMPPのインストール中の画面だ。
セキュリティに関するダイアログが表示されたら「アクセスを許可する」をクリック。
Windows ファイアーウォールとは、ネットワーク上で外部からの不正なアクセスを防ぐシステムだ。ファイアーウォールに Web サーバー「Apache HTTP Server」のアクセス許可を与えておくと WordPress は、アクセス制御を受けることなく問題なく稼働する。
またローカル環境の構築なので、ローカル内でのアクセスに限られる「プライベート ネットワーク」にチェックを入れよう。
次の図の画面が表示されたらインストールは完了だ。XAMPP の管理ツールを起動するため下図にチェックを入れて「Finish」をクリックしよう。
すると、XAMPP の管理ツールが起動される。ツール画面の下部分のログ（ツールの起動状況の記録）を見て欲しい。図の通り黒色と青色の文字だけで表示されたら、問題なくインストールが完了したことがわかる。
補足：ログにエラーが表示された時の対処法
図のようにツールのログにエラー（赤文字）が表示されて、Webサーバーが稼働しないことがある。インストール直後のエラーの主な原因は、ポートの重複によるものだ。
Web サーバーソフト（Apache）や、データベース・ソフト（MySQL）ごとに「ポート」番号を指定する必要がある。これを識別番号として、初めてユーザーとサーバーの相互応答が可能になる。
一般的に HTTP サーバーのポート番号には「80」、MySQL には「3306」が使用される。
XAMPP をインストールすると各ソフトに一般的なポート番号を自動で振ってくれるのだが、その番号が既に使用されていると、重複していることをエラーで知らせてくれる訳だ。
この解決策として、「既にインストールして使用しているソフトのポート番号を変更（または停止）する」という方法が考えられる。
XAMPP には、そのためのチェックツールや設定が備わっているため、これらを活用して問題を解決しよう。
※ XAMPP で使用するソフト自体のポート番号を変更する方法もあるが、サーバー管理者が行うスキルが必要とされる。コンテンツの作成に時間をかけて欲しいため、ここでは説明を割愛する。
既にインストールしているソフトのポート番号を変更・停止する
図の通りXAMPP管理ツールの右側にある「Netstat」をクリックしよう。
Netstat とは、ネットワークの接続状態を知るためのサーバー管理者が使用する機能だ。それを初心者の方でも簡単に使用できるようにしている。
すると下図の画面が表示される。赤枠は、HTTP サーバーの内容を示す。
一般的に HTTP サーバーのポート番号には「80」、 HTTPS サーバー（セキュリティの高いサーバー）のポート番号には「443」が使用される。また、「httpd.exe」とは、Apache の実行プログラムだ。
もし、ここで異なる実行プログラムがポート番号「80」を使用していたら、そのソフトの番号を変更するか、使用を停止すると解決する。
3.Webサーバー、データベースの起動
WordPress を使用するには、前もって Web サーバーソフトを起動する必要がある。
一般的なレンタルサーバーは、常にこのソフトが起動している状態である。しかし、ローカル環境の場合、パソコンを起動する度にソフトを起動させないと、WordPress を使用することができない。
ここでは次の２つのソフトを起動させる手順を解説する。
Apache（Web サーバー）
MySQL（データベース）
3−１．Apache の起動方法
XAMPPの管理画面にあるApacheの「Start」をクリックしよう。
すると「Apache」の文字の背景色が緑色に変わる。また、下部のログに「running（起動中）」というステータスが表示されたら、ソフトの起動は成功だ。
3−２．MySQL の起動方法
XAMPP の管理画面にある MySQL の「Start」をクリックしよう。
先の「Apache」と同じように下図ダイアログが表示されたら、「アクセスを許可する」をクリックする。
「MySQL」の文字背景が緑色に変更し、ログにも「running（起動中）」と表示されたら、問題なくソフトが起動していることがわかる。
次に「Admin」をクリックして、MySQL の管理ページを開いてみよう。
下図の「phpMyAdmin」画面が表示されたらソフトの起動も管理ページも問題ないことがわかる。
4.セキュリティ設定を変更する
次にMySQL(データベース)等に関する、セキュリティの設定の変更を実施する。設定すべき項目は以下の2つだ。
外部からのアクセスを制限する為に、デフォルトでは設定されていないMySQL(MariaDB)のパスワードを設定する - ネットワーク経由のアクセスを制限する為に、ブラウザでデーターベースを管理する”PhpMyAdmin”に管理者パスワードを設定する
分かりづらいかもしれないが、要は「アクセスを防ぐ為にパスワードを設定する」という理解で問題ない。
加えて実はこのセキュリティ設定、現在は設定方法が過去のXAMPPとは異なる。(ここが冒頭お話しした、現在の多くのサイトの説明が古い部分だ。)
従来は「Apache」の「admin」をクリックする事で以下の管理画面が開きここからセキュリティの設定を行う事ができた。
しかし現在は、「Apache」の「Admin」をクリックしても、この管理画面が表示されなくなってしまった。その為、別の方法でMySQLのセキュリティの設定を行う必要がある。
と言っても、これからその新しい設定方法を丁寧に解説するので安心してほしい。
4-1.MariaDB(MySQL)のパスワードを設定する
「XAMPP」のデータベース「MariaDB(MySQL)」のログイン情報は、ユーザ名は「root」がデフォルトで設定されているが、このパスワードは未設定だ。
パスワードが設定されていないと、外部からのアクセスにより容易にDBの書き換えが可能になってしまうので、このパスワードを設定していく。
4-1-1.Shellを起動する
従来であればXAMPPの管理画面からパスワードを変更する事ができたが、現在はShellと呼ばれる黒い画面を立ち上げて変更する必要がある。
MariaDB(MySQL)のサービスを起動させたまま、「XAMPP コントロールパネル」右側のメニューから、「Shell」ボタンをクリックしよう。
そうすると、下記の画面が表示される。
「Shell」は、一行ずつコマンドを入力することで、ファイルのコピー、フォルダーの変更など色々な事ができるツールだ。エンジニアの方はご存知の方も多いだろう。
4-1-2.ディレクトリを移動する
Shellが開いたら「#」の横に、「cd mysql\bin」と入力しよう。
その後「Enter」を押すと下記の様な文字が表示される(パス前半にPCの端末名が表示されるが、この画像では敢えて隠している。)
cdコマンドは「チェンジディレクトリ(ディレクトリの移動)」の略で、特定のフォルダに移動したい時に利用される。今回は「cd mysql\bin」と入力した事で、mysql/binのフォルダに移動を行なった。
4-1-3.MariaDB(MySQL)にログイン
パスワードを変更する為に、まずはMariaDSB(MySQL)へのログインを実施しよう。
先ほどと同様に、「#」の横に、「mysql -u root」と入力して「Enter」を押すと、下記のような画面が表示される。
「-u root」は「root」というユーザーでログインするという意味だ。上の画像の様な文字列が現れれば「MariaDB(MySQL)」にログインできた証だ。
4-1-4.rootユーザのパスワードを設定
ログインが行えたら、パスワードを変更しよう。MariaDB［(none)］>の右に、「set password=password(‘自分のパスワード’);」と入力し、「Enter」を押す。
※”自分のパスワード”は、任意の文字列で構わない。
この画像の様に”Query OK〜”という文字列が出現すれば大丈夫だ。
4-1-5.Shellを終了
パスワードの設定が完了したので、Shellを終了しよう。
接続を終了するコマンド「quit」を入力して「Enter」キーを押すと、MariaDBからログアウトする。
最後に、Shellを終了させるコマンド「exit」を入力して「Enter」キーを押すとウィンドウが閉じる。
4-2.phpMyAdminの認証設定を行う
先ほどは「MariaDB(MySQL)のrootユーザのパスワードを設定した。
ここで「XAMPP コントロールパネル」を開いて、”MySQL”の「Admin」ボタンをクリックしてphpMyAdminにログインできるか確認してみよう。
すると前回とは違い、以下の様なエラーメッセージが出現するはずだ。
一方、Shellによる設定を行う前は、以下の様な画面が開いていたはずだ。
phpMyAdminは、ログイン情報を設定ファイルから読み込む仕様になっているので、このファイルの設定を変更する必要がある。これからその設定方法をお伝えする。
4-2-1.XAMPPの稼働を停止させる
ここからはローカルファイルの編集を行うので、XAMPPの稼働を一旦停止させよう。
必ず「Apache」と「MariaDB(MySQL)」の「Stop」ボタンを押して、サービスの停止を行なった後、「Quit」ボタンを押してXAMPPを終了させよう。
XAMPP終了後、ローカルファイルの変更を行なっていく。
4-2-2.phpMyAdminの設定ファイル「config.inc.php」の編集
先ほど「XAMPP」を「C:\xampp」にインストールしていたはずなので、設定ファイルのパスは「C:\xampp\phpMyAdmin\config.inc.php」となる。このファイルを”メモ帳”で開いてみよう。
※編集前にファイルのバックアップを取ることをお薦めする。
ファイルの中身を見ると、以下の様に「$cfg〜」から始まる項目が5つ存在する。
この5つの項目のうち、上の画像で赤枠で囲った上2つの項目を以下の様に変更し、保存しよう。
・一番上の”config”→”cookie”に変更
・次の”root”は削除
1項目目を”config”に設定する事で、phpMYadminにアクセス時、ユーザーとパスワードを入力する認証画面を表示させる事ができる。
4-2-3.設定ファイルの変更反映を確認
ファイルの更新が終わったら、再び「XAMPP コントロールパネル」を起動しよう。「Apache」と「MySQL（実際はMariaDB）」のStartボタンを押して、「Apache」と「MySQL（実際はMariaDB）」を起動する。
“MySQL”の「Admin」ボタンをクリックしてphpMyAdminにログインできるか確認してみよう。
すると、以下の様なログイン画面が出るはずだ。
ログインの認証画面が表示されずエラーになるという場合は、ブラウザの履歴やキャッシュの削除を実施後、再度ページ読み込みを行おう。
ユーザー名に「root」を、パスワードに「先ほど設定したパスワード」を入力後、「実行」をクリックすると先ほど確認したphpMYadminの画面が表示されるはずだ。
長くなったがこれにて無事、パスワードおよびphpMyAdminのログイン認証の設定は完了だ。
5.データベースを作成する
セキュリティの設定が完了したら、WordPressのインストールに先立ち、データベースを作成しておく。
先ほど開いたphpMYadminの「データベース」タブをクリックしよう。
任意のデータベース名を入力して、「作成」をクリックする。
データベース名はわかりやすい任意の英数字を入力しよう。ここでは「wp-01」というデータベースを作成した。
WordPress の日本公式サイトにあるデータベース・キャラクタセットを参考にすると分かるが、照合順序は、「utf8_general_ci」を選択しよう。
次の通り「データベースを作成しました。」と表示されたら成功だ。
6.WordPressをXAMPPにインストールする
さて、いよいよWordPressのインストールを行おう。
ここから XAMPP で作ったローカル環境に WordPress をインストールする。インストールは次の２つの手順で完了する。
WordPress をダウンロードする
WordPress の初期設定をする
WordPress の特長の１つにインストールが簡単というのがある。安心してほしい。
6-1.WordPress をダウンロードする
WordPress の日本語公式サイトにアクセスし、右上の「WordPressを入手する」をクリック。
画面が遷移するので「WordPressをダウンロード」をクリックしよう。
下図のダイアログが表示されるので、ソフトをダウンロードするために「ファイルを保存する」を選択して、「OK」をクリックし、ファイルを保存しよう。
ダウンロードが完了したら、ファイルをダブルクリックして解凍を行おう。
次の図の通り、解凍した WordPress データの「wordpress」フォルダーをコピーして保存する。データの保存先は、「 C:¥xampp¥htdocs 」直下となるので気をつけよう。
コピーが完了したら、WordPress のトップページにアクセスする。（※ アドレスは「http://localhost/wordpress/」となる）
※ WordPress にアクセスする前に Apache と MySQL を「Start」ボタンをクリックして起動しておこう。
6-2．WordPress の初期設定をする
WordPress のトップページにアクセスすると次の設定画面が表示される。
「wp-config.php ファイルが見つかりません。」とあるが、これから設定すると自動で作られるので心配ない。 wp-config.php とは、データベースにアクセスするための情報とログイン情報が入ったファイルのことだ。
次の画面に移ったら「さあ、始めましょう！」をクリックしよう。
下図の画面でデータベースにアクセスする情報を設定することができる。
データベース名は、「データベースの作成」で作成した「wp-01」を入力する。ユーザー名とパスワードには、セキュリティで設定を行った phpMyAdmin にログインするユーザー名とパスワードを入力しよう。
ホスト名は、「localhost」でよい。「テーブル接頭辞」は、１つのデータベースに複数の WordPress をインストールする時に必要なものだ。しかし、ここでは１つのサイトがあれば十分なので、デフォルトの「wp_」のままで良い。
入力が完了したら「送信」をクリックしよう。 続いて次の画面が表示されたら「インストール実行」をクリックする。
ここから、いよいよ WordPress のインストールが始まる。
「必要情報」で入力した内容が、WordPress のサイト名、また管理画面にログインする情報となる。
図の通りすべて入力しよう。入力が完了したら「WordPress をインストール」をクリックする。「成功しました！」と画面が表示されたら「ログイン」できるか確認しよう。
先ほど入力した情報を図の通り入れて「ログイン」をクリックする。
下図の通り管理画面が表示される。続いて実際に表示されるブログサイトを確認しよう。
上部にあるナビゲーションを「[ブログサイト名] → サイトを表示」の順にクリックする。
図の通りサイトが表示されたら問題ない。 WordPress のインストールは成功だ。
おわりに
ここまでたどり着いたあなたへ。
お疲れ様だ。少し長かったが、この記事の手順に沿う事でローカルでのWordPressの起動が確認できただろう。
環境構築を無事終えたら、一休みして早速作業に取り掛かろう。
この記事が、悩んでいたあなたの助けになる事ができたならば本望だ。
