WordPress中Logo滚动缩放需手动引入jQuery的问题及正确添加方式

1. 不要手动添加外部jQuery链接 #

WordPress默认已经集成了jQuery，手动引入外部版本会导致重复加载，大概率引发版本冲突、脚本报错、页面加载变慢等问题。你的脚本之前必须加外部链接才生效，核心原因是WordPress自带的jQuery默认采用兼容模式——它禁用了$符号，只能用jQuery调用，而你的脚本直接用了$，所以没生效。

2. 修复脚本兼容WordPress的两种方法 #

不用加外部链接，修改脚本写法就能正常运行：

• 方法一：直接把所有$替换成jQuery

  jQuery(document).on('scroll', function() {
      jQuery('.logo img').toggleClass('small', jQuery(document).scrollTop() >= 10);
  });
  

• 方法二：用自执行函数包裹，保留$写法

  (function($) {
      $(document).on('scroll', function() {
          $('.logo img').toggleClass('small', $(document).scrollTop() >= 10);
      });
  })(jQuery);
  

3. WordPress中添加自定义脚本的正确姿势 #

不建议直接在头部硬编码脚本，规范做法是通过主题函数注册加载：

• 步骤1：在你的主题目录下新建js文件夹，创建logo-scroll.js文件，把上面修复好的脚本内容粘贴进去。
• 步骤2：打开主题的functions.php文件，添加以下代码：

  function custom_logo_scroll_script() {
      // 注册脚本，指定依赖WordPress自带的jQuery
      wp_register_script('logo-scroll-script', get_template_directory_uri() . '/js/logo-scroll.js', array('jquery'), '1.0', true);
      // 加载脚本
      wp_enqueue_script('logo-scroll-script');
  }
  add_action('wp_enqueue_scripts', 'custom_logo_scroll_script');
  

  这样WordPress会自动在页面底部（最后一个true参数控制）加载脚本，并且确保jQuery已经提前加载，不会出现依赖问题。

如果只是临时测试，也可以在主题的footer.php文件末尾（</body>标签之前）添加修复后的脚本代码，同样能正常运行。

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