【初心者向け・2017年版】デザイナーがWordPressでサイトを立ち上げるまで - #1.ローカルに環境を作る

# はじめに
私はデザイナーです。普段はもっぱらデザイナーとして会社で働いています。（デザインとコーディングが仕事）
会社だとエンジニアさんが実装してくださるので、こういうことを考えるシーンって少ないとは思います。
でも、こういうサイトを作りたい！とプライベートで感じた時、かなりの壁を感じないでしょうか？（少なくとも自分はすごく感じました。）
もうやってみるしかない！という気持ちで今回は作成することにしました笑
これを見たら、他のデザイナーさんも簡単に作成出来る、そんな記事になればいいなーと思います！
## 念のため、この環境で始めますっていう情報を共有
- パソコン：MacBook Pro 2016（macOS Sierra 10.12.5）
- サーバー：コアサーバー（プランはCore-Mini）

# 1.まずは開発するために必要な準備を。
ローカルサーバーとして有名な、MAMPを導入します。（Windowsの方ならXAMPPが有名ですね！）
ダウンロードはこちらから：https://www.mamp.info/en/downloads/
ダウンロード＆インストールが終わったら、アプリケーションを起動させましょう。
<img width="648" alt="MAMP起動画面" src="https://qiita-image-store.s3.amazonaws.com/0/75705/24bd9a7b-7753-1532-b753-a68f7ec8536a.png">
↑こんな画面が表示されていたらOKです！
<img width="648" alt="スクリーンショット 2017-07-01 18.39.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/75705/9950b9e8-21a5-4552-6148-2a409be1cf8e.png">
先ほどの画面で、**「Preferences」**をクリックして、「PHP」というタブをクリックします。そしたら、PHPのバージョンを選べますので、**「7.0.15」**を選択してください。

