problemas de secuencias de comandos en cola de wordpress (“$ no está definido”)

5 minutos de lectura

Espero que esta sea una solución bastante fácil para ustedes 🙂

Estoy creando un tema de wordpress, y anteriormente había estado llamando bastante mal al script jquery en la etiqueta de encabezado html. Sin embargo, esto estaba causando un retraso en la carga en Opera, lo que sospecho que se debe a que estaba tratando de cargar jquery simultáneamente de dos maneras … de todos modos, ahora lo estoy haciendo correctamente en el archivo functions.php, pero mi secuencia de comandos adicional que depende de jquery no está jugando bien.

aquí está el fragmento de cómo ahora estoy poniendo en cola jquery y mi script (para un panel deslizante):

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

y aquí está mi script de panel deslizante:

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

todo esto funcionó de maravilla cuando solo estaba llamando a jquery en las etiquetas de encabezado y luego colocando este script en las etiquetas de script directamente después, pero ahora firebug lo muestra arrojando “$ no está definido” y cambiando $ a jquery produce “jquery no está definido “… ¿Alguien puede ayudar?

Usar jQuery con capital Q en vez de $ para que funcione. WordPress normalmente incluye un script que llama jQuery.noConflict() al final, dejando $ indefinido. El resultado debería ser algo como esto:

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

  • @LachlanF: ¿es posible que se incluya? antes de jQuery está incluido en la página?

    –Nick Craver

    29 de septiembre de 2010 a las 1:05

  • No puedo creer que una sola carta me haya hecho perder todo ese tiempo. ¡Muchas gracias hombre!

    – Aditya diputado

    25 mayo 2012 a las 20:18

asegúrese de indicar que su secuencia de comandos depende de jQuery haciendo esto en wp_enqueue ->

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

Observe la array('jquery') Eso indica que su script depende de jQuery.

  • +1: lo tenía como …’/scripts/slide.js’, ‘jquery’); Y no estaba funcionando. Agregarlo como una matriz solucionó el problema. ¡Gracias Darren!

    – lepe

    26 de agosto de 2012 a las 6:05

La única forma en que solucioné este problema fue reemplazando todos los “$” con “jQuery” en el script que está incluyendo.

En su caso, su nuevo script se verá así:

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

Si hay alguien que todavía tiene problemas después de esos buenos consejos, lea los detalles en http://codex.wordpress.org/Function_Reference/wp_enqueue_script

En ese enlace puede encontrar detalles para todo tipo de situaciones que pueda tener.

Y asegúrate de llamar wp_enqueue_script para cada script JS que esté utilizando. Nunca los vincules directamente y estarás bien;)

avatar de usuario
Bruno Camareiro

Envuelva su función en un llamado función “domReady”:

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

Sé que esto ya ha sido respondido, pero quería agregarlo.

Si es un archivo, lo más probable es que el problema sea incluir jQuery como una dependencia para su secuencia de comandos. wp_enqueue_script('script_name', get_template_directory_uri() . '/path_and_script_name.js', array('jquery'));

Si tiene el objeto jQuery pero no $, puede probar esto:

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

Este script pertenece debajo de la etiqueta del script jQuery.

Si todavía se queja de que jQuery no está definido, verifique su <head> para el script jQuery, si no está allí, no lo está registrando/poniendo en cola correctamente. En mi caso, agregué un filtro que eliminaba todas las etiquetas. para depurarte pudo usar…

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

Pero, sinceramente, eso no será mucho más útil que solo mirar tu encabezado.

Asegúrate de estar usando add_action('wp_enqueue_scripts', /*function name*/);. Muchos otros ganchos llegan demasiado tarde.

No pegue la fuente jQuery arriba <?php wp_head(); ?> en el encabezado. Es menos fácil de mantener, y especialmente con jQuery, es probable que el script se incluya dos veces si lo requiere un complemento, etc.

avatar de usuario
david cottrell

Debe asegurarse de que jQuery se cargue primero con el truco jQuery de matriz mencionado anteriormente:

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

Pero realmente es una buena práctica definir una variable personalizada sin conflicto de esta manera:

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

Aviso: Deberá reemplazar cualquier otro uso de $ o jQuery con $j. Además, cualquier secuencia de comandos adjunta después de esta ahora también deberá seguir su $j definición de no conflicto.

¿Ha sido útil esta solución?