WordPressをXAMPPのローカル環境にインストールしてみます

## WordPressをlocal開発環境を作ろう

自身のPC上でWordPressを動作させる方法としてlocal開発環境で動作させる方法があります。そこで、今回はXAMPP(ザンプ)を使用のもとに、local開発環境の構築手順にいて解説していきます。※なお、XAMPPについては、既にインストール済であることを前提に解説していきます。

### ローカル環境環境とは
ローカル開発環境とは、自身のPC上のみで動作する仮想環境のことを呼び、サーバーと同じ機能を自身のPC上に再現することで、Web上に公開されているサイト(本番環境)にアップする前に正しく動作するか等の検証を行うことができます。

実務においては「ローカル開発環境⇒本番環境」の順番に作業をしていくことが一般的な手法でもあり、プログラマーにとってlocal開発環境の導入必須とも言えるべき存在です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/efb87e99-fe0c-3e78-a65d-185f7c1144ee.png)


### XAMPPにWordPress用のデータベースを作成
※XAMPPのインストールはGoogleで検索できるため割愛させて頂きます・・・

### XAMPPにWordPressのデータベースを作成します。

- XAMPPにを起動させて、phpMyAdminを開きます。
「データベース」タブをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/8e7cc59d-5d9e-ae43-2497-bf3b88cc948a.png)

- 「データベース名」と「文字セット」を選択して作成ボタンを押下します。
※今回はwp-volunteerというデータべース名で作成して、utf8_general_ciを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/43d35a93-381e-59ce-b744-f30d36ead70e.png)


- データベース名が表示されていることを確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/9a500ca9-87c9-f8ea-b04e-9e5cad4fa95b.png)


### WordPressインストール
- WordPressをダウンロード
WordPressのサイトより本体ファイルをダウンロードします。
https://ja.wordpress.org/download/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/51529b05-6ddd-d2f4-6366-4170fa84375e.png)

- WordPressを解凍
zipファイルを選択して解凍します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/432e55b5-821c-97eb-0751-cdd77db1c9b9.png)
すると次のようなWordPressのファイル一式が取得できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/c0bfd279-2e36-3942-5ab0-432cdbfc21c2.png)

- WordPressをXAMPP内に設置
取得したWordpressのファイル一式をXAMPP内に設置します。
インストールしたXAMPPに含まれている「htdocs」というフォルダは以下に、解答したWordPressのフォルダを移動させます。
例）フォルダの移動先
C:\xampp\htdocs\wordpress
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/51447a2d-5fb6-9f2b-6759-ddbc6d78f743.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/c6cfec23-84e6-26c3-4734-83e12ccbfe41.png)

### XAMPPにWordPressをインストール
- フォルダ名を変更
先程、C:\xampp\htdocs\wordpressに移動した、wordpressフォルダを、分かりやすくするためデータベース名と同じ「wp-volunteer」に名前を変更します。この名前がドメイン名となり、http://localhost/wp-volunteerでアクセスできるようになります。

- WordPressのトップページにアクセスします。
http://localhost/wp-volunteer にアクセスすると、以下のようにインストールのセットアップが表示されますので、「さあ、始めましょう！」ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/c0a4ef31-adc7-da62-6340-763015ca1fbe.png)

- データベースのセットアップ
以下を参考にして入力して、「送信」ボタンを押下します。
データベース名：先ほど作成したデータベース名
ユーザー名：デフォルトのrootで構いません
パスワード：未入力として構いません
データベースのホスト名：localhost
テーブル接頭辞：デフォルトのwp_で構いません
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/3e339bd3-e0b0-4e4d-cf43-3ab2051212ff.png)

- インストール実行
「インストール」ボタンを押下して、インストール実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/e4cd2958-62d0-a32d-0463-49db53d78994.png)

### WordPressセットアップ
WordPressのセットアップを行います。
- 必要情報を入力
各情報を入力してください。
なお、「検索エンジンでの表示」はGoogle検索された時にページをヒットしてもらえるようにするかどうかになります。
これらの入力した内容はインストール後、WordPress管理画面から変更ができますので、あまり深く考えずに入力して構いません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/7f23229d-b0a9-b55c-6683-69e1f7ea3d70.png)

- WordPressセットアップ
「WordPressをインストール」ボタンを押下して、セットアップを完了させます。

- WordPressのインストールが成功すると、「成功しました！」と表示されますので、ログイン をクリックしてログイン画面に移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/32802612-41bf-8663-181f-35e6e0c8c3ab.png)

- 先程、WordPressのセットアップで入力した、「ユーザー名またはメールアドレス」と「パスワード」を入力して、「ログイン」ボタンを押下して、管理画面にログインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/feacde72-c2ff-b526-783e-8e1c538582a4.png)

- WordPress管理画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/503dbd26-e3e2-7bd7-aae8-814d90153141.png)

- サイト画面に移動するには、左上にあるサイト名(ブログサイト)をクリックか、URLを http://localhost/wp-volunteer/
と直接入力しアクセスしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2854030/33567370-a010-491f-8805-e9a2d2e4f9b2.png)