ロカールのWordPressをBrowsersyncを使って、iPhoneで確認する #WordPress

さくっとやりたい時用です。がっつりやりたい場合は、gulpを使いましょう。

IPの接続と何ら変わりがありませんが、Browsersyncをかますと、CSSやPHPのファイルを更新するだけで、ブラウザが勝手にリロードさせれるので便利。
node.jsがインストールされていることが前提です。

ローカルのWordPressにpackage.jsonを作成します。
--proxyの後ろのURLは、適時変えてください。
--filesのパスは、package.jsonから見た時の相対パスです。

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "wordpress",
  "scripts": {
    "start": "browser-sync start --proxy localhost:8888 --files=\"wp-content/themes/[テーマ名]/*.css, wp-content/themes/[テーマ名]/**/*.php\""
  },
  "devDependencies": {
    "browser-sync": "^2.9.3"
  }
}

ターミナルでpackage.jsonを設置したディレクトリまで移動し、Browsersyncをインストールします。もし、Browsersyncがグローバルにインストールされていれば、このコマンドは叩く必要がありません。
(先頭の\$は「ここはコマンドだよ」って意味です。$は無視してコピペしてください)

$ npm install

Browsersyncのインストールが終わったら、下記のコマンドを叩きましょう。

$ npm start

ターミナルに下記のような内容が記述されます。

Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.48:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.48:3001

パソコンが接続しているWi-Fiに、スマートフォンも接続させ、Access URLsのExternalのURLへアクセスしてみましょう。

ローカルのWordPressを実機で確認できるようになります。
またCSSなどを変更してみましょう。パソコンやスマートフォンで表示しているWordPressが勝手にリロードします。

もし同期したくない場合は、Access URLsのUIへアクセスし、同期設定をOFFにしましょう。