InstantWPでローカル環境に構築したWordPressのサイトをスマホで確認する方法
こんにちは。KeiTieです。
いやぁ、はてなブログはいいですね！
簡単にブログが開設できて、すぐに記事に取り掛かれますから・・・
しかし、デザインの細かいところにこだわるならWordPressがいいでしょう。
今日は、WordPressでデザインのカスタマイズをしていたところ、スマホではどのように表示されるのか確認したいなと思ったので、ローカル環境に構築したサイトをスマホで確認する方法について残しておきたいと思います。
まずは調べてみた
ググって調べてみました。
すると、次のサイトを見つけました。
ローカル環境にセットアップしたWordPress（XAMPP上）の表示確認を、他のパソコンやスマホからアクセスする方法とか。
ここに書かれているように前提条件として「無線LANでつながっていること」があるようです。
うちでは、そこのとこはクリアしています。
IPアドレスを確認する
次にWordPressをインストールしたPCのIPアドレスを確認します。
IPアドレスを確認するには、「スタート」ボタンの「プログラムとファイルの検索」に「コマンドプロンプト」と入力して、コマンドプロンプトを起動させます。
そして、出てきた画面に「ipconfig」と打ち込んでEnterキーを押すと「IPv4アドレス」という項目が表示されるので、ここに表示されているIPアドレスを覚えておきます。
WordPressの設定を変更する
ここでWordPressにアクセスして「設定」の「一般」を開きます。
この中に「WordPress アドレス (URL)」と「サイトアドレス (URL)」がありますので、こちらの「localhost」となっているところを先ほどのIPアドレスに書き換えます。
うちの場合は、IPアドレスの後ろのポート番号（:xxxxの部分）はそのまま残しました。
そして、「変更を保存」をクリックします。
iwpserverの設定も変更しよう
次にiwpserverを保存しているフォルダ内にある「pms_config.ini」をメモ帳などで開きます。
そして、14行目にある「HostName」を先ほど設定したIPアドレスに変更します。
こちらは、ポート番号は入れなくて大丈夫です。
「pms_config.ini」を保存したら、いったんiwpserverを再起動させましょう。
新しいアドレスでアクセスする
ここまで、設定が終わったら、新しいアドレスでWordpressにアクセスします。
ブラウザに「http:// xxx.xxx.xxx.xxx:xxxx/wordpress/wp-login.php」と入力してアクセスします。
・
・
・
・
・
ん？！
ここでトラブル発生！
↑デザインが反映されてなく左に寄っている状態になっています。
おかしいなと思いつつログインしてみると、ログイン後も表示が変なままです。
また、この状態でサイトにアクセスすると、サイト上もデザインが反映されていません。（画像も表示されていません。）
解決策！
この問題を解決するには、MySQLの設定を変更する必要があります。
iwpserverの画面からMySQLをクリックします。
そして、表示されたログイン画面のユーザー名には「root」と入力し、パスワード欄は未入力のままで「実行」ボタンをクリックします。
すると、左側にwordpressという項目があるので、それをクリックします。
次に、右側に表示される一覧の中から「wp_options」をクリックします。
すると、「siteurl」という項目がありますので、「編集」ボタンをクリックします。
そして、表示された画面で正しいURL「http:// xxx.xxx.xxx.xxx:xxxx/wordpress」と入力して保存してください。
この状態で、先ほどのURL（http:// xxx.xxx.xxx.xxx:xxxx/wordpress/wp-login.php）へアクセスすると・・・・
・・・無事デザインが反映されました！
めでたしめでたし☆彡
・
・
・
じゃなくて、スマホで表示させる方法でした（汗）
スマホでも「http:// xxx.xxx.xxx.xxx:xxxx/wordpress/」にアクセスすると・・・・
・・・きちんと表示されましたぁ！！
これで一件落着♪
それではっ！
