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（images和js文件夹位于themename文件夹中）

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

通常，无论 js 文件所在的位置，它都应该返回 1 级....

我不想使用完整路径。

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

目前我只是很困惑我做错了什么。

Answer 1

根据 WordPress 文档，您应该在您的文件中使用 wp_localize_script()函数.php 文件。这将在标头中创建一个 Javascript 对象，该对象将在运行时可供您的脚本使用。

请参阅 Codex

示例：

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

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

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

Answer 2

在调用 wp_head() 之前，您可以通过在模板标头中设置 JS 变量来避免硬编码完整路径，并保存模板 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;
}

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

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

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

Answer 6

我已经使用这种方法让它工作了...

1：将回调函数添加到标头中

function custom_header() {
// Define siteURL for JS
echo '<script>var url = "'.home_url().'";</script>';
}
add_action( 'wp_head', 'custom_header' );

2：在任何所需的 JS 文件中调用 URL，如下所示：

$.infinitescroll.defaults = {
      loading: {
        msgText: 'Loading...',
        img: "" + url + "/path_to_folder/loader.gif",
      }

希望它可以帮助任何想要包含站点 URL 的人在内部 JS 或 CSS 文件中。