wp_enqueue_script引入JS失效排查：WordPress作品集开发求助

1. 修复函数拼写错误 #

你的代码里函数定义少了一个f：

unction portoflio_theme_bootstrap_scripts() {

应修正为：

function portoflio_theme_bootstrap_scripts() {

虽然你提到CSS已生效，但这个拼写错误可能导致部分脚本加载逻辑异常，优先修正。

2. 正确设置JS依赖与加载顺序 #

WordPress的wp_enqueue_script需要明确脚本间的依赖关系，否则会出现脚本未就绪就执行的问题；同时将脚本放在页面底部加载，确保DOM已渲染完成。修改后的脚本加载代码如下：

function portoflio_theme_bootstrap_scripts() {
    // 样式部分保持不变
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() .'/assets/vendor/bootstrap/css/bootstrap.min.css', array());
    wp_enqueue_style( 'bootstrap-icons', get_template_directory_uri() .'/assets/vendor/bootstrap-icons/bootstrap-icons.css', array());
    wp_enqueue_style( 'boxicons', get_template_directory_uri() .'/assets/vendor/boxicons/css/boxicons.min.css', array());
    wp_enqueue_style( 'glightbox', get_template_directory_uri() .'/assets/vendor/glightbox/css/glightbox.min.css', array());
    wp_enqueue_style( 'swiper', get_template_directory_uri() .'/assets/vendor/swiper/swiper-bundle.min.css', array());
    wp_enqueue_style( 'main-style', get_template_directory_uri() .'/assets/css/style.css', array());

    // 脚本部分添加依赖与底部加载配置
    wp_enqueue_script( 'purecounter', get_template_directory_uri() . '/assets/vendor/purecounter/purecounter_vanilla.js', array('jquery'), '', true );
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/vendor/bootstrap/js/bootstrap.bundle.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'glightbox', get_template_directory_uri() . '/assets/vendor/glightbox/js/glightbox.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'isotope-layout', get_template_directory_uri() . '/assets/vendor/isotope-layout/isotope.pkgd.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'swiper', get_template_directory_uri() . '/assets/vendor/swiper/swiper-bundle.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'waypoints', get_template_directory_uri() . '/assets/vendor/waypoints/noframework.waypoints.js', array(), '', true );
    // 自定义脚本依赖所有用到的第三方脚本，确保加载顺序正确
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/assets/js/main.js', array('jquery', 'bootstrap-js', 'swiper', 'glightbox', 'waypoints', 'purecounter', 'isotope-layout'), '', true );
}
add_action( 'wp_enqueue_scripts', 'portoflio_theme_bootstrap_scripts' );

• 最后一个参数true指定脚本在</body>前加载，避免因DOM未渲染完成导致脚本找不到目标元素。
• 为依赖jQuery的脚本添加array('jquery')依赖，WordPress会自动加载内置的jQuery版本。

3. 检查浏览器控制台错误 #

打开浏览器开发者工具（快捷键F12），切换到Console标签，重点排查两类错误：

• 404错误：说明脚本文件路径错误，检查get_template_directory_uri()是否指向正确主题目录，对应路径下是否存在目标文件。
• ReferenceError/TypeError：说明函数/变量未定义或调用了不存在的方法，通常是依赖脚本未加载或加载顺序错误导致。

4. 排查插件冲突 #

暂时禁用所有WordPress插件，测试脚本是否恢复正常。如果问题解决，再逐个启用插件，定位导致冲突的插件（尤其是缓存、优化类插件，可能会合并或延迟脚本加载引发异常）。

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