嵌入Footer.php的jQuery代码仅登录WP后台生效，报错原因咨询

我将以下代码添加至WordPress的Footer.php文件中：

<script>
    jQuery(document).ready(function($) {
        let aboutMe = new Waypoint({
                                element: document.querySelector('.about-me'),
                                offset:'250px',
                                handler: function(direction) {
                                    setTimeout(() => {
                                        $('.about-me__img').removeClass('hidden');
                                    }, 100);
                                    setTimeout(() => {
                                        $('.about-me__img').addClass('display_decorator');
                                        $('.my-projects').removeClass('hidden');
                                    }, 500);
                                    setTimeout(() => {
                                        $('.about-me__description').removeClass('hidden');
                                    }, 1000);
                                    
                                }
                        })

    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        autoplay: true,
        avigationText: ["Dalej","Wstecz"],
        responsive:{
            0:{
                items:1
            },
            650:{
                items:2
            },
            1000:{
                items:3
            }
        }
    })
});
</script>

这段代码仅在登录wp-admin后台时能正常运行，未登录时会出现两个报错：

• Uncaught TypeError: Cannot read properties of undefined (reading 'fn')
• VM6552:2 Uncaught ReferenceError: jQuery is not defined

想请教这是什么原因？

核心原因 #

1. jQuery未在前端加载：登录WordPress后台时，系统会默认加载jQuery供后台界面使用；但前端未登录状态下，你的主题或优化插件可能禁用了jQuery的自动加载，或者代码执行顺序早于jQuery加载完成，导致jQuery is not defined报错。
2. 依赖脚本加载异常：Cannot read properties of undefined (reading 'fn')的报错，说明Owl Carousel、Waypoint这类依赖jQuery的插件，要么没在前端加载，要么加载顺序在jQuery之前。登录后台时这些插件可能被后台脚本顺带加载，但前端未登录时缺失。

解决步骤 #

• 确保jQuery在前端正常加载：
  WordPress官方推荐用wp_enqueue_script管理脚本加载，不要直接在Footer.php硬写代码。在主题的functions.php中添加以下代码：

  function load_frontend_jquery() {
      if (!is_admin()) {
          wp_enqueue_script('jquery');
      }
  }
  add_action('wp_enqueue_scripts', 'load_frontend_jquery');
  

• 按顺序加载依赖脚本：
  Waypoint和Owl Carousel都依赖jQuery，必须在jQuery加载完成后再加载它们。同样用wp_enqueue_script管理，示例代码如下：

  function load_custom_dependencies() {
      // 加载jQuery
      wp_enqueue_script('jquery');
      // 加载Waypoint脚本（替换为你实际的文件路径）
      wp_enqueue_script('waypoint', get_template_directory_uri() . '/js/waypoints.min.js', array('jquery'), '4.0.1', true);
      // 加载Owl Carousel脚本（替换为你实际的文件路径）
      wp_enqueue_script('owl-carousel', get_template_directory_uri() . '/js/owl.carousel.min.js', array('jquery'), '2.3.4', true);
      // 加载自定义脚本（把原代码放到custom.js中，替换路径）
      wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery', 'waypoint', 'owl-carousel'), '1.0', true);
  }
  add_action('wp_enqueue_scripts', 'load_custom_dependencies');
  

  将原来的自定义JS代码，放到主题目录下新建的js/custom.js文件中，WordPress会自动按依赖顺序加载脚本，避免未定义问题。
• 避免修改主题核心文件：直接编辑Footer.php这类主题核心文件，在主题更新时会丢失修改内容，推荐使用子主题或上述脚本加载方法添加自定义代码。

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