WordPressで外部のJavaScriptファイル上でテーマフォルダ内の画像を読み込む方法

wordpressからjavascriptにデータを渡す

WordPressでテーマフォルダ内の画像を読み込む時は、というWordPressコードを書いた上でテーマフォルダまでのURLを指定して、そこからさらに繋げて画像のある場所を指定する形をとります。

HTMLファイル上で画像を読み込む時はこれで問題ないのですが、外部JavaScriptファイル上からテーマフォルダ内の画像を読み込む時は、一体どのようにすれば良いのでしょうか。

これが絶対的な正解ではないですが、一つの方法を今回ご紹介させていただきます!

外部JavaScriptファイルを読み込む前にJavaScript変数に値を渡す

WordPressにおいて、外部JavaScriptファイル上でなどのWordPressコードを書くことはできません。

そのため方法としては、外部JavaScriptを読み込みする前に、別途外部JavaScriptファイルで利用したいPHPの値をJavaScriptの変数に渡す形をとります。

上記のようにすることで、外部JavaScriptファイルでもPHPの値を事実上使用することができるようになります。

まとめ

今回は超短いですが、WordPressで外部のJavaScriptファイル上でテーマフォルダ内の画像を読み込む方法の一例についてご紹介させていただきました!

WordPressでも意外と使う機会が多いのではないかと思うので、お役に立てれば幸いです!