仕事でも個人開発でもWordPressの中身をカスタマイズすることは多い。
WordPressでPHPの開発を行う際はXamppなどを用いて仮想環境を作り、ローカルで行うのが基本だ。
しかし、コードを書いて保存してもブラウザを逐一リロードして変更内容を更新する必要があり、それがかなり面倒だった。
HTMLやCSSはエディタのプラグイン（Live Serverなど）を使えばリロード不要で自動更新できるが、PHP（ワードプレス）ではできなかった。
そこで役だつツールが「BrowserSync」というものだ。
これはエディタでPHPファイルを保存（Ctrl + S）をしたら、自動でブラウザに反映させるツールで、導入後は劇的に作業効率がアップする。
今回はその導入方法と使い方をメモとして残しておく。
①node.jsインストール
BrowserSyncを使うには、まずはPC②node.jsがインストールされている必要がある。
既にインストール済みか否かはコマンドで「node -v」と打ちバージョン確認してもらいたい。
そうでなければ自身で最新バージョンをダウンロードしておこう。
②BrowserSyncのインストール
続いてBrowserSyncの本体のダウンロード・インストールを行う。
導入方法は簡単で、コマンドで「npm install -g browser-sync」を打てばオッケーだ。
③BrowserSyncの起動とファイル指定
インストールが終わったら、対象の作業フォルダやファイルを指定する。
browser-sync start –proxy “localhost/〇〇（WPサイト）” –files “C:/xampp/htdocs/〇〇（WPディレクトリ）/wp-content/themes/WPテーマ/**/*”
上記の「–proxy “localhost/〇〇（WPサイト）” 」はXAMPPで稼働しているWordPressサイトのURLに接続するためのプロキシ設定を行っている。
続いてfilesの部分にローカルで作業しているワードプレスのディレクトリを指定し、変更を監視するファイルを指定する。
ちなみに、「/**/*」はすべてのサブフォルダとファイルを監視するワイルドカードなので、この場合はテーマフォルダ以下全てのフォルダ・ファイルを自動更新できるようになる。
④リロード浮揚のローカルホストが立ち上がる
ブラウザに警告が出る画像のように注意分が出るので、はいを押すと、下記のページがブラウザで立ち上がる（http://localhost:3000/作業中WPサイト/）
これで全ての設定は完了したので、CSS,PHPファイルをCtel＋Sで保存すると、自動でリロードされる。
すると画像のような「Browsersync: connecred」のポップアップが出るので、以前のように逐一リロードして表示確認をする手間が省くことができるのだ。
ちなみに、これはPHPだけじゃなくてCSSなどにも適応される。
ワードプレスやPHPコーディングと合わせて使うとかなり効率がいいので、ぜひ導入してみることをオススメする。