如何通过wp_enqueue_script确保CSS和JS文件的加载顺序与直接使用src标签一致？

遇到这种加载顺序混乱的问题很常见，主要是因为你没利用好WordPress入队函数的依赖参数，再加上当前代码里的钩子使用存在错误，咱们一步步来解决：

• 首先修正钩子使用的错误
  你现在给travel_register_styles同时绑定了wp_enqueue_scripts和wp_head，travel_register_scripts又绑定了wp_enqueue_scripts和wp_body_open——这会导致你的文件被重复加载，而且加载时机混乱。WordPress官方推荐统一使用wp_enqueue_scripts钩子来处理所有样式和脚本的入队，所以请删掉多余的action绑定，只保留：

  add_action('wp_enqueue_scripts', 'travel_register_styles');
  add_action('wp_enqueue_scripts', 'travel_register_scripts');
  

• 利用「依赖参数」精准控制加载顺序
  WordPress的wp_enqueue_style和wp_enqueue_script函数的第三个参数是依赖数组，这就是控制加载顺序的核心：如果文件A必须在文件B之后加载（或者说A依赖B），那么在入队A的时候，把B的注册handle放到这个数组里，WordPress就会自动确保B先于A加载，效果完全等价于你直接写<link>或<script>标签的顺序。

  举几个贴合你代码的例子：

  • 假设你有一个自定义CSS文件custom.css依赖bootstrap.min.css，入队时要这样写：

    function travel_register_styles(){
        // 先注册bootstrap样式
        wp_enqueue_style( 'bootstrap.min.css', get_template_directory_uri().'/assets/css/bootstrap.min.css', array(), '1.0', 'all' );
        // 第三个参数填入bootstrap的handle，确保bootstrap先加载
        wp_enqueue_style( 'custom.css', get_template_directory_uri().'/assets/css/custom.css', array('bootstrap.min.css'), '1.0', 'all' );
        // 其他样式也按这个规则，依赖谁就把谁的handle放进数组
    }
    

  • 对于脚本，比如jquery-ui本身依赖WordPress自带的jquery，你的自定义脚本app.js又依赖jquery-ui，那入队时：

    function travel_register_scripts() {
        // 把'jquery'加入依赖数组，WordPress会自动先加载自带的jquery
        wp_enqueue_script('jquery-ui', get_template_directory_uri().'/assets/js/jquery-ui.js', array('jquery'), '1.0', false);
        // 依赖jquery-ui，确保它先于app.js加载
        wp_enqueue_script('app.js', get_template_directory_uri().'/assets/js/app.js', array('jquery-ui'), '1.0', false);
        // 其他脚本同理
    }
    

• 保持加载位置的一致性
  wp_enqueue_script的第五个参数控制脚本加载位置：false表示放在<head>标签内，true表示放在</body>标签前。如果你直接用<script src>时是放在<head>里，就保持false；如果是放在页面底部，就设为true——这能让加载位置和你原始写法一致，同时不影响依赖控制的顺序。

• 验证最终顺序
  修改完成后，打开浏览器开发者工具的「网络」标签，刷新页面，查看CSS和JS的加载顺序，应该就和你直接写<link>/<script>标签的顺序完全一致了。

备注：内容来源于stack exchange，提问作者user1207289