相対パスが効かない!?WordPressの罠

こんにちは。
あなたに寄り添うITサポーターヒロ60です。

今日はWordpressでの相対パス指定で、つまづいてしまったので、その解決方法をお話したいと思います。

とはいえ、WordPressに慣れてきて、自分でテンプレートファイルを作成し始めたあたりのニッチな人にしか役に立たない記事です。

今回私が踏んだ地雷ともいえるトラブルは、ファイルの相対パス指定でした。

相対パスと絶対パス

相対パスというのは簡単にいうと、画像などのファイルを指定する際に、現在の位置から見て場所を指示するための方法です。

対して絶対パスというのは対象のファイルが存在するURLをそのまま記述することを言います。

例えば、サイト内の「img」ディレクトリ内に『gazou.jpg』というファイルが入っている場合、サイトのトップページで画像を表示したかったら以下のどちらかの指定をすることになります。

絶対パス : <img src="https://sample.com/img/gazou.jpg" alt="" />
相対パス : <img src="img/gazou.jpg" alt="" />

絶対パスはWeb上のファイルの場所をそのまま記載し、相対パスはトップページから見た画像の位置を指定しています。

これは、家（トップページ）から学校（画像）までの道のりで考えるとわかりやすい･･･かもしれません。

絶対パスの場合：
絶対パスは、家から学校までの道のりを住所（「◯◯県✗✗市☆☆町1-1-1」のように具体的な場所）で表現します。
この場合、学校の位置は決まっていて、どこから見てもその場所に学校があることが分かります。

相対パスの場合：
相対パスは、家から学校までの道のりを自分のいる位置を基準にして表現します。
例えば、「家からまっすぐに2つ進んで、右に曲がって3つ進んで、左に曲がって…」というように、具体的な場所ではなく、自分が今いる位置を基準に進む方向や距離で表現します。

結論として、絶対パスは特定の場所から目的地までの具体的な場所を示す方法であり、相対パスは自分の位置から目的地までの方向や距離を示す方法です。

相対パスは状況に応じて変わる場所を指定するのに便利で、絶対パスは一定の場所を特定するのに便利です。

相対パスが効かない

で、問題はこのように指定したファイルを、いざWordPressで開いてみると一切画像が表示されていないんですね。

画像はテーマディレクトリ配下に「img」ディレクトリを作成して、そこに保存されています。

そのため、相対パスで指定する場合は「img/gazou.jpg」で間違いありません。

なのになぜ画像が表示されなかったのか？

原因はルートディレクトリとWordPressのディレクトリの違いでした。

通常のHTMLでは、
https://sample.com/
がサイトのURLになります。

しかし、WordPressの場合はテーマがインストールされているため、同じトップページのURLでも内部的には、
https://sample.com/wp-content/themes/テーマ名
というURLで処理されます。

※ブラウザで開くときのURLは"https://sample.com/"で変わりません。

そのため、相対パスで「img/gazou.jpg」と指定してしまうと、

https://sample.com/img/gazou.jpg

となってしまい、画像の入っているディレクトリでは無いところを読み込みにいってしまいます。

正しくは、

https://sample.com/wp-content/themes/テーマ名/img/gazou.jpg

となりますが、これをそのまま使ってしまうと、相対パスではなく絶対パスになってしまいます。

WordPressで相対パスを使う場合

WordPressの場合は、関数を使う必要があります。

関数はあらかじめ役割が決められている特定の文字列を入れることで、決まった動作をさせることができるものです。

現在のテーマのディレクトリを取得するために
<?php echo get_template_directory_uri()?>
という関数を使います。

これを使って、

<img src="<?php echo get_template_directory_uri()?>/img/gazou.jpg" alt="" />

と指定することで、自動的に

<?php echo get_template_directory_uri()?>

↓ 以下の文字列に置き換わり ↓

「https://sample.com/wp-content/themes/テーマ名/」

までのURLが出力され、その後の「img/gazou.jpg」で画像の場所を指定できるようになります。

結果的に、絶対パスで書いているのと変わらねーじゃんというね。