Wordpress comment utiliser jquery et le signe $

Question

J'ai un script jQuery simple dans un plugin WordPress qui utilise un wrapper jQuery comme ceci :

$(document).ready(function(){

    // Le code jQuery est ici

});

J'appelle ce script depuis le tableau de bord de WordPress et je le charge APRÈS que le framework jQuery ait été chargé.

Lorsque je vérifie la page dans Firebug, je reçois constamment le message d'erreur :

TypeError: $ n'est pas une fonction

$(document).ready(function(){

Devrais-je peut-être envelopper le script dans cette fonction :

(function($){

    // Le code jQuery est ici

})(jQuery);

J'ai eu cette erreur plusieurs fois et je ne suis pas sûr de comment la gérer.

Toute aide serait grandement appréciée.

Answer 1

Par défaut, lorsque vous mettez en file d'attente jQuery dans Wordpress, vous devez utiliser jQuery, et $ n'est pas utilisé (cela est pour la compatibilité avec d'autres bibliothèques).

Votre solution de l'envelopper dans function fonctionnera très bien, ou vous pouvez charger jQuery d'une autre manière (mais ce n'est probablement pas une bonne idée dans Wordpress).

Si vous devez utiliser document.ready, vous pouvez en fait passer $ dans l'appel de fonction:

jQuery(function ($) { ...

Answer 2

Cela devrait le réparer:

jQuery(document).ready(function($){
  //vous pouvez maintenant utiliser $ comme votre objet jQuery.
  var body = $( 'body' );
});

En gros, WordPress exécute son propre script avant vous et ils libèrent la variable $ pour qu'elle ne rentre pas en collision avec d'autres bibliothèques. Cela a du sens, car WordPress est utilisé pour toutes sortes de sites web, d'applications et bien sûr, de blogs.

Selon leur documentation:

La bibliothèque jQuery incluse avec WordPress est définie en mode noConflict() (voir wp-includes/js/jquery/jquery.js). Cela est fait pour éviter des problèmes de compatibilité avec d'autres bibliothèques JavaScript auxquelles WordPress peut se lier.

En mode noConflict(), le raccourci global $ pour jQuery n'est pas disponible...

Answer 3

Cette solution a fonctionné pour moi

;(function($){
    // votre code
})(jQuery);

Déplacez votre code à l'intérieur de la fermeture et utilisez $ au lieu de jQuery

J'ai trouvé la solution ci-dessus dans https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

...après avoir trop cherché

Answer 4

var $=jQuery.noConflict();

$(document).ready(function(){
    // Code jQuery se trouve ici
});

Crédit à Ashwani Panwar et réponse de Cyssoo : https://stackoverflow.com/a/29341144/3010027

Raisons pour lesquelles dans WordPress jQuery et non $ est utilisé : https://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/

Answer 5

Vous pouvez éviter les conflits comme ceci

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Salut, il n'y aura plus de conflit maintenant");
  jq('selecteur').show();
});