2017-07-08 5 views
0

Meine WordPress-Seite lädt das Skript nicht auf meine Seite. Ich habe die folgende Funktion in functions.php:Warum lädt Wordpress mein jQuery-Skript nicht?

function nav_script() { 

    wp_enqueue_script('script', get_stylesheet_directory_uri() .'/js/script.js', array('jQuery'), '1.0.0', true); 

} 

add_action('wp_enqueue_scripts', 'nav_script'); 

und das Skript in den scripts.js containted ist wie folgt:

$(document).ready(function() { 
    var stickyNavTop = $('.blog-nav').offset().top; 

     var stickyNav = function(){ 
     var scrollTop = $(window).scrollTop(); 

        if (scrollTop > stickyNavTop) { 
         $('.blog-nav').addClass('sticky'); 
        } 
        else { 
         $('.blog-nav').removeClass('sticky'); 
        } 
       }; 

      stickyNav(); 

     $(window).scroll(function() { 
      stickyNav(); 
    }); 
}); 

Wenn ich den Quellcode der Seite, die ich nicht tun Sehen Sie sich das Skript an, also wurde es aus irgendeinem Grund nicht geladen ... Ich habe den wp_head im Kopf und den wp_footer vor dem Body Ending Tag, also habe ich keine Ahnung was passieren kann, kann da jemand helfen? Die Funktion arbeitet in einem normalen HTML, wie ich in JSFiddle versucht ...

Schnitt ... Jungs, die ich etwas erreicht, indem das Skript Hinzufügen „von Hand“ auf die Funktion, wie folgt aus:

function nav_script() { 
     ?> 
     <script> 

      $(document).ready(function() { 
           var stickyNavTop = $('.blog-nav').offset().top; 

            var stickyNav = function(){ 
            var scrollTop = $(window).scrollTop(); 

            if (scrollTop > stickyNavTop) { 
              $('.blog-nav').addClass('sticky'); 
            } else { 
              $('.blog-nav').removeClass('sticky'); 
            } 
            }; 

            stickyNav(); 

            $(window).scroll(function() { 
             stickyNav(); 
           }); 
          }); 

     </script> 
     <?php 
    } 

add_action('wp_head', 'nav_script');  

Aber ich hab zwei dinge gemerkt: ONE: es wird nicht funktionieren wenn ich die <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> CDN nicht in den kopf stecke; TWO: Es funktioniert nur, wenn ich die Website laden, die mir einige Plugin Konflikt schlägt ...

+0

Die Quelle anzeigen? Oder das DOM inspizieren? Zwei sehr unterschiedliche Dinge! –

+0

Ich habe Recht, die Seite Quelle klicken und sehen, wie Sie hier sehen können: https://jsfiddle.net/7undbb8L/ @NiettheDarkAbsol –

+0

„Seite Quelle“ ist als die vom Server empfangen, bevor eine JavaScript überhaupt ausgeführt wird. –

Antwort

0

Ich habe mein Problem behoben. Für das erste Problem, das darin bestand, dass die .js-Datei nicht auf der Seite geladen wurde, da sie nicht in der Quelle vorhanden war, verwendete ich einen Code ähnlich dem zuvor verwendeten, einfach einfacher, entfernte die array und die zugehörigen Werte auf die Version und der Fußzeile, genau wie diese: function

blognav_script() { 
    wp_enqueue_script('blognav', get_stylesheet_directory_uri() . '/js/script.js'); 
} 

add_action('wp_enqueue_scripts', 'blognav_script'); 

... ich nicht genau sagen kann, warum, aber wenn Sie meinen Quellcode mit dem einen vergleiche ich auf die Kommentare gepostet werden Sie die Anwesenheit bemerken der '/js/script.js'. - Seitenquelle: https://jsfiddle.net/qx5fbxa7/ -.

Zweites Problem: das Skript würde nicht geladen werden, wenn ich die Seite (wie edited) aktualisieren ... ich mit bedingter Logik gelöst, den Zustand des Einstellens der Klasse mit:

// function to run on page load and window resize 
    function stickyUtility() { 

     // only update navOffset if it is not currently using fixed position 
     if (!jQuery(".blog-nav").hasClass("fixed")) { 
      navOffset = jQuery(".blog-nav").offset().top; 
     } 

// run on page load 
    stickyUtility(); 

änderte ich eigentlich die ganze Skript, aber um zu zeigen, wie dieses Problem gelöst werden kann, sind dies die Zeilen, die es beheben werden!

-1

Wordpress fügen Sie nicht nur

var $ = jQuery

oben

für jQuery $ so kurz erkennen
+0

Ich habe bereits versucht, das gesamte Dokument mit jQuery statt $ zu schreiben, aber habe nicht funktioniert ... Ich denke, das Skript nicht geladen wird, auf die Website aus irgendeinem Grund –

+0

versuchen Sie 'console.log' jQuery' wenn nichts zurückkommt dann fügen Sie es aus einer CDN;) –

Verwandte Themen