【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

24Oct2014

[XAMPP&WordPress] LAN内のスマホ実機からアクセスする方法

xampp

XAMPPとは、Web制作で使用するローカルPC上に手軽にサーバー環境を構築できるソフトウェアです。
サーバー上で動作するWordPressや他のCMSを制作する際には、必須のツールの一つです。

本稿は、すでにXAMPPを利用してWordPressスマホサイト構築をしている方に向けた内容になります。
XAMPPのインストール方法は当サイトではまだ紹介していなかったので、以下を参考にしてください。

ローカルPC上のXAMPPサイトにアクセスするには、ブラウザのURLに以下のように入力します。

http://localhost/testsite/
※testsiteの箇所はXampp内に保存したサイトのフォルダ名を入力

制作中のWordPressサイトをPCブラウザから確認する際は上記アドレスにアクセスすればOKですが、近年増えているスマホサイトの動作確認にはスマホ実機が必要な場合があります。

そこで次項からは「手持ちのスマホ実機でXAMPP上のテストサイトにアクセスする方法」を紹介していきます。

1. XAMPPをインストールしたPCのIPアドレスを確認する

まずはXAMPPがインストールされたPCのIPアドレスを確認します。

1-1. スタートメニューからコマンドプロンプトを立ち上げます。
コマンドプロンプトを立ち上げる

1-2. 「ipconfig」と入力後Enterキーを押して詳細を確認します。
ipconfigと入力後にEnter

1-3. IPv4アドレスを確認します。
IPv4アドレスを確認

上の例では、192.168.0.3 が、XAMPPがインストールされたPCのIPアドレスになります。
これを控えておきましょう。

2. スマホ実機からXAMPPにアクセスする

2-1. スマホ実機のブラウザを開き、URLに手順1-3で控えたIPアドレスを入力する

http://192.168.0.3/testsite/
※testsiteの箇所はXampp内に保存したサイトのフォルダ名を入力

これでXAMPP上のテストサイトが表示されますが、このままではWordPress側にひとつ問題が生じてしまいます。
次項でこれを解決していきます。

3. WordPressテストサイトの「サイトアドレス」を変更する

XAMPP上にWordPressをインストールする際、多くの方はサイトアドレス(およびWordPressのアドレス)の欄にて「localhost」を参照していると思います。
WordPress設定画面

XAMPPが稼動しているPC以外からアクセスする際にWordPressのURLがlocalhostになっていると、以下のような問題が生じます。

・CSSなど外部ファイルが取得できない
・リンク先ページに移動できない

LAN内の他デバイスからXAMPP上のWordPressサイトにアクセスする際は、サイトアドレスをIPアドレス形式に変更しておきましょう。

3-1. WordPressの設定から「WordPressアドレス」「サイトアドレス」のURLをIPアドレスにする
WordPressアドレス、サイトアドレスをIPアドレスに変更する

設定を終えたら、スマホからアクセスしてページ遷移できるか確認してみましょう。

参考サイト

LAN内の他デバイスからXAMPPサイトにアクセスできない時の対処法が紹介されています。

LAN内のIPアドレスでアクセスできるようにする

関連記事