【XAMPPのインストール方法と使い方】ローカル環境でwordpressを開発するための初期設定をわかりやすく解説

ご確認ください
こちらはWindows向けのローカル環境「XAMPP」の使い方について解説しています。
Macをお使いの方は「MAMP」の解説記事をご覧ください。
「MAMP」の使い方の記事はこちら

こんにちは!くまぺです。

今回はWordPressをWindowsのローカル環境で開発するためのソフト「XAMPP」の使い方について解説します。
インストール方法から初期設定まで、画像を交えて詳しくご紹介します。

↓「なぜローカル環境を使うのか?」についてはこちらをご覧ください↓
なぜローカル環境でwordpressを開発する必要があるのか

XAMPPのインストール方法

まず初めに、XAMPPのインストール方法について解説します。

  1. XAMPPのダウンロード
  2. XAMPPのインストール

の順に解説します。

XAMPPのダウンロード

まずはXAMPPの公式サイトから、XAMPPをダウンロードしましょう。

上記画像の赤枠部分、「Windows向け XAMPP」をクリックするとダウンロードが始まります。

ダウンロードが完了したら、”xampp-win32-1.8.3-3-VC11-installer.exe”を実行しましょう。
Google Chromeをお使いの方は下記画像の赤枠部分をクリックして実行できます。

その他ブラウザをお使いの方は
[エクスプローラー] → [ダウンロード] に”xampp-win32-1.8.3-3-VC11-installer.exe”がダウンロードされているのでダブルクリックで実行しましょう。

XAMPPのインストール

インストーラを実行すると、このような画面が表示されます。

「ウイルス対策ソフト入ってると遅くなったりするかもしれないけどXAMPPのインストール続ける?」みたいな感じです。
ウイルス対策ソフトが入っていてもほとんどの場合問題ありませんので、「Yes」をクリックします。


「ちゃんと動かなくなっちゃうからC:¥Program Files (x86)とかにインストールするのはやめてね!」みたいな感じです。
これは初期設定通りにインストールすれば問題ありません。
「OK」をクリックしましょう。


セットアップウィザードが開始します。
「Next」をクリックして次に進みましょう。


この画面ではインストールするコンポーネントを選択できます。
初期設定のままで特に問題ありません。
もし不要なものがあればチェックを外しましょう。
「Next」をクリックして進みましょう。


次に、インストール先のフォルダを指定できる画面に移ります。
インストール先のフォルダはそのままでOKです。

注意点
※インストール先に1GB程の容量を確保しておきましょう。
※別の場所を指定する場合はC:¥Program Files (x86)などのプログラム管理フォルダは避けてください。正しく動作しない恐れがあります。

「Next」をクリックして次に進みましょう。


「Bitnamiっていう便利なやつがあるよ!」っていう説明です。
チェックを入れておくとBitnamiのサイトが開きます。
チェックはどちらでも大丈夫ですが、こちらは後でも利用できるのでチェックを外しましょう。


「インストールの準備できたよ!」という画面になります。
「Next」をクリックしてインストールを開始しましょう。


インストールが始まります。割と時間がかかる(5〜15分)ので気長に待ちましょう。


インストールが完了するとこのような画面になります。
このままXAMPPを使う場合はチェックを入れたままにしておきましょう。

「Finish」を押してインストール完了です。
お疲れ様でした。

このままXAMPPを起動し、初期設定を行いましょう。

XAMPPの初期設定

それでは、XAMPPの初期設定をしていきましょう。

  1. ApacheとMySQLの起動
  2. phpMyAdminのパスワードの設定
  3. データベースの作成
  4. WordPressのダウンロード
  5. WordPressのインストール

の順に解説します。

ApacheとMySQLの起動

XAMPPが起動すると、まず言語を選択する画面が出ます。

英語かドイツ語しかないので、英語にチェックが入っていることを確認して「Save」をクリックします。

言語を選んだら、XAMPPのコントロールパネルが表示されます。

ボタンがたくさんありますが、よく使うのは「Actions」の「Start」や、その隣の「Admin」くらいです。

まずは、ApacheとMySQLを起動しましょう。

「Apache」列の「Start」をクリックしましょう。
次に、「MySQL」列の「Start」もクリックします。

両方起動したら、下の画像のように、「Module」欄の「Apache」と「MySQL」が緑色になり、「PID(s)」、「Port(s)」欄に数字が表示されます。

ApacheとMySQLが両方起動できたら、Apache列の「Admin」をクリックします。

すると、ブラウザが立ち上がり、下のような画面が表示されます。

ここまでで、XAMPPを起動し、ApacheとMySQLを立ち上げることができました。
普段使うときは、

  1. XAMPPを起動
  2. ApacheとMySQLを起動

