简体   繁体   中英

Loading Jquery in Wordpress

I have a Jquery script that is entered into the custom code section of my wordpress theme. As the script did not run initially, I had to load Jquery dependency through functions.php . I read about this method from Step 4 of this link: ( http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/ ). While this had allowed the Jquery script to run. It affected how other parts of my website was running. For example, drop down boxes could no longer function properly. (Instead of clicking the dropdown icon once to display options and then scrolling over the option they want, users now need to click and hold their mouse over the dropdown icon to display the options.)

I was just wondering if I am loading Jquery the right way? Or what is the correct way I should be approaching this.

Thank you.

Jquery script

$(function(){
        var count = 0, $input = jQuery('.cover-buttons ul li:nth-last-child(5) a'), interval = setInterval(function() {
            if ($input.hasClass('blur')) {
                $input.removeClass('blur').addClass('focus'); ++count;
            } else {
                $input.removeClass('focus').addClass('blur');
            }
            if (count === 3) { clearInterval(interval); }
        }, 1000);
});

Functions.php script to load Jquery

function my_init() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', false, '3.2.1', true);
        wp_enqueue_script('jquery');

        // load a JS file from my theme: js/theme.js
        wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', true);
    }
}
add_action('init', 'my_init');

This below line of code will load jquery at footer rather than load it in head wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', false, '3.2.1', true);

For many plugins, they consider the jquery load on head so they may add inline script to be executed before header, so you may want to change to

wp_register_script('jquery', ' https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js ', false, '3.2.1', false );

Hope that can help you.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM