子テーマ使用時の画像ファイル出力方法

Tweet

初めて子テーマを使ったとき、画像ファイルが表示されなくてアレ？と思ったことがあったのでメモ。
子テーマのimageフォルダ内の画像を表示したいのに、ソースを見てみると、どうやら親テーマのimageフォルダを出力しているようでした。

テーマ内の画像ファイルを出力するには

普通、テーマに使う画像ファイルは、wp-content/themes/テーマフォルダ/images/の中に入れますよね。

現在使っているテーマフォルダのURLを取得するには、bloginfoの引数にtemplate_urlを入れて使います。ただし、最近ではecho get_template_directory_uri();を使うことが推奨されています。

[ 注 意 ] codexを見ると、bloginfo( ‘template_url’ )は、現在非推奨になっています。

bloginfoでも、WordPress3.9.2の現在、一応動くんですが、ここはせっかくなんで両方記載しておこうと思います。

//非推奨だけど、今のところちゃんと動きます
<img src="<?php bloginfo( 'template_url' ); ?>/images/hoge.jpg" />

//【推奨】これからはこのように書きましょう
<img src="<?php echo get_template_directory_uri(); ?>/images/hoge.jpg" />

このように出力されます

<img src="http://hogehoge.com/wp-content/親テーマ/images/hoge.jpg" />

独自テーマ使用時には、これで問題ないのですが、子テーマ使用時にこのようにすると、親テーマのフォルダを表示してしまいます。

子テーマ内の画像ファイルを出力するには

子テーマは、親テーマと同階層にテーマファイルを置きますが、子テーマ内のスタイルシートに「どのテーマを親としているのか」を記載しておくと、親テーマの内容を引き継いだまま、独自の設定ができるのです。

@charset "utf-8";
/*
Theme Name: Child
Template: twentyfourteen
*/

WordPressのバージョンをアップグレードする時に、親テーマも一緒にアップデートしたとしても、子テーマに影響を与える事はありません。

で、子テーマ内の画像ファイル指定方法ですが、以前はbloginfoの引数に‘stylesheet_directory’を入れていました。最近は、 echo get_stylesheet_directory_uri();と記述する方が推奨されています。

//非推奨だけど、今のところちゃんと動きます
<img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/hoge.jpg" />

//【推奨】これからはこのように書きましょう
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/hoge.jpg" />

こうすると、現在使っているスタイルシートが入っているテーマフォルダのURLを取得してくれます。

このように出力されます

<img src="http://hogehoge.com/wp-content/子テーマ/images/hoge.jpg" />

まとめ

子テーマの画像ファイルを出力したいときはecho get_stylesheet_directory_uri();を使おう

Tweet