How to use jquery and wp_enqueue_script

I had a good time trying to figure it out. I am trying to add a script that needs an external jquerylibrary. I can make it work by inserting my script between the scripts, but I understand that this is not the right way to do this, and it breaks another script on the site.

Today I spent a lot of time trying to figure out how to add the script correctly, and I just can't get it.

I understand that this is the correct way to insert a script into the queue:

function my_scripts_method() { wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.9.1.js'); wp_enqueue_script( 'jquery' ); }
add_action('wp_enqueue_scripts', 'my_scripts_method');

My main question is: how can I write my functions so that it calls the library, and at the same time is fault tolerant, so it only loads once and does not crash with other scripts? This is the script:

$(document).ready(function () {


$("#menu-item-16").hover(




          function () {
                  $('body').css("background", "#ff9900");
              }, 
              function () {
                $('body').css("background", "#ccc");
             }
            );

            $("#menu-item-17").hover(
              function () {
                  $('body').css("background", "red");
              }, 
              function () {
                  $('body').css("background", "#ccc");
              }
            );

            $("#menu-item-18").hover(
              function () {
                  $('body').css("background", "yellow");
              }, 
              function () {
                  $('body').css("background", "#ccc");
              }
            );
        });

Edit:

The second question, several libraries and a style sheet.

, script, , , .

, .

   `<link rel="stylesheet" type="text/css" href="/wp-content/themes/neighborhood/js/jquery.fullPage.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">     </script> 
 <script type="text/javascript" src="/wp-content/themes/neighborhood/js/vendors/jquery.slimscroll.min.js"></script>

<script type="text/javascript" src="/wp-content/themes/neighborhood/js/jquery.fullPage.js"></script>



<script>
 $(document).ready(function() {
$.fn.fullpage({
    verticalCentered: true,
     resize : true,
    slidesColor : ['#AF1700', '#359973', '#F46321', '#A6C7DB'],
    scrollingSpeed: 700,
    easing: 'easeInQuart',
    menu: false,
    navigation: false,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide'],
    slidesNavigation: true,
    slidesNavPosition: 'bottom',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    autoScrolling: true,
    scrollOverflow: true,
    css3: false,
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#element1, .element2',
    normalScrollElements: '#element1, .element2',
    keyboardScrolling: true,
    touchSensitivity: 15,
    continuousVertical: false,
    animateAnchor: false, 
    setScrollingSpeed: 1000,



});
});    

 </script>

`

, , :

`

function fullpage() {     wp_enqueue_script('jquery');  

wp_register_style( ’fullpage-css', get_template_directory_uri() . '/js/jquery.fullPage.css','','', 'screen' );   
wp_register_script( 'jquery.1.8.3', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', array('jquery'),'',true  ); 
 wp_register_script( 'jquery.1.9.1', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js', array('jquery'),'',true  ); 

 wp_register_script( 'fullpage', get_template_directory_uri() . '/js/jquery.fullPage.js', array('jquery'),'',true  ); 
 wp_register_script( 'fullpagecode', get_template_directory_uri() . '/js/fullpagecode.js', array('jquery'),'',true  ); 
 wp_register_script( 'slimscroll', get_template_directory_uri() . '/js/vendors/jquery.slimscroll.min.js', '', null,''  ); 

wp_enqueue_style( 'fullpage-css' ); // Enqueue our stylesheet

wp_enqueue_script( 'jquery.1.8.3' );  // Enqueue our first script

 wp_enqueue_script( 'jquery.1.9.1' ); // Enqueue our second script

 wp_enqueue_script( 'fullpage' );  // Enqueue our third  script

wp_enqueue_script( 'fullpagecode' ); // Enqueue fourth script

 wp_enqueue_script( ’slimscroll’ ); // Enqueue fifth script

  }add_action( 'wp_enqueue_scripts', ’fullpage’ ); `
+4
1

jquery script. wordpress.

.js(, example.js /js ) " " functions.php .

function theme_styles() {
    wp_register_style( 'fullpage-css', get_template_directory_uri() . '/css/jquery.fullPage.css' );   
    wp_enqueue_style( 'fullpage-css' ); 
}
add_action('wp_enqueue_scripts', 'theme_styles');

function theme_scripts() {
    wp_register_script( 'fullpage', get_template_directory_uri() . '/js/jquery.fullPage.js', array('jquery'),'1.0.0',true  ); 
    wp_enqueue_script( 'fullpage' );
    wp_register_script( 'fullpagecode', get_template_directory_uri() . '/js/fullpagecode.js', array('jquery'),'1.0.0',true  ); 
    wp_enqueue_script( 'fullpagecode' );
    wp_register_script( 'slimscroll', get_template_directory_uri() . '/js/vendors/jquery.slimscroll.min.js', array('jquery'), null, true  );
    wp_enqueue_script( 'slimscroll' );
}
add_action('wp_enqueue_scripts', 'theme_scripts');

wp_enqueue_script ($ handle, $src, $deps, $ver, $in_footer);

$src - js. $ deps, script, jquery, . ( 'JQuery')

jquery, wordpress .

.js No Conflict. $() undefined .

jQuery(document).ready(function($) {

    $("#menu-item-16").hover(
          function () {
                  $('body').css("background", "#ff9900");
          }, 
          function () {
            $('body').css("background", "#ccc");
         }
    );

    $("#menu-item-17").hover(
        function () {
          $('body').css("background", "red");
        }, 
        function () {
          $('body').css("background", "#ccc");
        }
    );

    $("#menu-item-18").hover(
        function () {
          $('body').css("background", "yellow");
        }, 
        function () {
          $('body').css("background", "#ccc");
        }
    );

});
+4

Source: https://habr.com/ru/post/1528219/


All Articles