🏔️

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

2023/12/20に公開

WordPressにおいて、JSでファイルを読み込みたいとき、パスを参照したいときに時に使います。

解決策

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

解説

動かしたいプログラムを読み込む前にget_template_directory_uri()を使ってファイルのパスを取得し変数に格納する。
その変数を動かしたいプログラムで利用します。

Discussion