2026-02-20

Docker WordPressをスマホから確認する設定｜wp-config.phpでWP_HOME指定

概要

Docker WordPressをスマホから確認する設定について解説していきます。

というのもDockerでローカルに立てたWordPress、PCブラウザでは見えるのにスマホからだと画面が崩れたりログインできなかったりして困りますよね（- -;

これはWordPress側がアクセス先URLをlocalhostとして記憶してしまうのが原因で、スマホから別のIPアドレスでアクセスするとCSSや管理画面のリンクがズレてしまうんですね。

実はwp-config.phpのWP_HOME・WP_SITEURL指定を設定すれば、同じLAN内のスマホからでも普通にレイアウト確認やログインができるようになります。

ここではdocker-compose.yml・custom-php.ini作成からwp-config.phpのWP_HOME指定、ipconfigでのIP取得までの手順を一通り紹介していきます！

これでスマホ表示でのレスポンシブ確認もサクサク進みます。
それではやっていきましょう！

なぜDocker WordPressはスマホから見えないのか

まず原因を押さえておくと対処が早いので、軽く触れておきますね。

WordPressはインストール時にアクセスしたURL（多くの場合http://localhost:8080）を「サイトのホームURL」としてデータベースに保存します。
PCのブラウザはlocalhostを自分自身として解決できますが、スマホにとってのlocalhostはスマホ自身を指してしまうので、当然WordPressには届きません。

さらに厄介なのが、URLは届いてもページ内のCSSや画像、管理画面のリンクがlocalhost基準で生成され続ける点です。
その結果スマホからIPアドレスでアクセスしても、レイアウトが崩れたり管理画面でログインループに陥ったりするわけですね。

これを解決するのが、これから設定していくWP_HOMEとWP_SITEURLの固定指定です。

作成ファイル

docker-compose.yml

docker-compose.ymlファイルでサーバの詳細を定義していきます。

WordPress本体とデータベース（MariaDB）の2コンテナ構成です。
portsの"8080:80"が、PCの8080番ポートをコンテナの80番（Apache）に転送する設定で、スマホからアクセスする際もこの8080番を使います。

docker-compose.yml

services:
  wordpress:
    image: wordpress:latest
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: user
      WORDPRESS_DB_PASSWORD: pass
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wp-content/themes:/var/www/html/wp-content/themes
      - ./wp-content/plugins:/var/www/html/wp-content/plugins
      - ./custom-php.ini:/usr/local/etc/php/conf.d/custom-php.ini
  db:
    image: mariadb:10.6
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: user
      MYSQL_PASSWORD: pass
      MYSQL_ROOT_PASSWORD: rootpass
    volumes:
      - ./db-data:/var/lib/mysql

テーマやプラグインをvolumesでホスト側にマウントしているので、エディタで編集した内容がそのままコンテナに反映されます。
ブログのテーマ開発をしているなら、このマウントがあると確認サイクルが一気に速くなりますよ（^^b

custom-php.ini

PHPの設定ファイルを手動で配置します。

画像アップロードの上限やメモリ、OPcacheなどをまとめて指定しています。
WordPressはデフォルトのupload上限が小さく、テーマやメディアのアップロードで引っかかりがちなので、ここで広げておくと安心です。

docker-compose.yml

memory_limit = 256M
upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300
opcache.enable=1
opcache.memory_consumption=128
opcache.interned_strings_buffer=8
opcache.max_accelerated_files=4000
opcache.revalidate_freq=2

ディレクトリ構成

上記で作成したファイルは下記のディレクトリ構成で配置します。

ディレクトリ構成

1
2
3

/
L Docker-compose.yml
L custom-php.ini

custom-php.iniはdocker-compose.ymlのvolumesでコンテナ内のPHP設定ディレクトリにマウントされるので、同じ階層に置いておけばOKです。

dockerコンテナ構築

dockerコンテナ起動

一度dockerでコンテナを作成し、WordPressの環境構築＆起動を行います。

コマンド

1	docker-compose up -d

-dはバックグラウンド起動の指定です。
初回はイメージのダウンロードが走るので、少し時間がかかってもそのまま待ちましょう。

WordPress起動確認

WordPressが正常に起動されたか確認します。
下記のURLにアクセスして画面が表示されればOKです。

URL

1	http://localhost:8080

初回アクセス時はWordPressのインストール画面（言語選択・サイト名・管理者ユーザー設定）が表示されます。
ここで一度セットアップを済ませておきましょう。

dockerコンテナ停止

起動が確認出来たらコンテナを停止します。

コマンド

1	docker-compose down

スマホで画面閲覧する為の設定

ここからが本題の、スマホから同じLAN内のDocker WordPressにアクセスするための設定です。
PCとスマホが同じWi-Fiに接続されていることを前提に進めていきますね。

ipconfigで自分のIPアドレスを取得

ipconfigコマンドをコマンドプロンプトで実行し、自分のネットワークのIPアドレスを取得します。

コマンド

ipconfig

表示された中の「IPv4アドレス」が、LAN内でPCを指すアドレスです。
多くの家庭用ルーターでは192.168.x.xの形式になっています。

ここで取得したIPアドレスは以降の「[ip]」に当てはめてください

wp-config.phpを設定

wp-config.phpに取得した自分のIPアドレスを設定します。

これが今回の肝で、WP_HOMEとWP_SITEURLをlocalhostからPCのIPアドレスへ固定で上書きします。
これでWordPressがCSSや管理画面のリンクをIPアドレス基準で生成するようになり、スマホからでもレイアウトが崩れなくなります。

wp-config.php

1 2	define('WP_HOME','http://[ip]:8080'); define('WP_SITEURL','http://[ip]:8080');

この2行は、/* That's all, stop editing! */というコメントより上に書くのが定番です。

コンテナを再起動

コンテナを再起動して、WordPressサーバを立ち上げます。

コマンド

1	docker-compose up -d

スマホからWordPressを確認

スマホからWordPressを確認します。

下記の2ついずれのURLでも確認可能です。

URL

1
2
3

http://[ip]/wp-admin
または
http://[PCのユーザ名].local:8080/

.localはmDNS（Bonjour）でホスト名を解決する仕組みで、IPアドレスが変わっても同じURLでアクセスできるのが便利なところです。

PCのユーザ名は「設定/ホーム」に表示されているユーザ名です。

スマホからアクセスできない場合は、PCのファイアウォールが8080番ポートをブロックしていないか確認してください。 WindowsならDocker DesktopやApacheに対する受信の許可が必要になることがあります。

締め

この手順を行えばWordPressの画面がスマホでも確認できるようになったはずです。

ポイントはwp-config.phpでWP_HOMEとWP_SITEURLをPCのIPアドレスに固定することで、これさえ押さえればレスポンシブ確認も実機テストも一気に楽になります。

docker君はやっぱり構築を一瞬でできるので便利ですね！
コンテナ技術は人類の宝ですよほんとに（^^/

自分のブログではこんな感じでエンジニアの知識を紹介しています。
実務レベルの知識もたくさん置いているので、他の記事も是非見ていってください！

以上
WordPressをオワコンなんて言ったらだめです！
それではお疲れさまでした。

エンジニアリング

ブログ, エンジニアリング, windows

概要

目次

なぜDocker WordPressはスマホから見えないのか

作成ファイル

docker-compose.yml

custom-php.ini

ディレクトリ構成

dockerコンテナ構築

dockerコンテナ起動

WordPress起動確認

dockerコンテナ停止

スマホで画面閲覧する為の設定

ipconfigで自分のIPアドレスを取得

wp-config.phpを設定

コンテナを再起動

スマホからWordPressを確認

締め

関連記事