Wordpress enqueue Skript Probleme („$ ist nicht definiert“)

Question

Hoffentlich ist eine ziemlich einfache Lösung für euch :)

Ich baue ein Wordpress-Theme, und wurde schlecht zuvor ziemlich Aufruf des jquery Skript in das HTML-Kopf-Tag. Das verursachte in Opera etwas Ladeverzögerung, was vermutlich darauf zurückzuführen ist, dass ich jQuery gleichzeitig auf zwei Arten laden wollte ... jedenfalls mache ich es jetzt richtig in der functions.php Datei, aber mein weiteres Skript hängt davon ab jquery spielt nicht nett.

hier ist das Snippet, wie ich jetzt bin Einreihen jquery und mein Skript (für eine Schiebewand):

add_action('init', 'my_init'); 
function my_init() { 
    if (!is_admin()) { 
     wp_deregister_script('jquery'); 
     wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2', true); 
     wp_enqueue_script('jquery'); 
     wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js'); 
     echo "alert('Hello Admin!');"; 
    } 
} 

und hier ist mein Gleitpanel Skript:

$(document).ready(function(){ 
    $(".btn-slide").click(function(){ 
     var $marginLefty = $("#slide-panel"); 
    $marginLefty.animate({ 
     marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? 
     $marginLefty.outerWidth() : 
     0 
         }); 
            }); 
          }); 

Das war alles funktioniert ein Leckerbissen, als ich gerade jquery in den head tags anrief und dieses skript direkt danach in script tags platzierte, aber nun zeigt firebug es anwerfen "$ is not defined" und das ändern von $ in jquery produziert "jquery is not defined" ... Kann jemand helfen?

Answer 1

Verwenden Sie jQuery mit einer Hauptstadt Q anstelle von $, damit es funktioniert. Wordpress enthält normalerweise ein Skript, das am Ende jQuery.noConflict() aufruft und $ undefined lässt. Das Ergebnis sollte wie folgt sein:

jQuery(function($) { //jQuery passed in as first param, so you can use $ inside 
    $(".btn-slide").click(function(){ 
    var $marginLefty = $("#slide-panel"); 
    $marginLefty.animate({ 
     marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0 
    }); 
    }); 
}); 

Answer 2

stellen Sie sicher, geben Sie Ihr Skript auf jQuery abhängig ist dies in der wp_enqueue by doing -> wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));

Beachten Sie die array('jquery'), der angibt, dass Ihr Skript ist abhängig von jQuery.

Answer 3

Sie müssen sicherstellen, dass jQuery zuerst mit dem oben genannten Array jQuery Trick geladen wird:

wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery')); 

Aber es ist wirklich am beste Praxis eines benutzerdefinierten zu definieren no-Konflikt Variable wie so:

var $j = jQuery.noConflict(); 

$j(document).ready(function() { 
    $j(".btn-slide").click(function(){ 
     var $jmarginLefty = $j("#slide-panel"); 
     $jmarginLefty.animate({ 
      marginLeft: parseInt($jmarginLefty.css('marginLeft'),10) == 0 ? $jmarginLefty.outerWidth() : 0 
     }); 
    }); 
}); 

Hinweis: Sie müssen jede andere Verwendung von $ oder jQuery durch $j ersetzen. Außerdem muss jedes Skript, das an dieses Skript angehängt wird, nun auch Ihrer $j Definition ohne Konflikt folgen.

Answer 4

Wenn es jemand gibt, der noch bitte Details bei http://codex.wordpress.org/Function_Reference/wp_enqueue_script

An diesem Link lesen Probleme nach diesen guten Hinweisen, die Sie Details für alle Arten von Situationen können Sie haben.

Und stellen Sie sicher, dass Sie wp_enqueue_script für jedes JS-Skript aufrufen, das Sie verwenden. Nie Link ihnen, und Sie werden in Ordnung sein;)

Answer 5

Wickeln Sie Ihre Funktion in einem so genannten "domReady" function:

<script> 
(function($) { 
    //insert function here 
})(jQuery); 
</script> 

Answer 6

Ich weiß, das bereits beantwortet worden, aber wollte es hinzuzufügen.

Wenn es sich um eine Datei handelt, ist das Problem wahrscheinlich, dass jQuery als Abhängigkeit für das Skript verwendet wird. wp_enqueue_script('script_name', get_template_directory_uri() . '/path_and_script_name.js', array('jquery'));

Wenn Sie das jQuery-Objekt, aber nicht $ können Sie dies versuchen:

<script id="script-below-jquery-src"> 
(function($) { 
    // Anything here can only immediately reference the DOM above it 
    $(function(){ 
    //on DOM (document) ready 
    }); 
})(jQuery); 
</script> 

Dieses Skript gehört unter dem jQuery Script-Tag.

Wenn es immer noch klagt, dass jQuery undefiniert ist, überprüfen Sie Ihre für das jQuery-Skript, wenn es nicht dort ist, registrieren Sie nicht/enqueuing es richtig. In meinem Fall hatte ich einen Filter hinzugefügt, der alle Tags löschte. So debuggen Sie könnte Verwendung ...

add_filter('script_loader_tag', function($tag, $handle){ 
    /*maybe echo/print here*/ 
    return $tag . "<!-- Script for handle '$handle' -->"; 
}, 10, 2); 

Aber ehrlich gesagt ist das nicht gonna viel nützlicher sein als nur an Ihrem Kopf suchen.

Stellen Sie sicher, dass Sie add_action('wp_enqueue_scripts', /*function name*/); verwenden. Viele andere Haken sind zu spät.

Stecken Sie keine jQuery-Quelle über <?php wp_head(); ?> in die Kopfzeile. Es ist weniger wartbar, und vor allem mit jQuery, wahrscheinlich wird das Skript zweimal enthalten sein, wenn durch ein Plugin erforderlich.

Answer 7

Die einzige Möglichkeit, wie ich dieses Problem behoben habe, war durch Ersetzen aller "$" durch "jQuery" das Skript, das Sie einschließen.

In Ihrem Fall Ihr neues Skript wie folgt aussehen:

jQuery(document).ready(function(){ 
    jQuery(".btn-slide").click(function(){ 
     var jQuerymarginLefty = jQuery("#slide-panel"); 
    jQuerymarginLefty.animate({ 
     marginLeft: parseInt(jQuerymarginLefty.css('marginLeft'),10) == 0 ? 
     jQuerymarginLefty.outerWidth() : 
     0 
         }); 
            }); 
          }); 

Answer 8

var $ = jQuery;

aber Sie können jQuery (function() {alert ("Document Ready")});