Verwendung von jquery und wp_enqueue_script

Question 1

Ich habe eine ganze Weile damit verbracht, das herauszufinden. Ich versuche, ein Skript hinzuzufügen, das eine externe Jquerylibrary benötigt. Ich kann es zum Laufen bringen, indem ich mein Skript zwischen Skripttags einfüge, aber ich verstehe, dass dies nicht der richtige Weg ist, und es bricht ein anderes Skript auf der Website.

Ich habe heute Abend ziemlich viel Zeit damit verbracht, herauszufinden, wie ich das Skript richtig hinzufügen kann, und ich bekomme es einfach nicht hin.

Ich verstehe, dass so etwas der richtige Weg ist, um das Skript einzureihen:

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

Meine Hauptfrage ist, wie schreibe ich meine Funktionen, damit sie die Bibliothek aufruft, und gleichzeitig ausfallsicher, damit sie nur einmal geladen wird und nicht mit anderen Skripten abstürzt? Dies ist das Skript:

$(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");
              }
            );
        });

Bearbeiten:

Zweite Frage, mehrere Bibliotheken und ein Stylesheet.

Wie oben gesagt, habe ich ein etwas komplexeres Skript, mit dem ihr mir vielleicht helfen könnt.

Ich habe diesen Code jetzt im Header und es funktioniert.

   `<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/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>

`

Aus meinen neu gewonnenen Erkenntnissen habe ich Folgendes versucht, und es hat nicht funktioniert:

`

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

Question 2

Führen Sie Ihre jquery nicht in einem Skript aus. Dadurch werden andere Skripte in WordPress beschädigt.

Erstellen Sie eine .js-Datei (z. B. example.js und legen Sie diese in Ihrem Themenordner unter einem /js-Verzeichnis ab) und fügen Sie sie wie folgt in Ihre functions.php-Datei ein.

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 ist der Pfad zur js-Datei. $deps ist, wo Sie definieren, dass dieses Skript jquery erfordert, wie hier. array(‘jquery’)

Sie müssen jquery nicht einbinden, da dies in WordPress integriert ist.

Wickeln Sie dann in Ihrer .js-Datei in Ihrem Designordner Ihren Code in einen No Conflict-Wrapper ein. Die Verwendung von $() gibt ansonsten undefiniert zurück.

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

});