【WordPress】JavaScriptでファイルのパスを取得・利用する方法

2024/02/29

「JavaScriptでファイルを読み込みたいけど、今いる場所のパスってどうやって取得したらいいんだろう…」

WordPressにおいて、JavaScriptで画像ファイルを読み込むときに上の疑問が湧いてきました。

この記事で身につく内容

WordPressにおいて、JavaScriptで画像ファイルなどを読み込める
WordPressにおいて、JavaScriptでファイルのパスを取得する方法が分かる

WordPressにおいて、JavaScriptでファイルのパスを取得・利用する方法

早速ですが、ソースコードはこちらになります。

ソースコード

HTMLはこちら。

<script>
    var path = "<?php echo get_template_directory_uri(); ?>";
</script>

JavaScriptはこちら。

var windowwidth = window.innerWidth || document.documentElement.clientWidth || 0;
 if (windowwidth > 768){
  var responsiveImage = [//PC用の画像
   { src: path + '/files/img/fv1.jpg' }, //ココ
   { src: path + '/files/img/fv2.jpg' }, //ココ
   { src: path + '/files/img/fv3.jpg' } //ココ
  ];
 } else {
   var responsiveImage = [//タブレットサイズ（768px）以下用の画像
    { src: path + '/files/sp/img/fv1.jpg' }, //ココ
    { src: path + '/files/sp/img/fv1.jpg' }, //ココ
    { src: path + '/files/sp/img/fv1.jpg' } //ココ
  ];
 }