js脚本文件中的WordPress路径url答案

【问题标题】：WordPress path url in js script filejs脚本文件中的WordPress路径url
【发布时间】：2011-03-07 15:40:30
【问题描述】：

我添加了自定义脚本：

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 文件所在的任何位置....

我不想使用完整路径。

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

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

【问题讨论】：

标签： javascript wordpress wordpress-theming

【解决方案1】：

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

【讨论】：

如果您还展示了如何在 JavaScript 中获取变量，那就太好了。我知道它在链接中显示了如何，但它会提供更完整的答案。
也许文档中的这个注释也应该被提及：重要！wp_localize_script()必须在使用@注册脚本之后调用987654327@ 或 wp_enqueue_script().
> wp_add_inline_script() 是在 WP v4.5 中引入的，现在是该用例的最佳 > 实践。 wp_localize_script() 应该只在你真正想要本地化字符串时使用。

【解决方案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') ";

【讨论】：

这个解决方案工作正常，但克里斯的回答在大多数情况下更可取——我不知道 wp_localize_script() 的存在。
我发现this article 很有用。帮我实现wp_localize_script()
有什么理由在 2014 年不起作用？除了<?php 和怪异的引用风格？
<?php bloginfo("template_directory"); ?> 和 'url(' + templateUrl + '/images/path-to-image.png)' 会调整这个婴儿。

【解决方案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);

【讨论】：

这绝对是最好最简单的方法！谢谢！
我知道这是一篇旧帖子，但要获取子主题 URL，请使用 'get_stylesheet_directory_uri()' 而不是 'get_bloginfo('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;
}

【讨论】：

能否在插件文件中设置的主题functions.php中获取本地化变量？

【解决方案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') ";

【讨论】：