js 指令碼檔案中的 WordPress 路徑 url

問題描述

我新增了自定義指令碼：

wp_enqueue_script('functions', get_bloginfo('template_url') . '/js/functions.js', 'search', null, false);

它的工作很好，除了在 functions.js 我有：

Reset.style.background = "url('../images/searchfield_clear.png') no-repeat top left";

這以前工作，直到我改變為漂亮的永久連結和.htaccess

資料夾層次結構如下：

themename/js themename/images (the images and js folder are in themename folder)

我試過../images – ./image – /images

通常，應該在 js 檔案所在的位置返回 1 級….

我不想使用完整路徑。

有沒有另一種方式，WordPress 可以在 javascript 檔案中識別具有正確的路徑？

目前我只是困惑我做錯了什麼

最佳解決思路

您可以透過在呼叫 wp_head()之前設定模板標題中的 JS 變數來避免硬編碼完整路徑，並儲存模板 URL 。喜歡：

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

並使用該變數設定背景 (我意識到你知道如何做到這一點，我只包括這些細節，以防他們幫助別人)：

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

次佳解決思路

根據 Wordpress 檔案，您應該在您的 functions.php 檔案中使用 wp_localize_script()。這將在標題中建立一個 JavaScript 物件，這將在執行時可用於您的指令碼。

見 Codex

例：

<?php wp_localize_script('mylib', 'WPURLS', array( 'siteurl' => get_option('siteurl') )); ?>

要在 Javascript 中訪問此變數，您只需執行以下操作：

<script type="text/javascript">
    var url = WPURLS.siteurl;
</script>

第三種解決思路

    wp_register_script('custom-js',WP_PLUGIN_URL.'/PLUGIN_NAME/js/custom.js',array(),NULL,true);
    wp_enqueue_script('custom-js');

    $wnm_custom = array( 'template_url' => get_bloginfo('template_url') );
    wp_localize_script( 'custom-js', 'wnm_custom', $wnm_custom );

和 custom.js

alert(wnm_custom.template_url);

第四種思路

如果從管理控制面板中載入了 javascript 檔案，此 JavaScript 函式將為您提供 WordPress 安裝的根目錄。當我正在構建需要從管理資訊板進行 ajax 請求的外掛時，我使用這個很多。

function getHomeUrl() {
  var href = window.location.href;
  var index = href.indexOf('/wp-admin');
  var homeUrl = href.substring(0, index);
  return homeUrl;
}

參考文獻

WordPress path url in js script file

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

js 指令碼檔案中的 WordPress 路徑 url