Macのローカル環境にMAMPを入れてWordPressを動かすまで


## 実行環境
ローカル環境のMACは以下。
![Kobito.BYRUlu.png](https://qiita-image-store.s3.amazonaws.com/0/17493/a8e16cd9-25c4-ebb8-9ebe-db6ba8595670.png "Kobito.BYRUlu.png")

phpのversionはこちら。

```bash
$ php --version
PHP 5.5.36 (cli) (built: May 29 2016 01:07:06)
Copyright (c) 1997-2015 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2015 Zend Technologies
```

## MAMPのダウンロード
ダウンロードは[公式サイト](https://www.mamp.info/en/downloads/)から

ダウンロードしたらインストーラを起動。以下のようにウィンドウが現れますが、基本的に続けるを連打で大丈夫です。

![スクリーンショット 2016-08-28 13.26.22.png](https://qiita-image-store.s3.amazonaws.com/0/17493/7a498a2d-cb5b-424e-3f7f-5ac3952eb46d.png "スクリーンショット 2016-08-28 13.26.22.png")


インストールが完了したらMAMPを起動してみましょう！
![スクリーンショット 2016-08-28 13.27.43.png](https://qiita-image-store.s3.amazonaws.com/0/17493/714a0b51-327a-f583-b7a2-c6f4d1a1181c.png "スクリーンショット 2016-08-28 13.27.43.png")

上の画面が表示されたら「設定」からWebサーバのポット設定とphpのversion設定を行います。

- Apacheポート: 8888
- Nginxポート : 80
- MySQLポート : 3306
と画像の通りに設定すれば大丈夫です。

![スクリーンショット 2016-08-28 13.28.33.png](https://qiita-image-store.s3.amazonaws.com/0/17493/8081af37-2ba5-b6e2-3004-a0497ef837e1.png "スクリーンショット 2016-08-28 13.28.33.png")

phpのversionは5.6系に設定(いずれは7系で動かしたいですね)

![スクリーンショット 2016-08-28 13.29.03.png](https://qiita-image-store.s3.amazonaws.com/0/17493/eee76350-7031-1081-c5b1-62edebae26c9.png "スクリーンショット 2016-08-28 13.29.03.png")

ここまで設定できたら「サーバを起動」します！
以下の画面が表示できたら起動成功です。


![スクリーンショット 2016-08-28 13.29.37.png](https://qiita-image-store.s3.amazonaws.com/0/17493/de9928cf-b8ee-c6aa-32d6-83c9fc29d39d.png "スクリーンショット 2016-08-28 13.29.37.png")
![スクリーンショット 2016-08-28 13.29.46.png](https://qiita-image-store.s3.amazonaws.com/0/17493/be164362-ba0e-98e3-eb5c-eabb0ace369f.png "スクリーンショット 2016-08-28 13.29.46.png")

あとは、phpが正常に動いているかを確認します。

ドキュメントルートがどこなのかについては、「サーバ設定」の「Webサーバ」上に記載がありますが、基本的には
`/Applications/MAMP/htdocs/`
に設定されているはずです。

ドキュメントルートに以下の`test.php`を設置して[localhost:8888/test.php](localhost:8888/test.php)にアクセスし、以下のページが表示できれば成功です。

```test.php
<?php
echo 'php is working successfully!!';
```

![スクリーンショット 2016-08-28 13.32.47.png](https://qiita-image-store.s3.amazonaws.com/0/17493/d4ff1e8f-96f9-6a96-31e2-36c620f90452.png "スクリーンショット 2016-08-28 13.32.47.png")

##WordPressのインストール
まずはWordPressをダウンロードしましょう→[公式サイト](https://ja.wordpress.org/)

ダウンロードしたzipファイルを解凍し、先ほどのドキュメントルートに展開すればWordPressのインストールは完了です。簡単ですね。
![スクリーンショット 2016-08-28 13.53.15.png](https://qiita-image-store.s3.amazonaws.com/0/17493/9595f5eb-a0d7-0f70-bafb-3816a35a5343.png "スクリーンショット 2016-08-28 13.53.15.png")

あとは、ブログの記事データを保管するデータベースの設定とユーザ名などを設定したら終了です！
まずは、データベースの設定から。

[localhost:8888/phpmyadmin](localhost:8888/phpmyadmin)へアクセス。
以下のページが表示されたらWordPress用にデータベースを作成します。![スクリーンショット 2016-08-28 13.57.16.png](https://qiita-image-store.s3.amazonaws.com/0/17493/c0367cbb-850c-549b-c9cf-ea5c719c488a.png "スクリーンショット 2016-08-28 13.57.16.png")

左のNewボタンからデータベースを作成します。
データベース名を「wpdb」、照合順序を「utf8_general_ci」と設定してデータベースの作成
![Kobito.Tv04rF.png](https://qiita-image-store.s3.amazonaws.com/0/17493/033b21f7-b08f-fe19-541d-c383b7c82137.png "Kobito.Tv04rF.png")


ここまで出来たら[localhost:8888](localhost:8888)へアクセスして「さあ、始めましょう！」のボタンからWordPressのセットアップです！
![スクリーンショット 2016-08-28 14.00.42.png](https://qiita-image-store.s3.amazonaws.com/0/17493/46ce7ae1-d2b9-dbf2-766c-3992559a8275.png "スクリーンショット 2016-08-28 14.00.42.png")

ローカルで動かすので以下のように設定して送信
![Kobito.S6oCbq.png](https://qiita-image-store.s3.amazonaws.com/0/17493/631ab1fa-ae41-56bb-0dcc-80a50b8a61d6.png "Kobito.S6oCbq.png")


最後にこちらを入力して終了！
![Kobito.tp3YrO.png](https://qiita-image-store.s3.amazonaws.com/0/17493/e623aa0a-c8d1-30c0-abf7-fd4e131fc42f.png "Kobito.tp3YrO.png")


以上、ログインを行うとadmin画面へアクセスできるようになります。
お疲れ様でした！
![Kobito.3Im0dU.png](https://qiita-image-store.s3.amazonaws.com/0/17493/2413bb46-465f-5ce3-00a0-e5e488346812.png "Kobito.3Im0dU.png")




### 記事を投稿してみる
dashboardから「投稿」ボタンをクリックすると、現在の投稿記事一覧が確認できます。
![Kobito.4p3Woo.png](https://qiita-image-store.s3.amazonaws.com/0/17493/1e87767d-1b00-b06b-893b-9b3f91b23be7.png "Kobito.4p3Woo.png")

「新規追加」ボタンから新しい記事を投稿できるようになります。
![Kobito.InC1dQ.png](https://qiita-image-store.s3.amazonaws.com/0/17493/edc169b8-5cc2-a919-25e1-cee3e31fb10a.png "Kobito.InC1dQ.png")

### デザインを変更してみる
現在のデザインはデフォルトのままなので変更してみます。
現在のページは[localhost:8888](localhost:8888)で確認できます。

![Kobito.TJmttA.png](https://qiita-image-store.s3.amazonaws.com/0/17493/1c3be7dd-60df-78fc-d4e3-9ec43c373720.png "Kobito.TJmttA.png")

これでも十分綺麗ですが、今回はSEO対策もしっかりされているという[STINGER PLUS](http://wp-fun.com/)に変更してみます。

それではダウンロードしてみましょう[ダウンロードサイト](http://wp-fun.com/dl/)

ダウンロードしたら後はクリックだけで完了です(簡単すぎる…)
まずは、「外観」ページからテーマをインストール。

![Kobito.tGVJC2.png](https://qiita-image-store.s3.amazonaws.com/0/17493/369360d6-9230-54e5-3613-62f7aab96464.png "Kobito.tGVJC2.png")

こちらの「新しいテーマを追加」からダウンロードしたzipファイルを選択してみます。

![Kobito.qbb1wW.png](https://qiita-image-store.s3.amazonaws.com/0/17493/f86b7319-c5db-2e17-80b6-c5061b113953.png "Kobito.qbb1wW.png")

インストールしたら「ライブプレビュー」で確認して「有効化」で適用されます。
![Kobito.c0MgLk.png](https://qiita-image-store.s3.amazonaws.com/0/17493/ad7a3594-47e9-d3aa-842d-b6ab86542e44.png "Kobito.c0MgLk.png")

以上でテーマの変更は終了です！
![Kobito.gulp6c.png](https://qiita-image-store.s3.amazonaws.com/0/17493/9483bef4-942e-a1fd-1baa-75d37bb0dd8e.png "Kobito.gulp6c.png")

お疲れ様でした！