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

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

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

WordPressの学習におすすめ参考書
1冊ですべて身につくWordPress入門講座

本書情報

著者	Mana
発売日	2022/3/22
ページ数	344ページ
Kindle版	○
レビュー (Amazon)	(217件)

１冊ですべて身につくＷｏｒｄＰｒｅｓｓ入門講座 /ＳＢクリエイティブ/Ｍａｎａ

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

【中・上級者向け】オリジナルテーマの作り方が学べるおすすめ参考書
WordPressオリジナルテーマ制作入門

本書情報

著者	清水 由規 / 清水 久美子 / 鈴木 力哉 / 西岡 由美
発売日	2022/1/13
ページ数	416ページ
Kindle版	○
レビュー (Amazon)	(53件)

WordPressオリジナルテーマ制作入門 [ 清水由規 ]

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

先輩くん

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

後輩ちゃん

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

原因

まず始めに、何故今まで適切に読み込まれていた画像やスタイルシートなどが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" />