Usar ‘$’ en lugar de ‘jQuery’ en WordPress

En el artículo de hoy vamos a hablar sobre un problema que en algún momento hemos podido tener todos y que nos ha dado un buen dolor de cabeza. En alguna ocasión, al cargar nuestra librería de jQuery en WordPress y al intentar usarla, nos hemos encontrado con que se está produciendo un error, pero revisando vemos que está todo correcto, que no siquiera llevamos 5 líneas de código como para que falle.

Si has programado antes con jQuery, sabrás que se puede usar el símbolo “$” en sustitución de la palabra “jQuery”, haciendo de esta forma que los scripts sean más cortos y menos pesados. Antes de comenzar con la explicación de cómo solucionar este error, vamos a explicar qué es jQuery y las formas que existen de cargar esta librería en nuestro WordPress.

¿Qué es jQuery?

jQuery es una librería de Javascript que simplifica el código que necesitamos desarrollar en nuestra web. jQuery nos ayuda a escribir más con menos líneas de código, por lo que nos ahorra tiempo y recursos de nuestra web. Por ello, jQuery es muy popular y se usa en la mayoría de webs existentes.

jQuery permite manipular los elementos del DOM, como son las imágenes, textos, enlaces, se puede cambiar el diseño, recoger datos de los formularios y trabajar con estos datos haciendo uso de una función llamada AJAX.

Hay varias formas de incluir jQuery en nuestras páginas webs o proyectos, a continuación os explicaremos 3 formas de incluir esta librería de manera fácil y sencilla.

¿Cómo añadir jQuery a nuestra página web o proyecto?

Como hemos comentado antes hay 3 formas de agregar jQuery a nuestros proyectos o webs. Estas son:

  • Mediante CDN. Añadiendo el siguiente código en la cabecera de nuestra web entre las etiquetas de <head></head>. Si necesitas una versión diferente puedes encontrarla aquí.

<script src=»https://code.jquery.com/jquery-3.5.0.min.js» integrity=»sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=»crossorigin=»anonymous»></script>

  • Descargando jQuery. Se puede descargar esta librería desde este enlace y luego añadirlo al directorio de archivos de nuestro proyecto subiendo estos archivos mediante FTP.
  • Si, estamos usando WordPress, añadiendolo con la siguiente función wp_enqueue_script(‘jquery’).

Una vez que hemos visto estas tres formas de incluir jQuery en nuestra página web, vamos a ver como usar el símbolo del “$” en lugar de la palabra reservada “jQuery” en WordPress.

¿Cómo usar “$” en vez de la palabra reservada “jQuery” en WordPress?

Este error nos aparece cuando cargamos jQuery en nuestro proyecto de WordPress mediante la tercera forma que hemos visto antes. ¿Por qué pasa esto? Pues porque al cargar jQuery de esta forma se carga de forma segura, por lo que no podremos usar el símbolo del dólar ya que WordPress no reconocerá este símbolo como algo relacionado con jQuery, evitando así posibles conflictos con otras librerías que también puedan hacer uso del carácter dólar. 

Llegados a este punto te preguntarás si al cargar la librería de jQuery, mediante esta función de WordPress, vas a poder usar el símbolo del dólar. La respuesta es que sí, pero hay que tener en cuenta que de esta forma vamos a desactivar la seguridad con la que la función de WordPress ha cargado la librería. Usando el siguiente código, podremos volver a usar el símbolo del dólar como sustituto de la palabra “jQuery”. El código a incluir varia un poco según si lo queremos incluir en el footer o el header, aquí os dejamos ambos códigos:

  • Si vamos a cargar nuestro código en el footer usaremos este código:

(function($)

{

      // Ahora puedes usar $. Puedes comprobarlo usando la siguiente línea:

      // console.log($);

      // Recuerda que sólo puedes usar $ DENTRO de esta función.

     // Aquí dentro irá el código que quieras implementar

})( jQuery );

  • Si vamos a cargar nuestro código en el header, usaremos este código:

jQuery(document).ready(function( $ ) 

{

      // Ahora puedes usar $. Puedes comprobarlo usando la siguiente línea:

      // console.log($);

      // Recuerda que sólo puedes usar $ DENTRO de esta función.

       // Aquí dentro irá el código que quieras implementar

});

De esta forma tan simple podremos usar el símbolo del dólar como sustituto de la palabra “jQuery” y así hacer de tus scripts trozos de código más ligero. 

Conclusión

Como has podido comprobar es una solución bastante fácil y además te hemos dado otros dos métodos aparte para incluir la librería de jQuery en tu proyecto o página web como alternativas si no quieres usar esta unción que nos proporciona WordPress para cargar de manera segura jQuery.

Recuerda que según dónde quieras emplazar tu código tendrás que hacer uso de una de las dos funciones que hemos indicado un poco más arriba. 

Puedes contarnos qué tal ha sido la experiencia, si has tenido problema al llevar a cabo esta solución o si ya habías tenido este problema anteriormente y conoces otra manera de resolverlo. Si es así puedes dejarnos la solución que encontraste y de esta forma mantener centralizadas todas las soluciones en un mismo artículo.

¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 4,50 sobre 5)
Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes


Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

4 Comentarios

distribuidora de cosmeticos

Un post genial. me ha ayudado a abrir los ojos en estas cuestiones

Héctor Pinargote

¡Excelente! Muchas gracias, me ha sido de gran ayuda

Anaïs

GRACIAS! Me estaba empezando a volver loca y no había caído en algo tan simple como eso.

Fernando

Es muy bueno tu post pero me puedes ayudar con este problema. tengo un sitio en HTML básico, donde muestro un mapa de google por medio de jquery. Lo quiero implementar en un sitio de Wordpress pero ni siquiera me carga el mapa (por ende ninguna de las demás funciones). sabes como hacerlo? Saludos