WordPress无法加载自定义JavaScript文件问题求助

先看你贴的代码里几个明显的坑，我帮你逐一拆解排查：

1. 重复使用相同的脚本Handle #

你两次用了infite_scroll作为脚本的标识（wp_enqueue_script的第一个参数）：

wp_enqueue_script( 'infite_scroll', get_bloginfo( 'stylesheet_directory' ) . '/js/vendor/jquery-3.1.1.min.js', array( 'jquery' ), '3.1.1', true );
// ...
wp_enqueue_script( 'infite_scroll', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.infi...'

WordPress会直接覆盖相同标识的脚本，第二次调用会把第一个脚本挤掉，导致它根本不会被加载。每个脚本必须有唯一的标识，比如把第一个改成jquery-3.1.1-custom，第三个改成infinite-scroll-custom。

2. 路径函数的最佳实践 #

get_bloginfo('stylesheet_directory')返回的是服务器本地路径，虽然偶尔能用，但更可靠的是用get_stylesheet_directory_uri()——它直接返回主题目录的公开URL，避免路径解析出错：

// 替换前
get_bloginfo( 'stylesheet_directory' ) . '/js/vendor/jquery-3.1.1.min.js'
// 替换后
get_stylesheet_directory_uri() . '/js/vendor/jquery-3.1.1.min.js'

3. 文件名拼写&截断问题 #

代码里能看到两处明显的错误：

• bower.iostope.masonry.js → 应该是bower.isotope.masonry.js（iostope拼写错误，正确是isotope）
• jquery.infi... → 这是截断的文件名，必须写完整（比如jquery.infinite-scroll.js），否则WordPress找不到文件

4. 依赖&重复加载问题 #

• 你额外加载了jQuery 3.1.1，但WordPress本身已经自带了jQuery。除非你有特殊需求必须用这个版本，否则完全没必要重复加载——反而会导致冲突。如果一定要用自定义版本，得先注销自带的：

add_action( 'wp_enqueue_scripts', function() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', get_stylesheet_directory_uri() . '/js/vendor/jquery-3.1.1.min.js', array(), '3.1.1', true );
    wp_enqueue_script( 'jquery' );
}, 10 );

• 如果bower.isotope.masonry.js依赖Isotope核心库，你得确保先加载核心库，再加载这个扩展，还要把核心库的标识写进依赖数组里。

5. 基础排查步骤 #

• 打开浏览器开发者工具（F12），切到Network标签刷新页面：
  • 如果JS文件显示404，说明路径完全错了，核对主题目录下的文件位置是否和代码一致
  • 如果是200但脚本不生效，看Console标签有没有报错（比如变量未定义，大概率是依赖没加载对）
• 清掉WordPress缓存和浏览器缓存，有时候缓存会让你的修改不生效

修正后的示例代码 #

add_action( 'wp_enqueue_scripts', '_enqueue_home_scripts', 20 );
function _enqueue_home_scripts() {
    // 仅当必须用自定义jQuery时才保留这段
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', get_stylesheet_directory_uri() . '/js/vendor/jquery-3.1.1.min.js', array(), '3.1.1', true );
    wp_enqueue_script( 'jquery' );

    // Isotope masonry扩展（假设已提前加载Isotope核心）
    wp_enqueue_script( 'isotope-masonry', get_stylesheet_directory_uri() . '/js/bower.isotope.masonry.js', array( 'jquery' ), '1.0.0', true );

    // 无限滚动脚本，用唯一标识
    wp_enqueue_script( 'infinite-scroll-custom', get_stylesheet_directory_uri() . '/js/jquery.infinite-scroll.js', array( 'jquery' ), '1.0.0', true );
}

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