Si estamos desarrollando una página web con WordPress, es más que probable que queramos usar nuestro propio JavaScript, sobre todo cuando elaboramos un tema desde cero o un plugin. Para ello debemos organizar nuestros archivos dentro del directorio que corresponda y luego añadirlos a la cola de la manera habitual.
Hasta aquí todo correcto. Pero si hemos trasladado nuestro JavaScript tal cual, lo más probable es que no funcione y al examinar la consola de control, nos encontremos con el error Uncaught TypeError: $ is not a function
Esto se debe a que WordPress trabaja con jQuery en modo no-conflict para evitar posibles problemas de compatibilidad, lo que hace que cuando usamos el alias $ para llamar a la librería lance ese error y no se ejecute el código.
Para evitarlo, debemos meter nuestro script en un contenedor que nos servirá para especificar que vamos a usar jQuery y por tanto el atajo $ estará disponible de nuevo. En el siguiente ejemplo cargamos el script después de terminar de cargarse la página.
jQuery(document).ready(function($){
tu script se ejecutará después de la carga de la página
});
Si en lugar de ejecutar después de la carga, quisiéramos hacerlo antes, podríamos usar este otro contenedor.
(function($){
tu script se ejecutará antes de la carga de la página
})(jQuery);Como desarrollador web freelance especializado en WordPress este fue uno de los primero «problemas» con los que me topé al empezar a programar temas desde cero cuando trataba de usar JavaScript personalizado. Lo entrecomillo porque no es un problema en sí sino una medida de compatibilidad, aunque inicialmente te pueda traer de cabeza si no lo sabes.
Referencias:
- Función wp_enqueue_script() (inglés) – WordPress Developer Resources
- Evitando conflictos con otras librerías (inglés) – jQuery Learning Center
Deja una respuesta