我无法让jQuery在wordpress中工作

Question

Tried many different techniques to get jquery working in my custom wordpress theme but still haven't got anywhere.

I've included two different methods that I've tried below near the end of the code, with one commented out here.

Can anyone see why this code might not be working?

PHP:

<?php

function wpb_custom_new_menu() {
    register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}

add_action( 'init', 'wpb_custom_new_menu' );

function enqueue_stylesheets() {
    wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
    wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Raleway:400,500,600,700');
    wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
}

/*function wp_enqeue_scripts() {
    wp_register_script('navbarScroll', home_url() . '/js/navbarScroll.js', array( 'jquery' ));
    wp_enqueue_script('navbarScroll');
    //wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
}*/

function navbar_script() {
    wp_register_script( 'jquery.navbarScroll', get_template_directory_uri() . '/js/jquery.navbarScroll.js', array( 'jquery' ) );
    wp_enqueue_script( 'jquery.navbarScroll' );
}

add_action('wp_enqueue_scripts', 'enqueue_stylesheets', 'enqueue_scripts', 'navbar_script');

My Test JS (I've used both $ and jquery):

jquery(document).ready(function() {

jquery('#jQueryTest').html('jQuery is Working');

jQuery('nav').hover(function() {
    $(this).css('display', 'none');
})

/*var a = $('nav').offset().top;

$(document).scroll(function() {
    if ($(this).scrollTop() > a)
    {   
       $(this).removeClass('nav');
       $(this).addClass('nav-scrolled');
    } else {
       $(this).removeClass('nav-scrolled');
    }
});*/

});

Answer 1

Well it seems that you have too many parameters in your add_action function.

The add_action should have only 4 arguments as follows:

add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

See WordPress documentation for more information.

That's what should be working just fine:

function enqueueScript() {

wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Raleway:400,500,600,700');
wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );


wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
wp_register_script('navbarScroll', get_stylesheet_directory_uri() . '/js/navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script('navbarScroll');
wp_register_script( 'jquery.navbarScroll', get_template_directory_uri() . '/js/jquery.navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'jquery.navbarScroll' );
}

add_action( 'wp_enqueue_scripts', 'enqueueScript' );

Note that it is not necessary to enqueue style and script separately. One method can do both by using wp_enqueue_scripts.

If you really want to separate your style and script in different function, you should call add_action this way:

add_action('wp_enqueue_scripts','wp_enqueue_scripts');
add_action( 'wp_enqueue_scripts','enqueue_stylesheets');
add_action( 'wp_enqueue_scripts','enqueue_scripts');
add_action( 'wp_enqueue_scripts','navbar_script');

If you want to load jQuery, add it to your function:

wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);