js文件中的WordPress圖像路徑

Question

我正在創建WP Theme，正在使用光滑的滑塊，並且對於main.js文件中的nextArrow，prevArrow，不能使用圖像url路徑。

 prevArrow: '<img class="a-left control-c prev slick-prev" src="img/left-arrow.png">',
 nextArrow: '<img class="a-left control-c prev slick-prev" src="img/right-arrow.png">',

我也在js中創建了一個變量

var templateUrl = '<?= get_bloginfo("template_url"); ?>';

然后，我以這種形式調用了此變量：

prevArrow: '<img class="a-left control-c prev slick-prev" src="' + templateUrl + '/img/left-arrow.png">',

但是沒有用

Answer 1

您可以通過在wp_head()之前保持模板URL的模板標題中設置一個JS變量來避免對完整路徑進行硬編碼。 喜歡：

<script type="text/javascript">
var templateUrl = '<?= get_bloginfo("template_url"); ?>';
</script>

並使用該變量作為示例來設置背景（我知道您知道該怎么做，我只包括這些詳細信息，以防其他情況發生）：

Reset.style.background = " url('"+templateUrl+"/images/searchfield_clear.png') ";

Answer 2

在您的模板中使用如下代碼：

var templateUrl = '<?= get_template_directory_uri(); ?>';

這將使您獲得完整的URL到主題目錄，然后添加子目錄“ / img / ..”。