【WordPress】子テーマで画像が表示されない時はこれ

子テーマを使ってテンプレートファイルを編集していると、画像のパスが通らないって事ありませんか？

本記事では、そんな時にまず確認するべき項目について解説しています。

wordpressに慣れていない方や初心者の方は参考にどうぞ。

wordpressを触っていると子テーマを使ってカスタマイズする機会も多いと思います。

子テーマ内に「images」ディレクトリを作って、そこに画像を置いて参照すればカスタマイズも簡単です。

親テーマを触らないことでバックアップにもなります。

ただ、同じ要領で子テーマを編集していると「画像が表示されない」なんてことになりますよ。

画像が表示されない原因

正確には「画像が表示されない」ではなく、「画像のパスが通らない」でしょうか。

これはwordpressに少し慣れてきた方にありがちです。

おそらく原因は「使用している関数が適切でない」です。

まず確認すべきは関数

デベロッパーツールで確認するとパスが親テーマに通っていませんか？

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

これだとパスは通りません。

なぜなら、get_template_directory_uri()は子テーマで使用すると親テーマのディレクトリのURIを返すからです。

子テーマのディレクトを参照したい時はこれ

子テーマ内のディレクトリやファイルを参照したい時はこうしましょう。

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/sample.jpg" alt="sample">

さっきと似ていますが少し違います。

get_stylesheet_directory_uri()を使用すると子テーマのディレクトリのURIを返してくれます。

これで思ったような動きになると思います。

まとめ

本記事の内容を簡単にまとめました。

• 親テーマを参照するときは「get_template_directory_uri()」を使う
• 子テーマを参照するときは「get_stylesheet_directory_uri()」を使う

簡単なことだからこそしっかり理解して使い分けましょう。

以上になります。

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。