将javascript添加到wordpress主题

Question

我是wordpress的新手。我需要使用wordpress创建一个网站，所以我需要将javascript文件添加到wordpress主题..

例如我想要的是当我滚动我的wordpress网站的页面时，标题的背景颜色将会改变..为此我使用javascript但它不适合我..

我使用如下，

的functions.php

function my_theme_enqueue_script() {
wp_register_script( 'scrolldown' , get_template_directory_uri() . '/js/scroll.js' );
  wp_enqueue_script( 'scrolldown');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_script' );

scroll.js

$(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
        $(".site-header").addClass("active");
    } else {

       $(".site-header").removeClass("active");
    }
});

的style.css

.site-header {
      height: 100px;
      width: 1200px;
      transition: all 0.2s ease-in-out;
      z-index:10000;
      margin-left:-90px;
      position:fixed;
      background-color: transparent;
      margin-top:-70px;  
}
.site-header.active { 
     background: #353535 !important;
}

我不知道我做错了什么..任何人都可以帮助我解决我的问题..

当我进入控制台时，我在屏幕截图下方有一个窗口，

Answer 1

第1步：

你的functions.php中的

替换了这个：

function my_theme_enqueue_script() {
wp_register_script( 'scrolldown' , get_template_directory_uri() . '/js/scroll.js' );
  wp_enqueue_script( 'scrolldown');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_script' );

用这个：

function my_theme_enqueue_script() {
wp_enqueue_script( 'scrolldown' , get_template_directory_uri() . '/js/scroll.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_script', 50, 0 );

STEP：2

在你的scroll.js中替换为：

$(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
        $(".site-header").addClass("active");
    } else {

       $(".site-header").removeClass("active");
    }
});

用这个：

(function($){ 
$(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
        $(".site-header").addClass("active");
    } else {

       $(".site-header").removeClass("active");
    }
});
})(jQuery)