Question

尝试了许多不同的技术让jquery在我的自定义wordpress主题中工作，但仍然没有任何地方。

我已经在代码末尾附近提供了两种不同的方法，其中一种方法已在这里注释。

任何人都可以看到为什么这段代码可能无效？

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');

我的测试JS（我同时使用了$和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

好像你的add_action函数中有太多参数了。

add_action应该只有4个参数，如下所示：

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

有关详细信息，请参阅WordPress documentation。

这应该是正常的工作：

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' );

请注意，没有必要单独将样式和脚本排入队列。一种方法可以使用wp_enqueue_scripts来完成这两项工作。

如果你真的想在不同的功能中分离你的风格和脚本，你应该这样叫add_action：

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');

如果要加载jQuery，请将其添加到您的函数中：

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

Answer 2

如果您可以使用这样的代码正确解决并且没有混淆，那么很容易。您忘记为脚本传递add_action。

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

add_action( 'init', 'wpb_custom_new_menu' );

function enqueue_stylesheets() {
    //For registering Styles
    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' );

    //For registering Scripts files
    wp_enqueue_script( 'jquery');
    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', 'enqueue_stylesheets' );

希望这适合你。

感谢

我无法让jQuery在wordpress中工作

2 个答案: