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(图像和js文件夹位于themename文件夹中)

我尝试了../images-./image-/ images

通常, 无论js文件位于何处, 它都应返回1级。

我不想使用完整路径。

WordPress可以通过另一种方法识别javascript文件中的正确路径吗？

目前, 我只是对自己在做错的事情感到困惑。

#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') ";

#2

根据Wordpress文档, 你应该在functions.php文件中使用wp_localize_script()。这将在标头中创建一个Javascript对象, 该脚本对象将在运行时可供你使用。

参见法典

例子：

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

要在Javascript中访问此变量, 只需执行以下操作：

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

#3

    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);

#4

如果从管理控制台加载了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;
}

#5

适用于使用Genesis框架的用户。

将以下内容添加到你的子主题functions.php中

add_action( 'genesis_before', 'script_urls' );

function script_urls() {
?>
    <script type="text/javascript">
     var stylesheetDir = '<?= get_bloginfo("stylesheet_directory"); ?>';
    </script>
<?php
}

并使用该变量在脚本中设置相对网址。例如：

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