[備忘録]Macのlocalhostで構築中のwordpressサイトにiPhoneからアクセスするためのあれこれ。

Wordpress logo

Macのローカルホストで構築中のwordpressサイトに、同じLANに接続中のiPhoneからアクセスして実機確認するためのメモです。

MacのIPアドレス確認方法

「アプリケーション>ユーティリティ>ネットワークユーティリティ」を選択し、ネットワークユーティリティを起動。
Infoタグで接続中のネットワークインターフェイスのいIPアドレスを確認する。

Mac IPaddress

ちなみにWindowsだとターミナルでipconfigというコマンドを叩くとIPアドレスが確認できましたが、Macではipconfigコマンドは使えません。
ただし、Macはifconfigというコマンドが使えるので、Windowsと同じようにターミナルで確認することもできます。

というわけで、LANに接続中のiPhoneから確認したIPアドレスにアクセスしてみます。

これだけじゃ、ダメだった!

うーん。CSSやJSが読み込まれません!!

IMG 4054

まあ考えてみれば当然で、cssやjsの読み込みの部分はwordpressのテーマの中では以下のように書かれています。

[php htmlscript=”true”] /js/jquery.js">
[/php]

bloginfo(“template_url”)の部分は当然wordpress側の設定に従いlocalhostに変換したうえでhtmlが書き出されるのでiPhoneはMACのファイルを読み込むことはありません。

ここをなんとかせねば!!

localhost->IPアドレスへの書き換え方法

というわけで、function.phpに以下を記述して、URLをゴリッと置き換えてしまいます。

[php htmlscript=”true”]
class relative_URI {
function relative_URI() {
add_action(‘get_header’, array(&$this, ‘get_header’), 1);
add_action(‘get_footer’, array(&$this, ‘get_footer’), 99999);
}
function replace_relative_URI($content) {
$home_url = trailingslashit(get_home_url(‘/’));
return str_replace($home_url, ‘http://192.168.1.29:8888/wordpress/’, $content);
}
function get_header(){
ob_start(array(&$this, ‘replace_relative_URI’));
}
function get_footer(){
ob_end_flush();
}
}
new relative_URI();
[/php]

return_src_replaceのパラメータに指定したURLが置き換え後のアドレスです。
僕の場合は、ローカルサーバーにwordpressというフォルダを切った上でwordpressをインストールしているので、URLはhttp://192.168.1.29:8888/wordpress/という指定になっています。

出た!

IMG 4055

ただし一つ注意点

wordpressのget_header,get_footerというテンプレートタグをフックしてURLの置き換えをやっているので、
例えば、

[php htmlscript=”true”]




[/php]

というようにbodyタグの一番最後にjsを読み込んでいる場合、URLの置き換え対象にはなりません。
ここだけ注意です!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です