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

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ローカル環境を作ってライブプレビューする