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

2014年08月24日

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

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

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

folder

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

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

‘template_url’ / ‘template_directory’ – アクティブなテーマのディレクトリー URL を表示します。 (‘template_directory’ は Version 2.6 以前ではローカルパスを表示していました。ハック的な代替策は get_theme_root()get_template() を参照してください)。 子テーマの中では、 get_bloginfo(‘template_url’) と get_template() はどちらもテーマのディレクトリーを返します。そのため、親テーマでは get_template_directory_uri() を、子テーマでは get_stylesheet_directory_uri() を使うよう考慮してください。
[ Codexより引用 ]

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();を使おう


共著書および執筆協力している本

効果的なアプリ/Web開発のための コラボレーションツール活用入門
単行本:¥3,229
[ 2016年10月発売 ]
 
HTML5+CSS3でつくる! レスポンシブWebデザイン
単行本:¥2,786
[ 2016年3月発売 ]
 
ビジネスサイトをこれからつくる WordPressデザイン入門 サイト制作から納品までのはじめの一歩
単行本:¥2,592
Kindle版:¥2,400
[ 2016年2月発売 ]
 

コメントを書く







コメント内容