ローカルのWordPressやXOOPS Cubeの表示をiPhoneで確認する方法

Image

WordPressXOOPS Cubeでサイトを構築しているとき、Xamppで動かしているローカルのサイトで作業をしています。最近はスマートフォン対応も増えてきたので、その確認が必要です。ブラウザやシミュレーターで確認してもいまいち違うときが多いのでなんとか実機のiPhoneスマートフォンで、サーバーにアップせずにローカルで確認できないかなーと思ってできるようになったのでそのことについて書きます。

iPhoneで見るときはlocalhostではなくIPv4で見る

たとえば、このblogをローカルで確認するときは、

http://localhost/ryuswp/

というurlで確認します。これをiPhoneのurlに入れると、

Image

このように読むことができません。同じwifiのLANに接続しているから、そのまま行けるかな~と思いましたがダメでした(^_^;。

色々調べると、localhostでなはく IPv4 の値を入れる必要があるようです。

IPv4の調べ方

スタートボタンをクリック、

Image

コマンドプロンプトをクリックします。

Image

ipconfig と入力して、リターンを押します

Image

たくさん表示されますが比較的上の方に、

IPv4 アドレス . . . . . . . . . . : 192.168.5.110

のような表示があります。ここに表示されたIPアドレスをlocalhostの代わりに入れてみます

http//192.168.5.110/ryuswp/

Image

おおっ!表示されました。しかしよく見るとテーマが全然反映していません。ということでここからWordPressやXOOPS Cubeでの調整方法を調べました。

ローカルにあるWordPressをiPhoneで見るときの調整

さてー、といつものようにググりました。そしてなんとすぐにこのページを発見しました!

XAMPPにLAN内のスマフォからアクセスする

まさにぴったりでした(^^)/。途中までは既に試行錯誤した結果と同じだったのですがCSSを効かせるには、というところがとても参考に(というかそのまま使わせていただき)なりました。

「http://localhost/wordpress/」を「http://192.168.xxx.xx/wordpress/」に全て変更する

ためにfunctions.phpに機能を追加するということです。

2カ所にあったコードをまとめて、使っている子テーマのfunctions.phpの最後にペーストしました。そしてurlを

http://192.168.xxx.xx/wordpress/

から

http://192.168.5.110/ryuswp/

に変更。

これで再度iPhoneから読み直すと、
*2015/01/16 ソースにバグがありました。このコードをサイトにアップするとサーバーの時もローカルを見に行くため、iphoneなどでの表示ができないようになっていましたm(_ _)m。

追加したこのif文の localhost/ryuswp/ のところを使っている環境のローカルで見るときのURL(この場合は http://localhost/ryuswp)の一部に置き換えてくださいm(_ _)m。

Image

ちゃんと表示されました(^^)/

ローカルにあるXOOPS CubeをiPhoneで見るときの調整

ローカルにあるXOOPS Cubeのテスト用サイトurl

http://localhost/xc222default/html/

です。IPv4アドレスに変えてiPhoneで見てみます。

Image

やはり同じようにCSSが効いていない感じです。

mainfile.php

localhostと直書きされているのが問題みたいなので、

このように変更します。そうするとPCで見たときは localhost となり、iPhoneで見たときは 192.168.5.110 と自動的に指定されるようです。このようにしてから再度読み込み直すと、

Image

このようにスマートフォン表示になりました(^^)/

ローカルで確認できると色々便利なので、この設定を忘れずにスマートフォン表示を確認していきたいと思います♪

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る