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