XAMPP環境でLAN内の他PCからWordPressサイトにアクセスする

XAMPPでローカルに開発環境を構築している場合、LAN内の他のPCからWordPressで作ったWebサイトにアクセスする方法を解説します。これによりWi-Fiで同じネットワークに接続したスマートフォンなどからもサイトを閲覧できるので、デバッグする時に便利です。

ローカル環境では一般に、ホスト名が「localhost」、あるいはlocalhostを示すIPアドレス「127.0.0.1」でアクセスします。

つまりブラウザに入力するURLは、「http://localhost/Webページのパス」あるいは「http://127.0.0.1/Webページのパス」となります。

同じネットワーク内の他のPCからアクセスする場合は、この "localhost" をXAMPPをインストールしたPCに割り当てられたIPアドレスに変更してアクセスします。

したがってWordPressサイトをアクセスするには、WordPressをインストールする際にlocalhostをIPアドレスに替えて設定すればいいだけですが、この記事では後から設定変更する手順について解説します。

【コンテンツ】

  1. XAMPPインストールPCのIPアドレスを確認する
  2. [WordPressアドレス]と[サイトアドレス]を変更する
  3. マルチサイトの場合の設定変更
  4. アクセスできない場合のファイアウォールの設定

【記事執筆時の環境】
Windows 7 Professional / Windows 10 Pro
XAMPP 1.8.2
phpMyAdmin 4.1.9
WordPress 3.9.2 / 4.8.2

【変更履歴】
(1)「4. アクセスできない場合のファイアウォールの設定」を追加 - 2017/10/1

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

XAMPPをインストールしたPCのIPアドレスを確認します。
Windowsの場合はコマンドプロンプトで、「ipconfig」と打つと確認できます。

ipconfigを打ったコマンドプロンプト画面

ここでは、IPアドレスが「192.168.1.4」であることを確認しました。

これにより、例えばWebサイトのパスが "wpsample" だとしたら、XAMPPをインストールしたPCからアクセスする場合は、以下の3つはいずれも同じで正しくサイトを表示することができます。

「http://localhost/wpsample/」
「http://127.0.0.1/wpsample/」
「http://192.168.1.4/wpsample/」

XAMPPインストールPCでのアクセス画面

一方、他のPCからは、「http://localhost/wpsample/」や「http://127.0.0.1/wpsample/」ではサイトにアクセスできませんし、「http://192.168.1.4/wpsample/」と入力しても下記のような表示になってしまいます。

他のPCでのアクセス画面

これは、HTMLコード内でのCSSファイルパスなどにlocalhostがついているためであり、その部分を設定し直さなければなりません。

[WordPressアドレス]と[サイトアドレス]を変更する

WordPressの管理画面にログインします。
メニューから、[設定]-[一般]を選択します。

この状態では、[WordPressアドレス]と[サイトアドレス]が、
「http://localhost/wpsample」となっています。

WordPress一般設定画面

両方のアドレスを、「http://192.168.1.4/wpsample」に変更し、[変更を保存]をクリックします。

変更後のWordPress一般設定画面

この状態で他のPCから「http://192.168.1.4/wpsample/」にアクセスしてみます。
今度はCSSもちゃんと読み込まれた表示になっています。
ただし、トップのヘッダー画像が表示されていません。

設定後の他のPCでのアクセス画面

メディアライブラリに既に読み込まれている画像は、パスにlocalhostがついているままになっているため、それを表示させるには管理画面から画像を読み込み直す必要があります。

後からデータベースを操作し変更することもできますが、煩雑になるので、できるだけ画像登録前に今回の設定をしておいてください。

マルチサイトの場合の設定変更

マルチサイトで構成している場合は、管理画面からアドレスを変更できません。
したがって、phpMyAdimnを起動してデータベースを操作します。

xx_blogsテーブルの変更

domainをIPアドレスに変更します。サイトの数だけ行がありますので、すべて変更します。

xx_siteテーブルの変更

domainをIPアドレスに変更します。

xx_sitemetaテーブルの変更

meta_keyが「siturl」の行に含まれているlocalhostをIPアドレスに変更します。

xx_optionsテーブルの変更

option_nameが「siturl」と「home」の行に含まれているlocalhostをIPアドレスに変更します。サイトの数だけoptionsテーブルがありますので、すべてのテーブルについて変更します。

wp-config.phpの変更

最後にwp-config.phpを開いて、'DOMAIN_CURRENT_SITE' にIPアドレスを設定します。

変更したwp-config.php

アクセスできない場合のファイアウォールの設定

WordPress の設定をきちんとしても他PC からアクセスできない場合、原因は色々考えられますが、最も多いのは OS あるいはセキュリティソフトのファイアウォールで通信をブロックされていることです。

Windows ファイアウォールの設定

Windows ファイアウォールを有効にしている場合は、無効にしてアクセスできるか確認します。無効にしてアクセスできるようなら、Windows ファイアウォールが原因となっていますので、以下のような設定をします。

Windows ファイアウォールの画面で、[詳細設定]をクリックします。
詳細設定画面が表示されたら、[受信の規則]の[新しい規則]をクリックします。

Windowsファイアウォール詳細画面

[規則の種類]を選択する画面が表示されますが、「プログラム」にチェックを入れて、[次へ]をクリックします。
なお、今回はプログラムで Apache を指定する設定を行いますが、「ポート」にチェックを入れて、TCP または UDP のポート番号を指定する方法もあります。

Windowsファイアウォール 新規の受信の規則ウィザード 規則の種類選択画面

次にプログラムを指定します。今回は XAMPP に含まれている Apache の実行ファイル - httpd.exe を指定します。

Windowsファイアウォール 新規の受信の規則ウィザード プログラム指定画面

次の画面で、「接続を許可する」にチェックを入れ、[次へ]をクリックします。

Windowsファイアウォール 新規の受信の規則ウィザード 実行される操作の選択画面

規則を適用するプロファイル指定では、「プライベート」だけにチェックを入れます。

Windowsファイアウォール 新規の受信の規則ウィザード プロファイル指定画面

最後に「名前」と「説明(オプション)」を入力して、[完了]をクリックします。

Windowsファイアウォール 新規の受信の規則ウィザード 名前と説明の入力画面

セキュリティソフトに付属するファイアウォールの設定

セキュリティソフトにも、パソコンと外部との通信を制限するファイアウォール機能があります。その機能が原因でアクセスできない場合もありますので、適切な設定を行います。
設定の仕方は、それぞれのセキュリティソフトによって違いますが、私が使っている ESET Internet Security の設定方法を以下に説明します。

ESET Internet Security の画面を開き、[設定]-[ネットワーク保護]-[パーソナルファイアウォール]-[設定]とクリックします。

ESET Internet Security ネットワーク保護設定画面

[詳細]を展開し、[ルール]の[編集]をクリックします。

ESET Internet Security 詳細設定画面

ツールの追加画面で[一般]タブをクリックし、下記のように設定します。

ESET Internet Security 詳細設定 ルールの追加一般タブ画面

[ローカル]タブをクリックし、[アプリケーション]に Apache の実行ファイル - httpd.exe を指定し OK をクリックします。

ESET Internet Security 詳細設定 ルールの追加ローカルタブ画面

以上、ファイアウォールに Apache の許可をする設定を行うことで、アクセス可能になるケースもあります。
ファイアウォールの許可設定では、アプリケーションによらず TCP/UDP のポート番号を指定する方法や、アクセスを許可するIPアドレスを指定する方法もありますので、適切な方法を選択します。

スポンサーリンク

ページの先頭へ