JS ファイル内で WordPress のテーマディレクトリまでの URL を取得する方法

はじめに

WordPressのテーマを作る際、JavaScript（JS）ファイル内で画像のパスを取得したい場面があるかと思います。

通常、WordPressのテンプレートファイル内では get_template_directory_uri() や get_stylesheet_directory_uri() を使用して画像のURLを取得できますが、JSファイル内では直接使用できません。

そこで、本記事ではJSファイル内でWordPressの画像パスを取得する方法を解説します。

そもそもの必要性

そもそも何故 JS ファイル内で WordPress のテーマディレクトリまでの URL を取得する必要があるのか。

JSファイルで ../images/sample.png みたいに相対パスを指定しても
WordPressでは正しく表示されません。

代わりに https://xxx.com/wp-content/themes/xx/images/sample.png のように絶対パスで指定する必要があります。

ただ、テスト環境で構築しており、本番環境のURLが分からない等、絶対パスで記載してもまたURLが変わる可能性があり、後に変更する必要があり面倒です。

本題

外部ファイルとして読み込んだ common.js というファイル内で WordPress のテーマディレクトリまでの URL を取得します。

外部ファイル common.js を読み込む前に get_template_directory_uri() を使ってテーマディレクトリまでのパスを取得し変数に格納します。

<script>
	var path = "<?php echo get_template_directory_uri(); ?>";
</script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/common.js"></script>

こうすること、読み込んだ common.js というファイル内で変数が利用できます。

<script>
	var img = $('<img src="' + path + '/assets/images/sample.png"/>');
</script>

これで JSファイル内で読み込んだ画像を正しく表示させることができます。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。