WordPress传递路径给JS函数时出现/NaN/路径问题求助

嘿，这个问题我太熟了！问题根源就在你写的JavaScript代码里的多余加号上，我来给你一步步拆解解决：

为什么会出现/NaN/？ #

你代码里写的+WPURLS.siteurl+是错误的写法！这里的加号（+）是JavaScript的数字加法运算符，但WPURLS.siteurl是字符串类型的站点URL。当你在字符串变量前后加加号时，JS会尝试把这个字符串转换成数字，转换失败后就得到了NaN（Not a Number），最终拼接出来的路径就变成了/NaN/images/...。

修正后的代码 #

把变量前后多余的加号去掉，直接用字符串拼接的方式（JS里字符串拼接确实用加号，但不需要在变量前后额外加）：

// 简化重复的ready写法，二选一即可
jQuery(document).ready(function() {
  $('#home').backstretch([
    WPURLS.siteurl + "/images/home-bg-slideshow1.jpg",
    WPURLS.siteurl + "/images/home-bg-slideshow2.jpg" // 补全你其他的轮播图路径
  ]);
});

额外的小提示 #

1. 确保wp_localize_script的调用顺序正确：必须先注册/入队你的自定义JS脚本，再调用本地化函数，否则WPURLS变量可能无法被正确注入页面。比如你的PHP代码应该是这样的：

   // 先注册并加载你的自定义JS文件
   wp_enqueue_script('custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
   // 再传递站点URL变量
   wp_localize_script('custom', 'WPURLS', array(
     'siteurl' => get_site_url() // 用get_site_url()比get_option('siteurl')更简洁
   ));
   

2. 你原来的代码里$(function(){和jQuery(document).ready(function() {是完全等价的，重复写没必要，选一种风格保持代码简洁就好。

内容的提问来源于stack exchange，提问作者Michael Perez