Local by FlywheelでWordPressローカル環境を構築してライブプレビュー(PHP,CSSにも対応)

Local by Flywheelは簡単にWordPress環境を構築できるので便利ですが、
PHPやCSSなど、どのファイルを更新しても**ライブプレビュー**で変更を反映してくれたら便利！
と思い、あれこれ調べてみました。
なんとかうまくいったので、メモとして残します。

## Local by Flywheel と WordPressの準備
インストールから設定まで、
こちらのサイトでばっちりご紹介してくださっています！

###[【超簡単】Local by Flywheelを使ってWordPressのローカル環境を構築する](https://and-ha.com/coding/local-wordpress/)
Local by Flywheel と WordPressの設定がまだの方は、
こちらを参考に設定してください。

## Preprosの準備

### なぜPreprosを選んだのか？
Bracketsでライブプレビューする方法は見つけたのですが、
自分はBracketsをインストールしていなかったので、他の方法を探してみました。

すると、Preprosの『Live Reload』について耳寄りな情報を発見！
>Live Reload は、ファイルを監視し、変更があった場合にコンパイルしたファイルを非同期でリロードする機能です。
>僕が使っている『Brackets』というエディターにも似たような機能があるのですが、Brackets と異なり
>
>すべてのブラウザで利用可能
>デベロッパーツールを開いてもライブプレビューが無効化されない
>という特徴があり、個人的には Brackets のライブプレビューよりも使いやすいです。
（https://www.doe.co.jp/hp-tips/software/prepros/ より引用）

これでPreprosでWordPressのローカル環境のライブプレビューもできるのでは？
と思いやってみたらどうにかできました！

（ちなみに、私はよくVScodeのLive Previewを使っているのですが、
これはHTMLでしか使えず、デベロッパーツールを開いていたらライブプレビューが無効になっちゃうんですよね...）

### Preprosのインストール
####[Prepros公式](https://prepros.io/)
ここから無料でダウンロードできます。
「Download Free Unlimited Trial」をクリックすると、
macOS、Windows、Linuxのボタンが出てくるので、該当する物をクリック＆ダウンロードしてください。
（Free Unlimited Trialと書いているので、
　使用していると頻繁に「買ってよ！」とポップアップが出てきます。
　これさえ無視していれば、無料で使い続けられます。
　購入する場合、34ドルの買い切りで購入可能です！ ※21年1月現在）

PreprosはSassのコンパイラとしても便利です。
プロジェクト事にコンパイル方法を選べるので、結構重宝しています。
他にもいろんな機能がついているので、気になる方はこちらの記事をご参照ください。
→ [多機能コンパイラ『Prepros』で快適コーディング](https://www.doe.co.jp/hp-tips/software/prepros/)

## Preprosにライブプレビューの設定をする

### フォルダの場所を特定する
Preprosに設定するフォルダの場所を見つけておきます。
Local by Flywheelで、
該当のサイト → サイトのタイトル下に「~/Local Sites/[サイト名]/ →」をクリック。
すると、MacだとFinderで該当のフォルダが開きます。
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/09e05eae-f8fe-a508-9cfc-a824473759c3.jpeg)
↓
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/46290998-2690-0cb7-92ef-ea709b77c324.jpeg)
Macintosh HD > ユーザー > [ユーザー名] > Local Sites > [サイト名] > app > public の
**publicファイル**をPropresの新規プロジェクトファイルに指定します。

### 新規プロジェクトを作成
新規プロジェクトを作成し、監視するフォルダを設定します。
左下の『+』マークをクリックしてください。
すると、フォルダを選択する画面が出てきますので、
先ほど特定したpublicファイルを指定してください。
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/2b06f116-35a3-239b-55e9-631829c1c26d.jpeg)

### ライブプレビューの設定
#### ライブプレビューに設定するURLを調べる
Local by Flywheelの右上にある「OPEN SITE」をクリックすると、
Local by Flywheelが生成したサイトが表示されます。
このURLをコピペしてください。![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/d1265ffd-fe4f-2067-974c-86afba8af44e.jpeg)

#### Preprosのライブプレビューを設定する
Preprosに戻り、右上の「Setting」をクリック。
すると、いろんなメニューが出てくるので、上から3つ目の「Live Preview」をクリック。
「Custom Server」に以下の設定をしてください。
①「Use Custom Server」にチェック。
②「Server Url」に先ほどLocal by FlywheelでコピーしたURLを入力。
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/e44ced60-6ae8-0232-ea25-cc51f43a98df.jpeg)

#### ライブリロードを有効にする
「Setting」内のメニュー5つ目の「Live Reload」の2項目にチェックを入れてください。
（Live Reload DelayはそのままでOK）
![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/c3824e83-030e-3944-647f-8a36317a8892.jpeg)

#### ライブプレビューする
Preprosで、該当のプロジェクトを右クリック
↓
「Open Live Preview in」から好きなブラウザを選択。
これでブラウザに表示されたら成功です！
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616900/4364b4fd-5572-1fec-0141-94c25e1746cc.jpeg)

これでライブプレビューは完了です！
WordPressのテーマのPHPやCSSなどをコーディングしていきましょう！
最後までお読みくださりありがとうございました！


## 後書き
ライブプレビューの設定はこちらの記事を参考にしました。
（こちらはPropresではなく、Bracketsを使用しています。）
→ [Local by FlywheelでWordPressローカル環境を作ってライブプレビューする
](https://debuyoko.com/1290)