localhostで構築中のWordPressをWi-Fi接続したスマートフォンで確認

2014年以降、レスポンシブデザインが増えてきたので
Wordpressの表示や動作の確認も、開発しているパソコンのブラウザだけでなくスマートフォンやタブレットなど多岐にわたるようになりました。

そんなとき、スマホサイトを作りながらiPhoneで確認する方法のようにすると
ローカルネットワーク内の様々な端末で表示や動作の確認ができるのですが
localhostに構築しているWordpressでは、このような現象がおこる事があります。

  • トップページのHTMLだけが表示でき、リンク先のページは「接続できません」となる
  • 外部CSSやJavascriptが読み込めていない

WordPressのアドレスはlocalhostではなくローカルIPにする

外部CSSなどの参照ファイルが参照できなくなる症状は
Wordpress自身のアドレスが127.0.0.1localhostになっていると
localhost上のWordpress見ている外部のスマートフォンが、自身ののlocalhost上へリンク先ページや外部参照ファイルを探しに行ってしまうためおこる現象なので

WordPress管理画面の一般設定で、「WordPress アドレス (URL)」「サイトアドレス (URL)」をローカルIPに書き換えれば
外部端末からでも正しいアドレスを参照できるようになります。

関連記事

Pocket