memocarilog

モバイル端末でサイトの表示を確認するのにAdobe Edge Inspectを使用するととても便利です。

しかし、MAMP内に構築したWordPressのサイトを、Adobe Edge Inspect を通してモバイル端末で確認した場合に、HTMLは読み込めているが、CSSファイルが読みまれていない状態になりました。

これはWordPressがHTMLファイルに書き出されるパスが絶対パスなためのようです。参考：Adobe Community: Edge Inspect + MAMP

回避方法

これを回避するには、WordPressがHTMLファイルへ生成するパスを、相対パスに変更してしまえばよいようです。Adobe Edge Inspect Team Blog（ Edge Inspect + WordPress workflow | Adobe Edge Inspect Team Blog ）で勧められているWordPressプラグイン、Root Relative URLs を使用すると、簡単に相対パスに変更することが可能です。

プラグインのダウンロードと使い方

以下より Root Relative URLs プラグインをダウンロード可能です。
WordPress › Root Relative URLs « WordPress Plugins

Root Relative URLs プラグインの使い方はとても簡単です。ダウンロード＆インストール後に有効化するだけで、パスを絶対パスから相対パスへ変更してくれます。

本来 Root Relative URLs は、仮想から本番環境へ移行する際にシームレスに移行できるようにリンクや画像を相対パスへ変更する為のプラグインのようです。

Edge Inspect で表示確認

Root Relative URLs プラグインを有効後ざっと出力されているソースを確認したところ、すべてのパスが全部相対パスへ変更される訳ではなさそうです。
CSSファイルへのパス（get_stylesheet_directory_uri()で取得）は絶対パスのままで、wp_enqueue_script() で読み込んだファイルや投稿記事内の画像へのパスは相対パスへすべて変わっていました。

プラグインの本来の目的からすると、投稿記事内の画像やリンクのパスの変更だけで全く問題ないのですが、CSSファイルへのパスが絶対パスなのが表示されない原因かと思ったので、結局原因はよくわからなくなりました…。

しかし、Edge Inspect で表示を確認するとちゃんとCSSファイルが適用された状態で表示されたので、ひとまず解決です。