XAMPPで構築しているサイトにスマホやタブレットからアクセスできるようにする時に気をつけたいこと

Word Press

以前、「XAMPPで構築しているサイトにスマホやタブレットから接続できるので便利」という記事を書きました。

XAMPPで構築しているサイトにスマホやタブレットから接続できるので便利
XAMPPで構築中のサイトをスマホなどの実機で見たい時、その端末がXAMPPを動かしているパソコンと同じネットワーク上にいれば(スマホがWifiでつながっていれば)表示できます。 この時、URLは「localhost」ではなく...

 

htmlのサイトであれば問題ありませんが、ワードプレスを使う時には注意したい点があります。
ローカルIPでアクセスするということに変わりはないのですが、そもそも、インストールする時に気を付けたいポイントがあります。

ワードプレスのインストール画面にブラウザからアクセスするときのURLです。
ここでIPを指定してあげる必要があります。

例えば、「ちくわ」というサイトをローカルで構築する場合、通常はXAMPPのhtdocs内に個別のディレクトリを作ってワードプレスのファイルを一式展開すると思います。

ローカルに構築されたワードプレスのサイトにスマホからアクセスする

 

 

その後、ブラウザからアクセスしてワードプレスをインストールすると思いますが、この時のURLに注意!

この時はIPを含むURLでアクセスしてください。

 

そうすると、インストール後に[設定]→[一般設定]を見た時

WordPressアドレス(URL)とサイトアドレス(URL)の部分にIPを含むアドレスが入っています。

これでOKです。

 

ここが http://localhost/chikuwa/ だったりすると、絶対パスを用いるワードプレスでは、ファイルの読み込みパスにlocalhostが入ってしまい、リンク切れをおこします。

例:<img src=”http://localhost/chikuwa/wp-content/themes/chikuwa/assets/img/chikuwa.png”>

XAMPPがインストールされているパソコンから見る分には大丈夫なのですが(IPだろうがlocalhostだろうがアクセスできるから)WiFiでつながったスマホやタブレットから表示を確認するとここが原因でリンク切れ(localhost=自分)で表示が崩れます。

 

XAMPPにワードプレスをインストールする時は、IPで指定するのがおすすめですという記事でした。

 

ちなみに、パソコンのIPアドレスが変わるとまた面倒なことになるので、XAMPPをインストールしてあるパソコンはIPアドレスを固定していまーす。

タイトルとURLをコピーしました