js脚本文件中的WordPress路径URL

Question

我添加了自定义脚本:

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文件夹位于theameame文件夹中)

我试过../images - ./image - /images

通常它应该返回到js文件所在的任何位置的1级....

我不想使用完整路径.

WordPress是否有另一种方法可以在javascript文件中识别出正确的路径？

目前我很困惑我做错了什么.

Answer 1

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

见食典委

例:

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

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

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

Answer 2

您可以通过在模板的标题中设置JS变量来避免硬编码完整路径,然后wp_head()调用模板URL.喜欢:

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

并使用该变量来设置背景(我意识到你知道如何做到这一点,我只包括这些细节,以防他们帮助其他人):

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

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

Answer 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;
}