wordpress problèmes de script enqueue (« $ n'est pas défini »)

Question

Espérons que celui-ci est une solution assez facile pour les gars :)

Je construis un thème wordpress, et avait déjà appeliez assez mal le script jquery dans l'étiquette de tête html. Cela causait du retard de chargement dans Opera, ce que je soupçonne parce que j'essayais de charger jquery simultanément de deux manières ... de toute façon je le fais maintenant correctement dans le fichier functions.php, mais mon autre script dépend de jquery ne joue pas bien.

est ici l'extrait de la façon dont je suis maintenant mise en attente jquery et mon script (pour un panneau coulissant):

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

et voici mon script panneau coulissant:

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

cela a été tout fonctionne un régal quand j'appelais juste jquery dans les balises de tête et ensuite placer ce script dans des balises de script directement après, mais maintenant firebug le montre jetant "$ n'est pas défini" et changer $ à jquery produit "jquery n'est pas défini" ... quelqu'un peut-il aider?

Answer 1

Utilisez jQuery avec un Q capital au lieu de $ pour le faire fonctionner. Wordpress inclut généralement un script qui appelle jQuery.noConflict() à la fin, laissant $ indéfini. Le résultat devrait être quelque chose comme ceci:

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

assurez-vous d'indiquer votre script dépend de jQuery en faisant cela dans le wp_enqueue -> wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));

Notez que le array('jquery') qui indique que votre script dépend jQuery.

Answer 3

Vous devez vous assurer que jQuery est chargé d'abord avec l'astuce jQuery tableau ci-dessus mentionné:

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

Mais il est vraiment la meilleure pratique de définir une coutume comme sans conflit variable afin:

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

Remarque: Vous devrez remplacer toute autre utilisation de $ ou jQuery avec $j. De plus, tout script ajouté après celui-ci devra également suivre votre définition de $j sans conflit.

Answer 4

S'il y a quelqu'un qui est toujours des problèmes après ces bons conseils s'il vous plaît lire les détails à http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Sur ce lien, vous pouvez trouver des détails pour toutes sortes de situations que vous pouvez avoir.

Et assurez-vous que vous appelez wp_enqueue_script pour chaque script JS que vous utilisez. Jamais lien direct entre eux et vous serez très bien;)

Answer 5

Enveloppez votre fonction dans un soi-disant "domReady" function:

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

Answer 6

Je sais que cela a déjà été répondu mais je voulais ajouter.

S'il s'agit d'un fichier, le problème est probablement lié à jQuery en tant que dépendance pour votre script. wp_enqueue_script('script_name', get_template_directory_uri() . '/path_and_script_name.js', array('jquery'));

Si vous avez l'objet jQuery mais vous pouvez essayer $:

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

Ce script fait partie en dessous de la balise script jQuery. S'il se plaint encore que jQuery n'est pas défini, vérifiez votre <head> pour le script jQuery. Si ce n'est pas le cas, vous ne l'enregistrez pas/ne le mettez pas en file d'attente correctement. Dans mon cas, j'avais ajouté un filtre qui supprimait toutes les balises. Pour vous déboguer pourrait utiliser ...

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

Mais honnêtement que ça ne va pas être beaucoup plus utile que de simplement regarder votre tête. Assurez-vous d'utiliser add_action('wp_enqueue_scripts', /*function name*/);. Beaucoup d'autres hameçons sont trop tard.

Ne collez pas la source jQuery au-dessus de <?php wp_head(); ?> dans l'en-tête. C'est moins facile à maintenir, et surtout avec jQuery, probablement que le script sera inclus deux fois si nécessaire par un plugin etc.

Answer 7

La seule façon dont j'ai résolu ce problème était de remplacer tous les "$" par "jQuery" dans le script que vous incluez.

Dans votre cas, votre nouveau script ressemblera à ceci:

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;

mais vous pouvez utiliser jQuery (function() {alert ("Document Ready")});