Javascript js脚本文件中的WordPress路径url
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5221630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WordPress path url in js script file
提问by Cam
I added custom script:
我添加了自定义脚本：
wp_enqueue_script('functions', get_bloginfo('template_url') . '/js/functions.js', 'search', null, false);
It works great, except in the functions.jsI have:
它工作得很好，除了functions.js我有：
Reset.style.background = "url('../images/searchfield_clear.png') no-repeat top left";
This used to work before, until I changed to pretty permalinks and .htaccess
这曾经有效，直到我改为漂亮的永久链接和 .htaccess
The folder hierarchy is like:
文件夹层次结构如下：
themename/js themename/images(the images and js folder are in themename folder)
themename/js themename/images（图像和js文件夹在themename文件夹中）
I tried ../images - ./image - /images
我试过 ../images - ./image - /images
Normally it should go back 1 level wherever the js file is located....
通常它应该在 js 文件所在的任何地方返回 1 级......
I don't want to use full path.
我不想使用完整路径。
Is there another way that WordPress can recognize in the javascript file to have the correct path?
WordPress 是否可以通过另一种方式识别 javascript 文件中的正确路径？
Currently I am just confused what I am doing wrong.
目前我只是很困惑我做错了什么。
回答by Chris
According to the Wordpress documentation, you should use wp_localize_script()in your functions.php file. This will create a Javascript Object in the header, which will be available to your scripts at runtime.
根据 Wordpress 文档，您应该wp_localize_script()在 functions.php 文件中使用。这将在标头中创建一个 Javascript 对象，该对象在运行时可用于您的脚本。
See Codex
见法典
Example:
例子：
<?php wp_localize_script('mylib', 'WPURLS', array( 'siteurl' => get_option('siteurl') )); ?>
To access this variable within in Javascript, you would simply do:
要在 Javascript 中访问此变量，您只需执行以下操作：
<script type="text/javascript">
var url = WPURLS.siteurl;
</script>
回答by AJJ
You could avoid hardcoding the full path by setting a JS variable in the header of your template, before wp_head()is called, holding the template URL. Like:
您可以通过在模板的标题中设置一个 JS 变量来避免对完整路径进行硬编码，在wp_head()调用之前，保存模板 URL。喜欢：
<script type="text/javascript">
var templateUrl = '<?= get_bloginfo("template_url"); ?>';
</script>
And use that variable to set the background (I realize you know how to do this, I only include these details in case they helps others):
并使用该变量来设置背景（我知道您知道如何执行此操作，我只包含这些详细信息，以防它们帮助他人）：
Reset.style.background = " url('"+templateUrl+"/images/searchfield_clear.png') ";
回答by keithics
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 );
and in custom.js
并在 custom.js
alert(wnm_custom.template_url);
回答by Jam Risser
If the javascript file is loaded from the admin dashboard, this javascript function will give you the root of your WordPress installation. I use this a lot when I'm building plugins that need to make ajax requests from the admin dashboard.
如果 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;
}
回答by Toine Pel
For users working with the Genesis framework.
对于使用 Genesis 框架的用户。
Add the following to your child theme functions.php
将以下内容添加到您的子主题 functions.php
add_action( 'genesis_before', 'script_urls' );
function script_urls() {
?>
<script type="text/javascript">
var stylesheetDir = '<?= get_bloginfo("stylesheet_directory"); ?>';
</script>
<?php
}
And use that variable to set the relative url in your script. For example:
并使用该变量在脚本中设置相对 url。例如：
Reset.style.background = " url('"+stylesheetDir+"/images/searchfield_clear.png') ";
