wp云々の前に確認。PCとSP、両方とも同じwi-fiで接続されてるか？

wi-fi_name_xxx-A
と
wi-fi_name_xxx-G
のように、同じwi-fiでもAとGは異なるので注意。

むしろ同じネットワーク上にPCとSPが存在してたら特別な設定は無い。
スマホでスマホで表示出来るローカル環境のurlを叩くだけでPCのlocalWordpressが表示される。

ただしwordpressの場合、ただURLを叩いただけではcssなどは効いてないはず。
これが普通に静的なhtmlとかだったら、URLをスマホで叩いた時点でPCのlocalhostがiPhoneで普通に表示される。
どんなurlを叩けば良いかは、以下↓↓↓

【接続パターンA】pcのipで接続

Mac林檎マーク > システム環境設定 > ネットワーク > Wi-Fi
上記箇所に、IPアドレスが表示される。

スマホで以下URLにアクセスする（PCでもアクセス可）

[http://] + [IPアドレス] + [:] + [ポート番号]  + [/]
例）http://192.168.11.x:8888/

【接続パターンB】pcのコンピュータ名で接続

Mac林檎マーク > システム環境設定 > 共有
上記箇所に、『ローカルネットワーク上のコンピュータから、次のアドレスでこのコンピュータにアクセスできます』ってテキストの箇所に『xxx.local』など表示される。

スマホで以下URLにアクセスする（PCでもアクセス可）

[http://] + [コンピュータ名] + [.local] + [:] + [ポート番号] + [/]
例）http://xxx.local:8888/

wordpressの場合は一手間必要

wpの場合、phpが吐き出すパスが

http://localhost:8888/wp/wp-content/theme/test/img/noimg.png

『http://localhost:8888』ってなる。

pcの時は問題無い。

だが、スマホで表示するためのURLは『http://IPアドレス:8888』とか『http://コンピュータ名.local:8888』とかなので、当然『http://localhost:8888/wp/wp-content/theme/test/img/noimg.png』のような画像は表示出来ない

『localhost:8888』はPCで表示可能なurlって事。

って訳で、localhostのwpをspで表示させるためには、wp側で何かしらの処理をしてあげる必要がある。

例えば画像パスなら

http://IPアドレス:8888/wp/wp-content/theme/test/img/noimg.png

とか

http://コンピュータ名.local:8888/wp/wp-content/theme/test/img/noimg.png

に、してあげると正常に表示される。

って訳で、そうするための記述は以下。

functions.phpで本番ドメインやtestドメイン以外でアクセスした場合（つまりlocal環境のURLでアクセスした場合）に、if文で強制的にurlを書き換える。

// スマホでlocal環境確認のために、local環境でソースとしてはきださる、ドメインを書き換え
// PC & SP両方書き換え。不都合は無い（はず）だからPCも書き換えても良いでしょ
//=====================================================
class relative_URI {
  function relative_URI() {
    add_action('get_header', array(&$this, 'get_header'), 1);
    add_action('wp_footer', array(&$this, 'wp_footer'), 99999);
  }
  function replace_relative_URI($content) {
    $home_url = trailingslashit(get_home_url('/'));
    $local_http = ''.$_SERVER['REQUEST_SCHEME'].'://'; //http:// を取得
    $local_hostname =  gethostname(); //コンピュータ名 + .local を取得
    $local_port =  ':'.$_SERVER['SERVER_PORT'].'/'; //ポート番号 を取得
    $strpos_servername = ''.$_SERVER['SERVER_NAME'].'';
    // SERVER_NAME で条件分岐
    if(strpos($strpos_servername, 'hogehoge.com')!== false) { //本番ドメイン
      return $content;
    } else if(strpos($strpos_servername, 'test.hogehoge.com')!== false) { //test用サブドメイン
      return $content;
    } else {
      // 上記条件に一致しないURLを [コンピュータ名]+.local:port に書き換える（http://localhost:8888 などの開発環境を想定。Mac。MAMPで動作確認）
      return str_replace($home_url, $local_http.$local_hostname.$local_port, $content);
    }
  }
  function get_header(){
    ob_start(array(&$this, 'replace_relative_URI'));
  }
  function wp_footer(){
    ob_end_flush();
  }
}
new relative_URI();

以下より抜粋に近い。
https://memo.ag2works.tokyo/post-1412/

↑↑↑ブログと全く同じ事をしたら、動かなかったので自分用に多少書き換え。

そして↓↓↓は、サーバー環境を確認するためのデバッグ用。適当にfooter.phpの最下部とかに貼り付け。もし、この内容の薄いブログを見た人は、phpの変数名とかが適当だったりするから綺麗にする事を推奨。

<div class="test">
<style>
  .test {
    width: 100%;
    height: 500px;
    background: red;
    color: white;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    padding: 20px;
    line-height: 1.6;
    font-size: 12px;
    display: none; /*見るときはここを none じゃなくて blockに変更*/
  }
</style>
<?php
  //var_dump($_SERVER)';
  echo $home_url = '$home_url　：　'.trailingslashit(get_home_url('/')).'<br>';
  echo $local_http = '$local_http　：　'.$_SERVER['REQUEST_SCHEME'].'<br>';
  echo $local_hostname =  '$local_hostname　：　'.gethostname().'<br>';
  echo $strpos_servername =  '$strpos_servername　：　'.$_SERVER['SERVER_NAME'].'<br>';
  echo $local_port =  '$local_port　：　'.$_SERVER['SERVER_PORT'].'<br><br>';

  if(strpos($strpos_servername, 'hogehoge.com')!== false) {
    echo 'hogehoge.com と一致した（true）<br>';
    echo 'この環境のSERVER_NAME ▽ ▽ <br>'.$strpos_servername.'';
  } else if(strpos($strpos_servername, 'test.hogehoge.com')!== false) {
    echo 'test.hogehoge.com と一致した（true）<br>';
    echo 'この環境のSERVER_NAME ▽ ▽ <br>'.$strpos_servername.'';
  } else {
    echo '本番のドメイン、テストのドメイン、その他どの条件とも一致しない<br>';
    echo 'この環境のSERVER_NAME ▽ ▽ <br>'.$strpos_servername.'';
  }
?>
</div>
<!--END .test-->