WordPress主题无法入队main.js脚本且无错误提示

问题描述 #

开发WordPress主题时，main.js脚本无法正常被入队加载，但浏览器控制台未显示任何404或其他错误。相关入队代码如下：

function turboweb_studio54_scripts() {
    // Avoid loading these resources in the admin area
    if (!is_admin()) {
        
        // CSS Enqueue
        
        // Load Bootstrap CSS first
        wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/bootstrap-5.3.1/css/bootstrap.min.css', array(), '5.3.1');
        
        // Main theme styles, dependent on Bootstrap CSS
        wp_enqueue_style('turboweb-studio54-style', get_stylesheet_uri(), array('bootstrap-css'), _S_VERSION);
        
        // Add right-to-left language support
        wp_style_add_data('turboweb-studio54-style', 'rtl', 'replace');
        
        // Navbar styles, dependent on the main theme styles
        wp_enqueue_style('turboweb-studio54-navbar', get_template_directory_uri() . '/assets/css/navbar.css', array('turboweb-studio54-style'), _S_VERSION);
        
        // Additional main styles, dependent on navbar styles
        wp_enqueue_style('turboweb-studio54-main', get_template_directory_uri() . '/assets/css/main.css', array('turboweb-studio54-navbar'), _S_VERSION);
        
        // JS Enqueue
        
        // Load Bootstrap JS first, dependent on jQuery
        wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/bootstrap-5.3.1/js/bootstrap.bundle.min.js', array('jquery'), '5.3.1', true);
        
        // Theme navigation scripts
        wp_enqueue_script('turboweb-studio54-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true);
        
       // Main theme scripts
        wp_enqueue_script('turboweb-studio54-main-js', get_template_directory_uri() . '/assets/js/main.js', array(), _S_VERSION, true);
        
        // GSAP for animations, dependent on jQuery
        wp_enqueue_script('gsap-tweenmax', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js', array('jquery'), null, true);
        
        // Additional scripts for threaded comments, only if needed
        if (is_singular() && comments_open() && get_option('thread_comments')) {
            wp_enqueue_script('comment-reply');
        }
    }
}
add_action('wp_enqueue_scripts', 'turboweb_studio54_scripts', 100);

已完成的排查步骤 #

• 确认main.js文件存在于指定路径/assets/js/main.js中，路径无误
• 尝试调整资源入队顺序，无效
• 将main.js重命名为tw-script.js排查命名冲突，问题依旧
• 在add_action中设置更高优先级（100），未解决问题
• 检查浏览器控制台，未发现main.js的404错误

可能的解决方案 #

1. 验证_S_VERSION常量是否正确定义

如果_S_VERSION未被定义，会导致WordPress使用空版本号，可能在缓存或版本校验时出现异常。在主题的functions.php开头添加：

define( '_S_VERSION', '1.0.0' );

2. 检查主题模板是否调用wp_footer()

因为你的main.js设置了在页脚加载（最后一个参数为true），如果主题的footer.php中没有调用wp_footer()函数，WordPress无法输出页脚的脚本标签。确保footer.php的</body>标签前有：

<?php wp_footer(); ?>

3. 禁用脚本压缩/合并插件

如果站点启用了缓存、脚本压缩或合并类插件（如WP Rocket、Autoptimize），可能会将main.js合并或忽略。临时禁用这类插件，查看脚本是否正常加载。

4. 检查脚本依赖关系

虽然你的main.js设置了空依赖数组，但如果脚本内部依赖其他未加载的资源（比如jQuery或Bootstrap），可能导致脚本执行异常，但不会显示加载错误。可以尝试添加依赖：

wp_enqueue_script('turboweb-studio54-main-js', get_template_directory_uri() . '/assets/js/main.js', array('jquery', 'bootstrap-js'), _S_VERSION, true);

5. 启用WordPress调试模式排查隐藏错误

在wp-config.php中设置调试模式，查看是否有未显示的PHP错误：

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );

调试日志会生成在wp-content/debug.log，查看是否有与脚本入队相关的错误信息。

6. 直接验证脚本路径输出

在入队代码后添加临时调试代码，确认路径是否正确：

echo get_template_directory_uri() . '/assets/js/main.js';
die();

访问前端页面，查看输出的路径是否与实际文件的访问路径一致。

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