WordPress のローカル開発環境を簡単に構築する全手順（Mac版）

# 概要
WordPress (以降、WP) のローカル開発環境を簡単に構築する際の手順の備忘録。

Web ページの管理サイトから直接テーマの「独自カスタマイズ」を行うと、実際に公開されているページを編集することになり、誤った状態で保存し「サイトが見れない」「動作がおかしい」などの支障が出てしまう可能性がある。

なので、スタイル/テーマのカスタマイズを行う可能性がある場合には、ローカル開発環境が必要になる。そのための手順を以降に記載する。

今回は、「Local (by flywheel)」というツールを利用する。

## Local (by flywheel) とは
「[Local (by flywheel)](https://localbyflywheel.com/)」は WP のローカル開発環境を簡単に構築できるデスクトップ ネイティブ ツール。
<img width="1440" alt="WPローカル環境_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/32453f43-d27b-2b3f-196a-5177a8e93441.png">

公式サイトからインストールして利用すれば、個人 PC 内に「Webサーバ」「PHP」「DB」の構築を自動で行ってくれて、更に、WordPress 管理ツールのインストールやサイトビュー機能も提供してくれる、便利な開発支援ツール。

# 前提
ローカル開発環境は以下

- OS: MacOSX

# 導入手順
以下の手順で導入できる。

## ダウンロード
[Local (by flywheel) の公式サイト](https://localbyflywheel.com/) にアクセス。
右上の「DOWNLOAD」ボタンをクリック。
対象のローカル環境を選択（今回は Mac で開発するので、Mac を選択)
<img width="1440" alt="WPローカル環境_02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/d3486a61-c654-a972-c6a2-18f210a84e48.png">

個人情報の入力（First Name、Last Name、Work Mail、Phone Number）を求められるが、ツール自体がβ版だし、ダウンロードさえできれば良いので、営業メールを回避したければ存在しないテキトーなメアドを打ち込んで「GET IT NOW!」ボタンを押下。すると、ダウンロード開始する。
<img width="1440" alt="WPローカル環境_04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/074f18c9-6be1-7f64-4e62-b8596871de77.png">

## インストール
「local-{バージョン名}-mac.dmg」をダブルクリックしてインストールする。
<img width="631" alt="WPローカル環境_06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/e273f6f8-04ad-bf53-42af-c1775f594153.png">

インストールは、開いたウィンドウでアプリを指定のフォルダにそのまま移動すればOK。
<img width="652" alt="WPローカル環境_07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/7e9f29f6-5576-9cde-797a-938749f690df.png">

インストール完了したら、アプリ一覧から「Local」を選んで起動。
（起動の際、開発元が不明で大丈夫か確認される場合があるが、そのまま「開く」を押せばOK）
<img width="1323" alt="WPローカル環境_08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/d4e0c0df-f160-92db-8a51-f9895aa33830.png">

アプリ起動でエラー報告をしていいか聞かれるがどちらでも良い（私は「No」にした）
<img width="1312" alt="WPローカル環境_09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/beadebe3-dfd0-90dd-5c1b-3ac8e781f245.png">

以下の画面までくれば導入は導入は完了。
<img width="1312" alt="WPローカル環境_10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/fb8f90d8-f487-9183-e0be-df8a775bf0eb.png">

# 初期設定手順
以下の手順で初期設定を行う

## Web サイト生成
先ほどのツール画面の「CREATE A NEW PAGE」ボタンを押下。

### サイト名入力
任意のサイト名を入力して「CONTINUE」ボタンを押下。（オプションは特にいじる必要なし）
![WPローカル開発_03_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/4e8a8362-8842-19e8-b413-0beab097d2aa.png)

### アカウント入力
ローカルに構築する WP の任意のアカウントを入力して「CONTINUE」ボタンを押下。
（アカウント情報は忘れないように注意。メモなどに残しておくこと）
<img width="1312" alt="WPローカル開発_04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/d05e3a1f-a340-2c83-995c-868cd894d348.png">

その後、ダウンロードやインストールなどの構築作業が始まる（要インターネット環境）
<img width="1312" alt="WPローカル開発_05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/525113e2-f4da-9167-81ce-d194c7922a9a.png">

下記の画面になれば、無事に初期設定完了。
<img width="1312" alt="WPローカル開発_06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/8767678e-0a21-b55b-1343-ca0240dc6494.png">

# おまけ： 管理画面を日本語にしておく
ローカルに WP が構築できたので、Local アプリを起動してアプリケーションが起動状態である限り、Web 操作時と同様、Web ブラウザから管理画面にアクセスできる。
管理画面がデフォルトでは英語になっているはずなので、日本語標準に設定をしておく。

下記の「ADMIN」が管理ページへのリンクボタン、「VIEW SITE」は現在のサイトをプレビューするためのリンクボタン。
まず、「ADMIN」を押下してローカルの管理ページへアクセスする。
<img width="1312" alt="WPローカル開発_06_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/5d37b7d9-99dd-1a8b-f3f1-7c96b77301da.png">

初期設定時に入力したアカウントを入力するとログインできる。
<img width="1440" alt="WPローカル開発_07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/ffb9dbe1-2021-37b9-ee6b-fd0f320c7225.png">

ログインしたら、「Setting」の「General」をクリック。
<img width="1440" alt="WPローカル開発_08_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/238977f8-a700-0d56-f718-e0ddb6616928.png">

画面遷移したら下部にある、Site Language で、言語設定を「日本語」に変更する。
（日本語は、Italiano とかの近く、真ん中らへんにある）
<img width="1440" alt="WPローカル開発_10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/d9b1be8e-aee8-157d-a9fb-706c0d1dba75.png">

画面最下部の「Save Changes」で保存・更新して日本語化は完了。
<img width="1091" alt="WPローカル開発_12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/e700c14e-b0f6-6fc2-785a-d742c95c9d82.png">