Local by Flywheelは簡単にWordPress環境を構築できるので便利ですが、
PHPやCSSなど、どのファイルを更新してもライブプレビューで変更を反映してくれたら便利！
と思い、あれこれ調べてみました。
なんとかうまくいったので、メモとして残します。
Local by Flywheel と WordPressの準備
インストールから設定まで、
こちらのサイトでばっちりご紹介してくださっています！
【超簡単】Local by Flywheelを使って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公式
ここから無料でダウンロードできます。
「Download Free Unlimited Trial」をクリックすると、
macOS、Windows、Linuxのボタンが出てくるので、該当する物をクリック＆ダウンロードしてください。
（Free Unlimited Trialと書いているので、
使用していると頻繁に「買ってよ！」とポップアップが出てきます。
これさえ無視していれば、無料で使い続けられます。
購入する場合、34ドルの買い切りで購入可能です！ ※21年1月現在）
PreprosはSassのコンパイラとしても便利です。
プロジェクト事にコンパイル方法を選べるので、結構重宝しています。
他にもいろんな機能がついているので、気になる方はこちらの記事をご参照ください。
→ 多機能コンパイラ『Prepros』で快適コーディング
Preprosにライブプレビューの設定をする
フォルダの場所を特定する
Preprosに設定するフォルダの場所を見つけておきます。
Local by Flywheelで、
該当のサイト → サイトのタイトル下に「~/Local Sites/[サイト名]/ →」をクリック。
すると、MacだとFinderで該当のフォルダが開きます。
↓
Macintosh HD > ユーザー > [ユーザー名] > Local Sites > [サイト名] > app > public の
publicファイルをPropresの新規プロジェクトファイルに指定します。
新規プロジェクトを作成
新規プロジェクトを作成し、監視するフォルダを設定します。
左下の『+』マークをクリックしてください。
すると、フォルダを選択する画面が出てきますので、
先ほど特定したpublicファイルを指定してください。
ライブプレビューの設定
ライブプレビューに設定するURLを調べる
Local by Flywheelの右上にある「OPEN SITE」をクリックすると、
Local by Flywheelが生成したサイトが表示されます。
このURLをコピペしてください。
Preprosのライブプレビューを設定する
Preprosに戻り、右上の「Setting」をクリック。
すると、いろんなメニューが出てくるので、上から3つ目の「Live Preview」をクリック。
「Custom Server」に以下の設定をしてください。
①「Use Custom Server」にチェック。
②「Server Url」に先ほどLocal by FlywheelでコピーしたURLを入力。
ライブリロードを有効にする
「Setting」内のメニュー5つ目の「Live Reload」の2項目にチェックを入れてください。
（Live Reload DelayはそのままでOK）
ライブプレビューする
Preprosで、該当のプロジェクトを右クリック
↓
「Open Live Preview in」から好きなブラウザを選択。
これでブラウザに表示されたら成功です！
これでライブプレビューは完了です！
WordPressのテーマのPHPやCSSなどをコーディングしていきましょう！
最後までお読みくださりありがとうございました！
後書き
ライブプレビューの設定はこちらの記事を参考にしました。
（こちらはPropresではなく、Bracketsを使用しています。）
→ Local by FlywheelでWordPressローカル環境を作ってライブプレビューする