```
バージョンが古い方を選ぶ理由ですが、この後に必要なphpMyAdminが7.1.1だと対応していないためです。
```
**「OK」**をクリックして、早速、**「サーバーを起動」**をクリックしてみましょう。
<img width="648" alt="MAMP起動画面 サーバー起動済み" src="https://qiita-image-store.s3.amazonaws.com/0/75705/e060db90-99ad-617a-cac3-a488f968347b.png">
このように、ApatchサーバーとMySQL Serverに緑色のマークが付いたら起動が出来たということです！
同時にブラウザでページが表示されると思います。
![download-1.png](https://qiita-image-store.s3.amazonaws.com/0/75705/2fb1a0c8-f852-4a10-48e7-b2cc7d595337.png)
この画面は表示されましたか？この画面が表示されていたら問題ありません！
![スクリーンショット 2017-07-01 18.47.55.png](https://qiita-image-store.s3.amazonaws.com/0/75705/a4551519-e1d1-827e-3068-587e53893201.png)
では、グローバルナビの**「ツール」**をクリックして、**「phpMyAdmin」**をクリックします。
![download-2.png](https://qiita-image-store.s3.amazonaws.com/0/75705/60ea77d7-316f-4fb4-e4ca-ec8ed199c7ee.png)
そうすると、上の画面が表示されると思います。デザインが悪すぎるので、管理画面のデザインを先に変えてしまいましょう。
![download-3.png](https://qiita-image-store.s3.amazonaws.com/0/75705/bf3addb1-f559-b5b7-1fd9-2bcaf5303d05.png)
外観の設定の中に**「Theme」**という項目があるので、そこを変更しましょう。
![スクリーンショット 2017-07-01 19.28.16.png](https://qiita-image-store.s3.amazonaws.com/0/75705/0fcd3475-d1f3-b2d9-820f-127f0dc92a88.png)
**「pmahomme」**というテーマを選んでください。
![download-4.png](https://qiita-image-store.s3.amazonaws.com/0/75705/07019120-ddc6-3d9b-5b54-2f6e4264c186.png)
すると一気にクールになりました！では、この画面で作業を続けていきましょう。
# 2.データベースを準備する
![download-5.png](https://qiita-image-store.s3.amazonaws.com/0/75705/26c3dac2-cd61-ef7a-e0b8-cf8f40bb5668.png)
まずは**「データベース」**をクリックします。
![download-7.png](https://qiita-image-store.s3.amazonaws.com/0/75705/b8cdd367-f1d0-c446-bf3d-1322d2fe060a.png)
では、左側から。
データベース名は任意で決めてください。（例：wordpressなど）
右側の照合順序は**「utf8_general_ci」**を選んでください。
データベースを作成したら、WordPressをダウンロードしてくる準備はOKです！
# 3.WordPressをダウンロードする
![download-8.png](https://qiita-image-store.s3.amazonaws.com/0/75705/9fe7cc3b-b80f-2eb5-f1c7-9f12d472960d.png)
WordPressのウェブサイトからWordPressの最新版をダウンロードしましょう！
https://ja.wordpress.org/
ダウンロードが出来たら、解凍して、MAMPのhtdocsフォルダに移動しなければいけません。
特に設定していない場合は…htdocsフォルダは`/Applications/MAMP/`にあると思います。そこに解凍したフォルダごと入れましょう。
<img width="575" alt="スクリーンショット 2017-07-01 19.52.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/75705/3ff1eae3-59d6-2f8a-73d6-93b9d8152479.png">
移動できましたか？
移動が出来たら、フォルダを開いてみてください。上の図のようなファイルが並んでいるかと思います。
**「wp-config-sample.php」**というファイルがあるので、まずはファイル名を変更して、**「wp-config.php」**にします。
では、このファイルをテキストエディタなどで開いて、パソコンの中のデータベースと同じものにする必要があります。

```wp-config.php
// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', 'wordpress'); //ここにデータベース名を入れます。先ほど任意で設定したデータベース名です。

/** MySQL データベースのユーザー名 */
define('DB_USER', 'root'); //初期だと「root」で。

/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'root'); //初期だと「root」で。

/** MySQL のホスト名 */
define('DB_HOST', 'localhost'); //特に変更は要らないかと。

/** データベースのテーブルを作成する際のデータベースの文字セット */
define('DB_CHARSET', 'utf8'); //特に変更は要らないかと。

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define('DB_COLLATE', ''); //特に変更は要らないかと。
```
こういう感じで編集してみました。
保存したら、ブラウザを開いて、http://localhost:8888/mysite/wp-admin/install.php
にアクセスしましょう。

![download-9.png](https://qiita-image-store.s3.amazonaws.com/0/75705/7469196b-454b-cfe3-36cd-a13c21265313.png)
上の画像のような画面が表示されましたか？
そしたら無事にデータベースを読み込めたということです！
WordPressの設定に進みましょう。

# 4.WordPressを設定する
まずは、先ほどのようこそ画面に情報を入力しましょう！

```
- サイトのタイトル
- ユーザー名
- パスワード
- メールアドレス
- 検索エンジンでの表示
```
について設定をします。

なんと、これで完了です(笑)
一瞬でしたね！

![download-10.png](https://qiita-image-store.s3.amazonaws.com/0/75705/15119fc4-a3b7-dc4d-b57d-4ca37ac96ccf.png)
では、続いてログイン画面へ。
先ほど設定したユーザー名とパスワードでログインしましょう！

![download-11.png](https://qiita-image-store.s3.amazonaws.com/0/75705/9e125b64-6e74-8fb3-9c2a-da767f1971e9.png)
無事に管理画面を見れました！
左上のWordPressのロゴの横にある、家のマークを押したら、初期の状態のデザインを確認できます。

![download-12.png](https://qiita-image-store.s3.amazonaws.com/0/75705/ffcf7317-9f32-5bd9-51c6-5f6b692394f4.png)
初期の状態でもなかなかオシャレですよね笑

# 今回はここまで！
ここまで出来たら、**「#1.ローカルに環境を作る」**は完了です！
次の投稿では、いよいよWordPressのテーマを作っていきます！次の投稿をお待ち下さい！