Wordpressの開発環境構築(windows+MAMP)


MAMPという
　Webサーバ(Apache or Nginx)と
　データベース(MySql)と
　PHP
をセットで環境構築してくれるツールを使って「Wordpress」の開発環境を構築します。

# MAMPのインストール


## MAMPの公式サイトを表示します

https://www.mamp.info/en/windows/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/bf0037b0-8015-0132-bd79-9d114001228d.png)


## Free DoownloadボタンからWindows用のインストーラーをダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/30886a3b-29a1-4a1e-61d3-b8bf54ce5d25.png)



## インストールしていきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/b9ad5f88-6d77-8f69-4a5f-4163efb932f8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/afafbe37-68ea-d29e-3e42-c02f929a2976.png)
※MAMP PROは有償版だそうです。今回はチェックOFFしておきます
※Install Apple Bonjour は、iPhoneからアクセスする際などに使うそうです。今回はチェックOFFしておきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/04c288fe-7a12-a2a8-e775-a6522c361d08.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/26ad594b-d8ef-b69a-c7ad-662e4dee464f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/5568ce1d-68fe-fc9c-8aef-4b4bd4e351be.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/1db277da-cb79-ef30-ed20-f64312d180ac.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/8348054a-4e85-6988-a8fb-18bf83e08507.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/243afee1-690c-1c21-d132-7b042088a4c9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/92aed1d3-200f-f75b-c827-e03b9f211771.png)

これでインストール完了です。

## MAMPを起動する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/cd0bf459-e34e-3e2c-47fa-2bd173702730.png)
※Apache Serverと MySQL Serverに印がつくまで待ちます。

## Open WebStart page をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/814529b2-31b1-76f3-92a0-6bce311bdf3b.png)

Webサーバが起動していることが確認できました。

# Wordpressのセットアップ

## Wordpressのサイトへいく

https://ja.wordpress.org/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/1c81504e-8b74-0802-ba27-8840fb1d869d.png)

下へスクロールしていくと「WordPressを入手」ボタンがある

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/6946b15f-d1b7-97a7-3484-ada5235efcfb.png)


最新版を入手する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/10541557-1a47-5760-c16c-11c4b124a1a2.png)

## 圧縮ファイルの中身をMAMPのフォルダへコピーする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/f6067e79-31c9-6e20-c532-ee4e8a189e5c.png)

C:\MAMP\htdocs\ へコピーする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/264bb4c1-135b-b437-7b2f-a52c8b2e37e2.png)

フォルダ名を変更する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/9a8e4f98-bf7f-e2db-cf07-cfe1dcecf896.png)

## ブラウザでアクセスする

「http://localhost/test」にアクセスする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/36c80e60-fe51-77db-141d-78a46a9a3d5a.png)

「さあ、始めましょう！」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/d38eef2a-2a98-b3c1-2cc1-bbc7206f43b5.png)

## 別Windowでデータベースを作成する

MAMPのページでTOOLSのPHPMADMINを選ぶ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/e19460bb-397d-994c-1180-8d50b45ac558.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/6a75bd8d-e0bf-8f5e-ca0e-a39abe2c93d9.png)

「New」を押す

データベース名を「wordpress_test」とする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/ad6e9fab-b9ca-9b22-2933-8f8dd3658d98.png)

「Create」ボタンを押す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/c4ff35c3-7fd2-157b-7fe0-10ae33d40bfc.png)


## WordPressのセットアップ画面に戻る

データベース名は「wordpress_test」
ユーザ名とパスワードは「root」
　→MAMPで環境構築した場合はroot、別の方法でMySQLのセットアップした場合は違う可能性あり。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/65c6a64f-c8a7-b4cd-5a2f-7e70a8e0c43e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/0682bbba-aa16-b312-aff6-0b74d6947cf2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/2f2a88b0-0edb-27ad-2a20-b79578710c88.png)

※タイトル、ユーザ名、パスワード、メールアドレスをそれぞれ入力する
※最後の「検索エンジンでの表示」はMAMPでの開発環境ではチェックON。本番環境ではチェックOFFとします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/1aa79443-d6d6-35e2-9f31-04993123fdd6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/2c0e0f5b-1a70-6faa-dfa1-bef33c11d4c3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/5e395255-d58b-8b4c-63c9-5cea4cce9de0.png)

これで、WordPressのセットアップは完了です。