ローカルで動くWordpress環境を作ってみた

#はじめに

最近の流行りであるWordpressを使ってみたい。
だけど、そのためにサーバーを契約するのはちょっと... という方向けの記事になります。

と思って色々調べてみたところ、ローカルでも動かせる環境を構築できることがわかったので書いていきます。

#環境
今回使うのはmac book Pro
OSバージョンは以下の通り
<img width="698" alt="スクリーンショット 2019-04-11 10.30.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/e16e96e1-ed99-4371-05e1-afd82dc28f57.png">

#Wordpressをmacのローカル環境で動かすために

【1】アプリをゲットする
今回使うLocalは以下のリンクから手に入る。
Local by Flywheel | Local WordPress development made simple
https://local.getflywheel.com/

【2】Free download!をクリック
![スクリーンショット 2019-04-11 10.32.23.png](https://qiita-image-store.s3.amazonaws.com/0/343721/9d149b5d-b315-b4e6-922a-5bb6cec3a453.png)

【３】必要事項を記入する

Mac or Windows: OSを選択【必須】
First Name: 名前
Last name: 苗字
Work Email: メールアドレス【必須】
Company Name: 会社名
Phone Number: 電話番号
Number of websites: サイト数【必須】

![スクリーンショット 2019-04-11 10.34.41.png](https://qiita-image-store.s3.amazonaws.com/0/343721/a98f62a8-e6d4-17a2-ddc8-832288386e34.png)


記入が終わったら、Get it now!　をクリックすると、ダウンロードが開始されます。

【4】Local by Flywheel.appの起動
ダウンロードが終わったら解凍してLocal by Flywheel.app
をアプリケーションフォルダに移動してください。

移動が終わりましたら、Local by Flywheel.appをダブルクリックして起動させます。
<img width="614" alt="スクリーンショット 2019-04-11 10.47.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/dbff7546-6f7f-5a79-8284-251424315fb9.png">
こんなポップアップが出てきますが、「開く」を押下しましょう。

<img width="1312" alt="スクリーンショット 2019-04-11 10.48.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/ecb6b492-0357-07c8-5763-425bf98d63c8.png">

<img width="1312" alt="スクリーンショット 2019-04-11 10.49.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/c189c39a-b2ae-3c6f-68ce-4e822d633eca.png">

+CREATE A NEW SITEをクリックしてサイトを作ります。

<p>サイトの名前を入れます</p>
<img width="1312" alt="スクリーンショット 2019-04-11 10.50.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/65227fd8-3039-7ef6-7b48-d26492d45f26.png">


<p>環境を選びます</p>
<img width="1312" alt="スクリーンショット 2019-04-11 10.50.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/5e9d2d81-92bd-9a21-b675-583820950db3.png">
Prefrredはお任せです。初心者はこちらを選ぶといいでしょう。

<img width="1312" alt="スクリーンショット 2019-04-11 10.50.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/43e06be0-e9ce-4c78-a84b-9ac05cabb5e0.png">
CustomはPHPのバージョン、WEBサーバー、MySQLバージョンを選択できるので、受注した案件によって変えることができます。
ある程度慣れてきたら、こちらを選択してみましょう。


<p>WordPressの設定</p>
<img width="1312" alt="スクリーンショット 2019-04-11 10.53.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/c8dacaa1-6ad5-7fae-57b4-b932304c52eb.png">


WordPress Username,WordPress Password,WordPress Email
を入れていきましょう

おわったら、Add Siteを押下しましょう。

サイトを作っています。
<img width="1312" alt="スクリーンショット 2019-04-11 10.55.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/e888a1ab-e65f-1300-54d7-b81a864e9064.png">
<img width="1312" alt="スクリーンショット 2019-04-11 10.56.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/b3a27995-cc8c-2b88-a61e-f023ff2d2845.png">

<p>管理画面をみてみる</p>

<img width="1312" alt="スクリーンショット 2019-04-11 11.05.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/9915a901-a32c-43dd-ca9e-f02db2ecd858.png">

ADMINをクリックして管理画面に遷移します。
するとこのような画面が出てきますので上で決めた
![スクリーンショット 2019-04-11 11.06.39.png](https://qiita-image-store.s3.amazonaws.com/0/343721/520c737e-28d7-8e40-edcf-48bc52d048d2.png)
Username、Paswordを入力して、Log inを押下します。

![スクリーンショット 2019-04-11 11.10.17.png](https://qiita-image-store.s3.amazonaws.com/0/343721/5d757c8e-0dab-3990-7581-92d74d425ebd.png)
するとこのような画面になったと思います。

これでもいいと思うのですが、やはり日本語にしましょう。

ってことで早速設定を変更していきます。
「言語設定」は、Setting - General - Site Language
![スクリーンショット 2019-04-11 11.14.20.png](https://qiita-image-store.s3.amazonaws.com/0/343721/68fc8648-f880-dc6d-e25f-8c7fedc7a6fa.png)

から設定できます。
この中をみてみると、日本語という文字がありません。
![スクリーンショット 2019-04-11 11.15.33.png](https://qiita-image-store.s3.amazonaws.com/0/343721/cc40d81d-957f-1225-c961-22c4464ec671.png)

写真にはありますがwww

https://ja.wordpress.org/about-wp-ja/
このサイトによるとどうやらWordPress5以降では日本語を設定するためにプラグインをインストールする必要があるみたいです。

WP MULTIBYTE PATCH

上記をコピーしてPlugins - Add newを選択し、検索ボックスに先ほどコピーした
WP MULTIBYTE PATCH　を入力してEnterを押下します。
![スクリーンショット 2019-04-11 11.24.21.png](https://qiita-image-store.s3.amazonaws.com/0/343721/f73e1d02-4715-1f24-ce45-6f9bc79a5cd5.png)


検索結果に出てきた赤枠で囲った WP MULTIBYTE PATCHのINstallを押下してInstallします。

終わりましたら、再度、言語設定をしていきたいと思います。
「言語設定」は、Setting - General - Site Language
![スクリーンショット 2019-04-11 11.14.20.png](https://qiita-image-store.s3.amazonaws.com/0/343721/68fc8648-f880-dc6d-e25f-8c7fedc7a6fa.png)

から設定できます。
この中をみてみると、日本語という文字がありました。
![スクリーンショット 2019-04-11 11.15.33.png](https://qiita-image-store.s3.amazonaws.com/0/343721/cc40d81d-957f-1225-c961-22c4464ec671.png)

![スクリーンショット 2019-04-11 11.27.38.png](https://qiita-image-store.s3.amazonaws.com/0/343721/d6eac65d-5eb4-a3cc-8311-9bb6fcd2f993.png)

Site Language　を日本語にした後で、Save Changesを選択すると、
![スクリーンショット 2019-04-11 11.29.02.png](https://qiita-image-store.s3.amazonaws.com/0/343721/568512ef-3677-612a-dc4a-0a4e12b5c476.png)
日本語になっていることを確認できましたね。

<p>ページをみてみる</p>
管理画面からは
![スクリーンショット 2019-04-11 11.50.12.png](https://qiita-image-store.s3.amazonaws.com/0/343721/6d78b0f7-8aae-7f08-6502-e900ea908f30.png)


Local Siteからは

<img width="1312" alt="スクリーンショット 2019-04-11 11.49.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/79bbf46f-2a0c-dc15-ee74-2f805ac09f55.png">
それぞれ赤枠で囲った部分を選択すると、このようなページに遷移できます。
![スクリーンショット 2019-04-11 11.51.34.png](https://qiita-image-store.s3.amazonaws.com/0/343721/d68543a0-7789-cd20-da90-0e8a9e54ef2e.png)

#WordPress案件を受注したんだけど、お客さんにいちいち見せに行くの面倒臭い
そんなあなたに朗報です。Local Siteでは１時的なアドレスを発行して、先方と画面を共有する方法が用意されています。
早速見ていきましょう。

<img width="1312" alt="スクリーンショット 2019-04-11 11.54.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/1552b151-cfad-28ca-947b-df40e8ebcc66.png">

赤枠で囲った部分のLive Linkが画面を共有するためのアドレスになります。
ENABLEを押下すると
<img width="1312" alt="スクリーンショット 2019-04-11 11.56.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/4e2b58a4-bde5-2be4-01ef-0b238aeb1953.png">


アドレスが発行されますので、そちらのリンクを押下すると
![スクリーンショット 2019-04-11 11.58.40.png](https://qiita-image-store.s3.amazonaws.com/0/343721/c98edcfa-aaa7-2207-e549-166f047dfd8f.png)

先ほど見たページをみることができました。
これならば、案件を受注した際に、先方とわざわざ打ち合わせに品川あたりまで行く必要は無くなりますねwww

# 最後に
作成したサイトを閉じる時、寝るときや、長時間離席する際には、ブラウザを閉じるだけではいけません。
<img width="1312" alt="スクリーンショット 2019-04-11 12.01.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/343721/70cb12b5-e02e-f474-ea61-151fad6f28d2.png">
必ずSTOP SITEを押下してください。
出ないバックフラウンドで動き続け、排熱、電気代がすごいことになります((((；ﾟДﾟ)))))))


では、また