Wordpress開発において簡単にローカル環境を作成出来るLocal by flywheel を使用する際に、ファイル監視して自動リロードするBrowserSyncを併用する際の方法になります。

Local by flywheelとBrowser Syncの基本的な使用方法については他のサイトを見ていただくとして。。

対処法

通常時のbrowser-syncの起動は下記になります。

"start": "browser-sync start --server --files='./*.html, ./*.css'"

Local by flywheelで作成した環境でBrowserSyncを用いるのは、上記の --server オプションの代わりに --proxy オプションを利用します。

例えば、Local by flywheelで構築したローカルサイトが「https://hogehoge.local」の場合、

"start": "browser-sync start --proxy https://hogehoge.local ./ -f 'src, **/*.php, static/**/*.css, static/**/*.js'"

となります。

これで、通常BrowserSyncを使用する時と同様に「http://localhost:3000」等でアクセス可能になります。

注意点1

ドメイン部分が localhost となるため、wordpress管理画面から登録した画像のパスが通らなくなることもあります。

通常の https://hogehoge.local でのアクセスも可能なので、パスの問題がある場合はこちらも同時に確認しましょう。ただ、自動リロードが有効なのは localhost のURLのみになります。

注意点2

Local by flywheel でWordpressサイトを追加した際、デフォルトの設定ではドメインが hogehoge.local となります。
この時、「.local」のままだと自動リロードの速度が遅くなることがあるようです。
Local by flywheel の管理画面からローカルドメインの変更が可能なので、「hogehoge.wp」等に変更しておくとよいでしょう。

参考URL
https://wemo.tech/1855

まとめ

browserSyncを使用したがために、wordpressとは別の静的な環境でコーディングをする、ということをしなくてもよいので、wordpressのローカル環境での開発がやりやすくなります。