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

この記事は、Zennに投稿した記事を一部編集して転載したものです。

解決策

front-page.php

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

script.js

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' } //ココ
  ];
 }

解説

JavaScriptでファイルを参照する際、テンプレートディレクトリのパスを取得する必要があります。PHPでget_template_directory_uri()を変数に格納した後、別ファイルのスクリプトで利用することで対応できます。