は毎回行います。
「Start」を押すだけですが、コントロールパネルの扱いには慣れておきましょう。

さて、次はphpMyAdminのパスワードを設定します。

phpMyAdminのパスワードの設定

ここでは、「データベースのパスワードを設定し、phpMyAdminに認証をかける」
ということを行います。

ここがちょっとややこしいですが、一つ一つ丁寧に進めていきましょう。

phpMyAdminのパスワードの設定は、以下の順に行います。

  1. 環境変数のPathにMySQLを追加する
  2. コマンドプロンプトでパスワードを設定する
  3. config.inc.phpでパスワードを設定する

環境変数のPathにMySQLを追加する

これは、後で「コマンドプロンプト」でMySQLのパスワードを設定するために行います。

まずは「エクスプローラー」を開き、
「PC」を右クリックし、
「プロパティ」をクリックしましょう。

すると、以下のような画面が表示されます。

左にある「システムの詳細設定」をクリックしましょう。

「システムのプロパティ」が表示されたら、「環境変数」をクリックします。

環境変数の一覧が表示されたら、
「Path」を選択(クリック)した後に「編集」をクリックしましょう。

「環境変数名の編集」という画面が表示されるので、右上の「新規」をクリック

ここで新しい環境変数を追加するのですが、「mysql.exe」というMySQLの実行ファイルがある場所を入力します。
XAMPPのインストール場所を変更していなければ大抵「C:¥xampp¥mysql¥bin」にあるので、
「C:¥xampp¥mysql¥bin」と入力し「OK」をクリックしましょう。

先ほどの環境変数一覧の画面に戻るので、「OK」をクリックして閉じます。

「システムのプロパティ」も「OK」をクリックしましょう。

これでMySQlを環境変数のPathに追加することができました!

コマンドプロンプトでMySQLを扱う準備ができたので、phpMyAdminのパスワードを設定していきましょう。

このパスワードは、MySQLとconfig.inc.phpの2箇所に設定する必要があります。

まずはコマンドプロンプトを使ってMySQLのパスワードを設定しましょう。

コマンドプロンプトでパスワードを設定する

まずはコマンドプロンプトを起動します。
画面左下の検索ボックスを使います。

これですね。

ここに「cmd」と入力すると「コマンドプロンプト」が出てくるのでクリックしましょう。

コマンドプロンプトの黒い画面が表示されると思います。
ここが正念場です!
一見難しそうですがそこまで大変ではないので丁寧に進めましょう。

画面に「C:¥Users¥[あなたのユーザ名]>」という文字が出ていると思います。

C:¥Users¥kumape>

みたいな感じですね。
ここに「path」と入力し、エンターを押しましょう。

するとPathが表示され、最後の方に先ほど追加した「C:¥xampp¥mysql¥bin」があることを確認しましょう。

次に、「mysqladmin -u root password」と入力し、エンターを押しましょう。

するとまず「New password: 」と出てくるので、設定したい任意のパスワードを入力し、エンター。
次に確認のため「Confirm new password」と出てくるので、もう一度パスワードを入力し、エンターを押します。

これでMySQLにパスワードが設定できたので、コマンドプロンプトの操作は終わりです!
コマンドプロンプトは閉じて大丈夫ですよ。

次にconfig.inc.phpでパスワードを設定しましょう。

config.inc.phpでパスワードを設定する

なぜconfig.inc.phpでパスワードを設定する必要があるのか?というと、このままだとエラーが出てphpMyAdminにログインできないからです。

こんな風にエラーが出てしまうので、config.inc.phpにもパスワードを設定しましょう。

エクスプローラーを開き、
「PC」→「Windows(C:)」→「xampp」→「phpMyAdmin」を開くと、
「config.inc.php」というファイルがあるので、ワードパッドなどで開きましょう。

開いたら、19行目付近にある
「/* Authenticaion type and info */」から始まる部分を探します。

上記画像の赤線部分、「’config’」と「”」の部分を変更していきます。

「’config’」部分を「’cookie’」に、
「”」部分を先ほどコマンドプロンプトで設定したパスワードに書き換えてください。(例:’fj5jgk35′;)

書き換えたら上書き保存しましょう。

以上でphpMyAdminのパスワードの設定が完了です!

次は、phpMyAdminでwordpressのデータを保存するためのデータベースを作成しましょう。

データベースの作成

XAMPPのコントロールパネルで「Apache」列の「Admin」をクリックし、開いた画面で「phpMyAdmin」をクリックします。

すると、「phpMyAdminへようこそ」というログイン画面が出るので、
ユーザ名に「root」、パスワードに先ほど2箇所で設定したパスワードを入力し、「実行」をクリックします。

下のような画面が表示されたらログイン成功です!

