【WordPress】　jsファイル内で画像のパスを取得する方法

というわけで今回はWordPress実装時、jsファイル内で画像のパスを取得する方法についてお話します。

状況説明

実案件でどういう状況だった？？

今回実案件で出くわしたのはどういう状況だったか説明します。

静的HTMLをWordPressに実装していく案件だったのですが、
一通りimg内の画像パスを「get_theme_file_uri」で書き出し、終わった～と思ったら
トップへ戻るボタンだけ画像が表示されてません…。

何度見返してもHTMLファイル内に書きこぼしはありません。
よくよく見てみると、jsファイル内に画像ファイルパスの記述がありました！！

良かった～と思ったのも束の間、jsファイルで画像パスってどうやって取得するんだ？？
この問題にぶち当たりました。

phpファイルで使える「get_theme_file_uri」などはjsファイルでは当然使えず。
困ってしまいました。

解決方法

①変数を使用する

今回の解決となった方法をお伝えします。
それはjsファイルに「get_template_directory_uri」の情報を渡してあげるというもの。

jsファイルで「../../images/sample.png」みたいな感じで相対パスを指定しても
WordPressでは正しく設定することができません。

ではどうするか！？

WordPressのテンプレートファイルのjs読み込み前に、変数に「get_template_directory_uri」を代入して
その変数をjsファイルで取得すれば読み込むことができます。

実際に使ったコードがこちら↓

<script>
    var path ="<?php echo get_template_directory_uri(); ?>";
</script>
<script src="<?php echo esc_url(get_theme_file_uri('/common/js/scrolltopcontrol.js')); ?>"></script>

該当のjsの前に、pathという変数を用意して「get_template_directory_uri」を代入しております。
（変数名はなんでも良いです）

そして設定した変数を該当のjsファイルにて使用すればOKです！！

その時のコードがこちら↓

controlHTML: '<img src="'+ path + '/images/scrollup.webp" style="width:48px; height:48px;" />'

「controlHTML」というのはjQueryのプラグインだそうです。
「path」という変数で「get_template_directory_uri」の情報を取得し、残りの取得したい画像へのパスを付け加えると
無事画像が表示されました！！

②絶対パスで取得する

そもそも相対パスではなく絶対パスで取得すれば表示されるようです。

相対パス・・・「../../images/sample.png」みたいな形

絶対パス・・・「https ://oooo.co.jp/wp-content/themes/〇〇/images/〇〇」みたいな形

ただ、今回は自身のローカル環境で構築しており、本番環境のURLもわからなかった為
絶対パスで記載してもまたURLが変わる可能性があり、その度に変更するのも面倒くさいというのもありました。

まとめ

今回はjsファイル内で画像のパスを取得する方法について説明しました！
実案件にそこまで頻出しないかもしれませんが知っとくといざという時に役立つはずです。

というわけで今回はここまで！ここまでご覧いただきありがとうございました！！