Edited at

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

More than 3 years have passed since last update.

さくっとやりたい時用です。がっつりやりたい場合は、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にしましょう。