【WordPress/PHP】相対パスで画像やスタイルが正しく読み込まれない時の原因と対処法

本記事では、WordPressで相対パスで画像やスタイルを指定した時に正しく読み込まれない時の原因と対処法について解説しています。

元々静的ファイルで作成したWebページをWordPressに移行する時などにこの現象が起きるので、もし該当する人はこちらの記事をご参考ください。

WordPressの学習におすすめ書籍

1冊ですべて身につくWordPress入門講座

総合評価

( 5 )

メリット

• サイト運営に必須のことが学べる
• 基本的な使い方～オリジナルテーマ開発まで学べる

1冊ですべて身につくWordPress入門講座 [ Mana ]

楽天ブックス

¥2,200 （2024/04/23 07:35時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

• 美しいコードが書けるが自然と書けるようになる
• 他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

原因

まず始めに、何故今まで適切に読み込まれていた画像やスタイルシートなどがWordPressに移行した途端に上手く読み込まれなくなったのかについて解説します。

その理由は、htmlファイル(php)と画像やスタイルシートなどが置かれているディレクトリ構造が変化しているからです。例えば、themesディレクトリの配下が以下のような構造になっているとします。

test-themes
   | - index.php
   | - style.php
   | - assets
          | - images
                  | - test.png

index.phpに記述されているコードは以下のようになります。

<img src="./assets/images/test.png" />

静的なWebページであれば問題のない相対パス指定です。しかし、WordPressでこれを読み込ませると画像は表示されません。

例えば、トップページで上記の画像を表示させたい場合、相対パス指定だとトップページと同じディレクトリ階層にあるassets/images/test.pngを読み込みます。しかし、そこには画像は配置されておらず「ドメイン名/wp-content/themes/テーマ名/assets/images/test.png」に画像は配置されています。

つまり、「ドメイン名/wp-content/themes/テーマ名/」までのパスを取得することが出来れば、画像は正しく反映されます。

対処法

テーマディレクトリまでのパスを取得するには、get_template_directory_uri()関数を使用します。

get_template_directory_uri()

それでは、原因で紹介した画像を表示させるindex.phpのコードをget_template_directory_uri()関数を使用して書き換えてみましょう。

<img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/test.png') ?>" />

書き換え後のsrc属性の値を確認すると、以下のようにテーマディレクトリ配下のassets/images/test.pngの画像を読み込んでいることが分かります。

<img src="http://ドメイン名/wp-content/themes/test-theme/assets/images/test.png" />