js脚本文件中的WordPress路径URL

时间:2011-03-07 15:40:30

标签: javascript wordpress wordpress-theming

我添加了自定义脚本:

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文件中识别出具有正确路径的另一种方式?

目前我只是对自己做错了感到困惑。

5 个答案:

答案 0 :(得分:97)

根据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>

答案 1 :(得分:61)

在调用wp_head()之前,通过在模板的标题中设置JS变量来保存模板URL,可以避免硬编码完整路径。像:

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

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

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

答案 2 :(得分:23)

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

答案 3 :(得分:2)

如果从管理信息中心加载了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;
}

答案 4 :(得分:0)

对于使用Genesis框架的用户。

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

add_action( 'genesis_before', 'script_urls' );

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

并使用该变量在脚本中设置相对URL。例如:

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