「データベース」をクリックしましょう。

「データベースを作成する」の部分に、
「wp-01」と入力
「utf8_general_ci」を選択
し、「作成」をクリックします。

「データベース wp-01 を作成しました。」と表示され、このような画面になったら作成完了です。

きちんとデータベースwp-01が作成されているか確認しましょう。
左上の「New」をクリックしてください。

するとデータベース一覧が表示され、「wp-01」が追加されていることが確認できます。

以上でデータベースの作成は完了です!

WordPressのダウンロード

お待たせしました、それでは準備が整ったので、いよいよXAMPPでWordPressを使いましょう。

まずはWordPressの公式サイトでWordPressをダウンロードします。

右のほうにある「Wordpress4.8.1をダウンロード」をクリックしてダウンロードします。
(4.8.1の部分はバージョンによって変わります。)

ダウンロードが完了したら、”wordpress-4.8.1-ja.zip”を開きましょう。
Google Chromeをお使いの方は下記画像の赤枠部分をクリックして開けます。

その他ブラウザをお使いの方は
[エクスプローラー] → [ダウンロード] に”wordpress-4.8.1-ja.zip”がダウンロードされているのでダブルクリックで開きましょう。

開くと、「wordpress」というフォルダが入っていると思います。

これを、エクスプローラーを開き、
「PC」→「Windows(C:)」→「xampp」→「htdocs」の中にコピーします。

以上でWordPressのダウンロードが完了です!

それでは、最後にWordPressをインストールしていきましょう。

WordPressのインストール

XAMPPの「Apache」と「MySQL」が起動していることを確認して、
ローカルのWordPressのトップページにアクセスしましょう。

このような画面が表示されるので、「さあ、始めましょう!」をクリック。

データベースの情報を入力する画面に移ります。

「データベース名」には先ほど作成したデータベース名「wp-01」を入力。
「ユーザ名」には「root」、
「パスワード」には設定したMySQLのパスワードを入力。
「データベースのホスト名」と「テーブル接頭辞」はそのままでOKです。

入力したら「送信」をクリックしましょう。

インストール実行画面が表示されるので「インストール実行」をクリック。

次に、サイトの必要情報の入力画面に移ります。

「サイトのタイトル」には好みのサイト名を入力。
「ユーザ名」と「パスワード」には、WordPressにログインするためのユーザ名とパスワードを入力します。

注意
ここで入力したユーザ名とパスワードはWordPressにログインするときに使用するので、忘れないようご注意ください。

「メールアドレス」には自分のメールアドレスを入力。
「検索エンジンでの表示」は、念のため「検索エンジンがサイトをインデックスしないようにする」にチェックを入れます。

入力が完了したら「WordPressをインストール」をクリックしましょう。

インストールに成功すると、以下のように「成功しました!」の画面が表示されます。

「ログイン」ボタンをクリックして、いよいよログイン画面に移りましょう。

WordPressユーザーの方にはおなじみの画面ですね。

ここで、先ほど「必要情報の入力画面」で入力した「ユーザ名」と「パスワード」を入力し、ログインをクリック。

見事ダッシュボードが表示されたら完了です!
お疲れ様でした。

以上で、XAMPPの初期設定〜WordPressのインストールは終了です。

XAMPPの使い方

では、最後に普段XAMPPのローカル環境で開発するときの手順について簡単に説明します。

  1. XAMPPを起動する
  2. XAMPPのコントロールパネルで「Apache」と「MySQL」の「Start」をクリックして起動
  3. ローカルのWordPressのログインページを開く(ブックマークしておくと便利です)
  4. ログインして開発

逆に、XAMPPを終了するときは

  1. WordPressからログアウトする
  2. XAMPPのコントロールパネルで「Apache」と「MySQL」の「Stop」をクリックして停止
  3. XAMPPを閉じて終了

という流れです。
ApacheとMySQLは忘れずに停止させてから終了しましょう。

WordPressのテンプレートファイルを管理したいとき

レンタルサーバーなどでWordPressのテンプレートファイルなどを管理したいときはFTPソフトを使用しましたが、XAMPPの場合はローカルなのでFTPソフトは必要ありません。
「PC」→「Windows(C:)」→「xampp」→「htdocs」→「wordpress」の中にWordPressのファイルが入っているので、それを変更することで反映されます。

おわりに

いかがでしたでしょうか。

ローカル開発環境は、WordPressのカスタマイズをしたいときやプラグインを試したいときなど、様々な場面で役立ちます。

コマンドプロンプトの操作などややこしい部分もありますが、一度設定できればXAMPPを起動して普通のWordPressのように使えます。

ぜひローカル環境を構築して素敵なWordPressライフを送りましょう!

ではでは〜



1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください