wp_enqueue_script与script标签加载脚本：UI数量更新失效问题

核心问题分析 #

1. 重复注册脚本引发冲突 #

你将travel_register_scripts同时绑定到wp_enqueue_scripts和wp_body_open两个钩子上，导致所有脚本被重复加载两次。重复加载的脚本会引发变量覆盖、事件绑定冲突，直接导致数量按钮的交互逻辑失效。

2. 冗余的依赖链设置 #

你的脚本依赖关系设置过于不合理，比如quantity-input.js本质只需要依赖jQuery，但你却将其依赖设为jquery.ripples-min，这会不必要地延后它的加载时机，甚至可能因为前置脚本的异常间接影响它的执行。

3. WordPress jQuery兼容问题 #

WordPress默认的jQuery处于noConflict模式，若你的quantity-input.js直接使用$而未做兼容处理，会导致jQuery无法被正确调用，交互逻辑自然失效。

修复步骤 #

步骤1：移除重复钩子绑定，修正依赖关系 #

将脚本注册代码移到主题的functions.php中，只保留wp_enqueue_scripts钩子，并修正依赖链：

function travel_register_scripts() {
  wp_deregister_script('jquery');
  // 用标准handle名注册jQuery，避免依赖混乱
  wp_enqueue_script('jquery', get_template_directory_uri().'/assets/js/jquery-3.4.1.min.js',array(),'3.4.1', false);
  wp_enqueue_script('jquery-ui', get_template_directory_uri().'/assets/js/jquery-ui.js', array('jquery'), '1.0', false);
  wp_enqueue_script('popper.min', get_template_directory_uri().'/assets/js/popper.min.js', array('jquery'), '1.0', false);
  wp_enqueue_script('bootstrap.min', get_template_directory_uri().'/assets/js/bootstrap.min.js', array('popper.min'), '1.0', false);
  wp_enqueue_script('bootstrap-select.min', get_template_directory_uri().'/assets/js/bootstrap-select.min.js', array('bootstrap.min'), '1.0', false);
  wp_enqueue_script('moment.min', get_template_directory_uri().'/assets/js/moment.min.js', array(), '1.0', false);
  wp_enqueue_script('daterangepicker', get_template_directory_uri().'/assets/js/daterangepicker.js', array('moment.min', 'jquery'), '1.0', false);
  wp_enqueue_script('owl.carousel.min', get_template_directory_uri().'/assets/js/owl.carousel.min.js', array('jquery'), '1.0', false);
  wp_enqueue_script('jquery.fancybox.min', get_template_directory_uri().'/assets/js/jquery.fancybox.min.js', array('jquery'), '1.0', false);
  wp_enqueue_script('jquery.countTo.min', get_template_directory_uri().'/assets/js/jquery.countTo.min.js', array('jquery'), '1.0', false);
  wp_enqueue_script('animated-headline', get_template_directory_uri().'/assets/js/animated-headline.js', array('jquery'), '1.0', false);
  wp_enqueue_script('jquery.ripples-min', get_template_directory_uri().'/assets/js/jquery.ripples-min.js', array('jquery'), '1.0', false);
  // 让数量脚本直接依赖jQuery，恢复合理加载时机
  wp_enqueue_script('quantity-input', get_template_directory_uri().'/assets/js/quantity-input.js', array('jquery'), '1.0', false);
  wp_enqueue_script('main', get_template_directory_uri().'/assets/js/main.js', array('jquery'), '1.0', false);
}
add_action('wp_enqueue_scripts', 'travel_register_scripts');

步骤2：修复脚本的jQuery兼容问题 #

打开quantity-input.js，将所有使用$的代码包裹成兼容写法：

jQuery(document).ready(function($) {
  // 这里保留原有的数量按钮交互代码
});

或者使用立即执行函数包裹：

(function($) {
  // 数量按钮交互逻辑
})(jQuery);

步骤3：规范front-page.php模板结构 #

不要在front-page.php中手动编写完整HTML结构，改用WordPress标准模板继承：

<?php /* Template Name: HomePage */ ?>
<?php get_header(); ?>

<!-- 页面自定义内容 -->

<?php get_footer(); ?>

这样WordPress会自动处理脚本的加载位置，避免手动编写head标签引发的冲突。

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