結論
MAMP PROでWordPressローカル開発環境を作る場合は、SSL設定をしない方が賢明です。
SSL設定をした場合には、GulpのbrowserSyncが正常に動作しなくなる場合が多いのが理由です。
MAMP PRO最新バージョン6.9であれば、SSL設定が原因のトラブルも対策されているので、今のところ問題は生じません。ただし、今後もこの状態を維持できるのかは不明です。将来的にエラー発生が心配な場合はSSL設定をしない方が安心かもしれませんね。
Gulp browser-syncのエラーの原因はSSL設定
私のトラブルケースでは、Gulp起動後、トップページではbrowserSyncが正常動作しますが、下層ページにグローバルメニューから移行した後や、WordPress管理画面からサイトに遷移した場合にURLが変化してbrowserSyncが反応しなくなります。
この原因は、WordPress管理画面＞設定で確認できるWordPressアドレス（URL）がhttps（SSL）の場合には、Gulp起動後にブラウザーのURL窓に表示されるトップページのURLが「localhost:3000」などのURLにブラウザ上で置き換わるためです。
そして、トップページからグローバルメニューなどのリンクを介して下層ページに移行した場合には、WordPressアドレス（URL）に書かれたURLに戻るため、GulpのbrowserSyncが反応しなくなるのが原因です。
なお、下層ページであってもブラウザーのURL窓に直接「localhost:3000/下層ページのスラッグ」などと手入力すれば、browserSyncを正常利用できますが、それではあまりに作業効率が落ちるためオススメできません。
MAMP PROのバーションによる影響
MAMP PROの最新バージョンで対策されている場合もある。
最新バージョン6.9では対策されている｜2024.3.15時点
例えば、現時点で最新バージョンのMAMP PROバージョン6.9では、このエラーの対策がなされています。
hostを新たに作る場合にSSL設定をしても、上で紹介したようなGulpのbrowser-syncのエラー生じませんでした。
過去バージョン6.8以前で作ったhostについて
バージョン6.8以前に作ったhostについてはbrowserSyncに上記エラーが発生します。
バージョン6.8以前で作ったhostに対する対策
１．SSL設定をする場合の対策
おそらく、バージョン6.8以前で作ったhostも新たに最新バージョンSSL設定で作り直して、WordPressファイルのうちでthemes以下のファイル群をまるごと引っ越せば正常に動作しました。
固定ページはWordPress管理画面から、必要なものを新たに作る必要があります。この固定ページの新規作成画面で固定ページのスラッグを設定しておかないと、トップページのグローバルメニューから固定ページに移動しても404ページが表示されるので注意して下さい。
２．SSL設定をしない場合の対策
もちろん、上と同様の方法でSSL設定をしないで、WordPressファイルのうちthemes以下のファイル群をまるごと引っ越しても正常に動作しました。
３．バージョン6.8以前のバージョンのままで対策したい時
新たにhostをSSL設定なしで作り、WordPressファイルのうちthemes以下のファイル群をまるごと引っ越したら正常に動作しました。
現状ベストな対策
しかし、今後も最新バージョンであってもSSL設定によるエラーが生じる可能性も残っているため、MAMPのローカル開発環境ではSSL設定はせずに、本番のサーバー環境でSSL設定を行う方が最もトラブルが少なく賢明な方法だというのが私個人の考えです。
MAMP PROやWordPressローカル開発環境に関連する記事
