Mein Skript funktioniert nicht in Wordpress statische Website

Question

Ich arbeite an meiner Wordpress-Website, und ich verwende eine statische Seite für meine Front/Homepage. Ich wollte Parallax scrollen, aber ich kann mein Skript nicht laden und arbeiten.

ich es in Header wie folgt verbunden:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scroll.js"></script> 

und das ist mein Scroll-Skript:

(function($) { 
    $.fn.parallax = function(options) { 
     var windowHeight = $(window).height(); 
     // Establish default settings 
     var settings = $.extend({ 
      speed: 0.15 
     }, options); 

     // Iterate over each object in collection 
     return this.each(function() { 

     // Save a reference to the element 
     var $this = $(this); 

      // Set up Scroll Handler 
      $(document).scroll(function(){ 
       var scrollTop = $(window).scrollTop(); 
       var offset = $this.offset().top; 
       var height = $this.outerHeight(); 

       // Check if above or below viewport 
       if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) { 
       return; 
       } 

       var yBgPosition = Math.round((offset - scrollTop) * settings.speed); 

       // Apply the Y Background Position to Set the Parallax Effect 
       $this.css('background-position', 'center ' + yBgPosition + 'px'); 
      }); 
     }); 
    } 
}(jQuery)); 

$('.parallax-section-1').parallax({ 
speed : 0.15 
}); 

ich einige Artikel gefunden, die ich hätte die functions.php verwenden und enque die Skript, aber ich habe das vorher nie getan, also bin ich ein bisschen verloren, so dass jede Hilfe sehr geschätzt würde.

Answer 1

Als Erstes lasst uns das Skript den "WordPress Way" laden. Dies wird tatsächlich vereinfachen Fehlerbehebung.

Bearbeiten Sie dazu die functions.php Datei Ihres Designs.

In dieser Datei fügen Sie diesen PHP-Code hinzu. Stellen Sie sicher, dass es zwischen <?php öffnenden/schließenden Tags ist.

Normalerweise würde ich empfehlen, es an die Ende der Datei hinzufügen, aber wenn Sie Ihre Datei enthält diese ?> -, dass der Code, den Sie hinzufügen vor die ?> ist:

add_action('enqueue_scripts', 'my_custom_script'); 

function my_custom_script() { 
    // Be sure jQuery is loading 
    wp_enqueue_script('jquery'); 
    // Load your script 
    wp_enqueue_script('my-parallax-script', get_template_directory_uri() . '/js/scroll.js', array('jquery'), FALSE, TRUE); 
} 

Now - Sobald Sie dies getan haben, sollten Sie sicher sein, dass Ihr Skript tatsächlich geladen wird. Besuchen Sie dazu die Seite und führen Sie in Ihrem Browser eine VIEW SOURCE durch. Wenn Sie die Quelle anzeigen, führen Sie eine Suche nach dem Code für "scroll.js" durch - wenn Sie es finden, großartig. Klicken Sie auf die URL (oder kopieren Sie sie in Ihr Browserfenster) und stellen Sie sicher, dass das Skript auf den richtigen Ort verweist. Andernfalls müssen Sie das Skript an den richtigen Speicherort verschieben, damit die Seite es lädt.

Nächster Schritt
Sie haben ein Problem mit Ihrem Skript, dass nicht in Wordpress arbeiten. Sie verweisen auf jQuery mit dem Symbol $, UND es scheint, dass Sie direkt auf ein Element verweisen, was bedeutet, dass das Element bei der Ausführung des Skripts nicht vorhanden ist, was bedeutet, dass es nicht den gewünschten Effekt hat.

Stattdessen müssen wir zwei Dinge tun. Da WordPress jQuery in dem so genannten no conflict mode lädt, müssen Sie es unter Verwendung jQuery, nicht $ verweisen. UND Sie müssen Ihren Code in eine document ready Funktion setzen.

Zum Glück bietet jQuery eine glatte Möglichkeit, das Dokument zu tun bereit, das macht die $innerhalb des Dokuments bereit, für die Bequemlichkeit:

// Shorthand version of "No-conflict-safe" document ready 
jQuery(function($) { 
    // Inside here, we can use $ instead of jQuery 
    $('.parallax-section-1').parallax({ 
     speed : 0.15 
    }); 
}); 

Wenn es immer noch nicht nach all dies nicht funktioniert, dann Sie müssen Ihre Konsole in Ihrem Browser öffnen und nach JavaScript-Fehlern suchen. Sie werden Ihnen helfen zu identifizieren, was vor sich geht, was der erste Schritt zur Lösung des Problems ist.