WordPressテーマのJavascriptファイル内でget_template_directory_uri();の値を取得して、画像のパスを正しく指定する方法をご紹介。
JSファイル内で例えば、「../../images/sample.jpg」といった感じでパスを指定しても、WordPressでは正しく設定することができません。
そのままget_template_directory_uri();/images/sample.jpgと使えればわけないですがそれは不可能なんですよね…
じゃあどうするか？
WordPressのテンプレートファイルのJS読み込み前に、変数にget_template_directory_uri();の値を代入して、その変数を該当のJSファイルで取得すれば実現可能です！
コードはこんな感じ。
js
<script>
var path = "<?php echo get_template_directory_uri();?>";
</script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/resources/scripts/sample.js"></script>pathという変数にテーマフォルダまでのURLが入ります！
そんで、JSファイルではこのように読み込んだりすればOKですね！
JS
var swiper = new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-my-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<div class="' + className + ' Swiper-Container-Pagination-ImgBox"><div class="Swiper-Container-Pagination-ImgBox-Img" style="background:url(' + path + '/resources/images/slide-item0' + (index + 1) + '.jpg) no-repeat;background-size:cover;background-position:center;">' + '</div></div>';
},
},
});Web制作案件の作業でこのTipsに本当に救われました！
そしてこのTipsは、この記事に教えていただきました。
WordPressで外部のJavaScriptファイル上でテーマフォルダ内の画像を読み込む方法
次はこの記事！
Swiper.jsカスタマイズに役立つ記事まとめ 
【コーディング】HTML・CSS・Javascriptサンプルコード記事まとめ 
WordPressでよく使う関数スニペットまとめ
