WordPress自定义主题无法Enqueue JavaScript脚本问题求助

核心排查与修复点： #

• 必须确保主题模板包含wp_head()和wp_footer()
  你把脚本的最后参数设为true，这会让WordPress把脚本输出在</body>标签前，因此你的footer.php文件必须在</body>之前添加<?php wp_footer(); ?>；同时header.php的</head>之前要加<?php wp_head(); ?>。样式能正常加载说明wp_head()没问题，但JS没出现在源码里，大概率是漏加了wp_footer()。

• 检查文件路径是否匹配
  注意get_template_directory_uri()和get_stylesheet_directory_uri()的区别：

  • 父主题下两个函数效果一致；
  • 子主题下，get_template_directory_uri()指向父主题目录，get_stylesheet_directory_uri()指向子主题目录。
    确认你的js文件夹和文件位置，比如子主题环境下，把JS路径改成get_stylesheet_directory_uri() . '/js/custom.js'试试。另外可以直接在浏览器地址栏输入脚本的完整URL，验证是否能访问到文件，出现404则说明路径错误。

• 验证函数是否被正确触发
  在add_theme_scripts函数中添加调试代码：

  function add_theme_scripts() {
      echo '<script>console.log("脚本函数已触发")</script>';
      // 原有代码...
  }
  

  刷新页面打开控制台，如果看不到这句话，说明函数未被触发，检查函数名拼写或add_action的参数是否有误。

• 关于jQuery替换的建议
  不建议强制注销WordPress内置的jQuery，官方版本与大部分插件兼容性更好。如果一定要替换，确保你的jquery.min.js路径正确，且版本号有效。

修正后的参考代码（子主题环境）： #

<?php
function add_theme_scripts() {
    wp_enqueue_style('default-style', get_stylesheet_directory_uri() .'/style.css');
    wp_enqueue_style('bootstrap-style', get_stylesheet_directory_uri() .'/css/bootstrap.min.css');

    // 如需替换jQuery，使用子主题路径
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', get_stylesheet_directory_uri() . '/js/jquery.min.js', array(), '3.0.0', true);

    wp_enqueue_script('bootstrap-script', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');

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