我无法让jQuery在wordpress中工作

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');
    }
});*/

});
douliao7930
douliao7930 尝试安装此插件,wordpress.org/plugins/use-google-libraries
3 年多之前 回复
douqihua6212
douqihua6212 我在控制台中收到一条错误消息,在我的js文件中说'jquery未定义'。我已经更新了问题以包括我的js
3 年多之前 回复
dtdvbf37193
dtdvbf37193 究竟是什么问题?
3 年多之前 回复
doushan1863
doushan1863 你在控制台上显示了一些错误吗?
3 年多之前 回复

2个回答



您的 add_action </ code>函数中似乎有太多参数。 </ p>

add_action </ code>应该只有4个参数,如下所示:</ p>

  add_action(string $ tag,callable $  function_to_add,int $ priority = 10,int $ accepted_args = 1)
</ code> </ pre>

参见 WordPress文档以获取更多信息。</ p>

这应该可以正常工作:</ p>

  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 / n avbarScroll.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') ;
</ code> </ pre>

请注意,不必单独将样式和脚本排入队列。 一种方法可以使用 wp_enqueue_scripts </ code>来完成。</ p>

如果你真的想在不同的函数中分离你的样式和脚本,你应该调用 add_action </ 代码>这样:</ p>

  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');
</ code> </ pre>

如果要加载jQuery,请将其添加到您的函数中:</ p>

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

展开原文

原文

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

douyunhuan9886
douyunhuan9886 我仍然没有成功
3 年多之前 回复
dongyihao1099
dongyihao1099 是的,默认情况下已经加载,除非它已在其他地方取消注册。 如果用户想要加载与jquery捆绑在一起的jquery版本,那么你的答案是好的。 或者像我所做的那样指定jQuery的特定版本。
3 年多之前 回复
douweng7308
douweng7308 在wordpress中,它已经被jquery加载了bundle。 我们不必使用它的链接。 看看我的答案将加载jquery。
3 年多之前 回复
dongzou9047
dongzou9047 更新了答案如何包含jquery,如果这是你的意思。
3 年多之前 回复
dongqie8661
dongqie8661 你得到的错误是什么? 404只用于jquery?
3 年多之前 回复
douzhanglu4591
douzhanglu4591 这仍然没有让jquery工作
3 年多之前 回复



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

  function wpb_custom_new_menu(){
register_nav_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');

//用于注册脚本文件
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');

</ code> </ pre>

希望这对您有用。</ p>

THanks </ p>
</ div>

展开原文

原文

Its easy if you can have a code like this to solve correctly and without confusiong. You have forgotten to pass add_action for your scripts.

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

Hope this works for you.

THanks

dongqu3623
dongqu3623 对不起,这仍然无效
3 年多之前 回复
drgweamoi473182981
drgweamoi473182981 如果你想加载jquery我将更新答案看看它。
3 年多之前 回复
doucheng9304
doucheng9304 谢谢,但这仍然没有让jquery工作
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