テーマフォルダの画像を表示するときに便利な関数

常用していた画像の呼び出し方法だと、srcsetプロパティを使った時にちょっと読みにくくなるので、get_theme_file_uri() 関数を使って書き換えてみました。

WordPressのテーマ作成で、テーマテンプレート内の画像を表示する方法としてget_stylesheet_uri関数を使用してきました。こういう感じですね。

<img class="site-banner"
   src="<?php echo get_stylesheet_directory_uri(); ?>/img/site-banner.png"
   alt="<?php bloginfo( 'name' ); ?>"
>

get_stylesheet_directory_uri()と書いてから、ディレクトリを続けて書いてファイル名。これで当サイトならimgのsrcプロパティは下記のように出力されます。

https://autumnsky.jp/wp-contents/themes/shirohanada/img/site-banner.png

ですが、レスポンシブ対応で複数の画像を指定する際は、この方法だと少し読みにくいように感じます。
最近だと画像やアイコンをassetsフォルダの中に、さらに分類していたりするのでパス指定も長くなりがちです。
参考: レスポンシブ画像の作り方 – 解像度の切り替え: 同じサイズ、異なる解像度  Mozzila

<img class="site-banner"
src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/site-banner.png"
srcset="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/site-banner.png x1,
<?php echo get_stylesheet_directory_uri(); ?>/assets/img/site-banner@x2.png x2"
alt="<?php bloginfo( 'name' ); ?>" >

このように、すこし読みにくいように思います。

そこで、WordPress4.7以降で追加された get_theme_file_uri関数を使います。

<?php echo get_theme_file_uri( "/img/site-banner.png" ); ?>

get_theme_file_uri関数は<?php  ?>の後ろに書いていたファイルパスを引数として()内に指定できます。
上記のコードは、get_stylesheet_directory_uri関数を使った時と同じように下記の通り出力されます。

https://autumnsky.jp/wp-contents/themes/shirohanada/img/site-banner.png

srcsetプロパティを指定する際に
get_theme_file_uri関数を使うと、このように書き換えられます。

<img class="site-banner"
   src="<?php echo get_theme_file_uri( "/assets/img/site-banner.png" ); ?>"
   srcset="<?php echo get_theme_file_uri( "/assets/img/site-banner.png" ); ?> x1,
   <?php echo get_theme_file_uri( "/assets/img/site-banner@x2.png" ); ?> x2"
   alt="<?php bloginfo( 'name' ); ?>"
>

get_stylesheet_directory_uriを使うよりもスッキリと書けます。

参考にしたサイト