Cómo utilizar jQuery en WordPress: 2 métodos eficaces

Los desarrolladores de WordPress utilizan JavaScript y bibliotecas para crear elementos interactivos en un sitio web y simplificar el proceso de codificación. Entre las opciones más populares se encuentra jQuery. 

Lo más resaltable de utilizar jQuery en WordPress es el extenso ecosistema de plugins que tiene. En lugar de escribir una consulta de jQuery desde cero, los desarrolladores pueden ahorrar tiempo al utilizar fragmentos de código reutilizables para personalizar plugins y temas de WordPress.

Si deseas empezar a crear sitios web usando jQuery, en este artículo te vamos a guiar durante todo el proceso. También hablaremos sobre qué es jQuery, sus principales ventajas y cómo añadir jQuery en WordPress. 

Descarga la hoja de trucos de WordPress definitiva

¿Por qué utilizar jQuery?

Además de su ecosistema de plugins, otras razones para utilizar la librería jQuery en WordPress son: 

• Apto para principiantes: gracias a su formato de texto corto y simple, el código jQuery es fácil de leer y escribir. 
• Compacto: por lo general un archivo de jQuery es más pequeño que un JavaScript simple, permitiéndote realizar las mismas tareas con menos caracteres. 
• Compatibilidad entre navegadores: entre los navegadores populares que soportan jQuery están Google Chrome, Microsoft Edge, Mozilla Firefox, Safari y Opera. 
• Soporte AJAX: los desarrolladores pueden implementar AJAX para crear una web fácil de usar y responsiva. 
• Uso de ancho de banda bajo: jQuery puede ejecutar efectos de animación directamente en el navegador del usuario, lo cual resulta en un uso bajo de ancho de banda. 

Cómo utilizar jQuery en WordPress

Hay dos formas de añadir scripts de jQuery en un sitio web de WordPress: manualmente o utilizando un plugin de WordPress. 

Comencemos con el método manual. 

Añadir jQuery manualmente

Si tienes experiencia con desarrollo JavaScript y WordPress, sigue estos pasos:

1. Cambia al modo de compatibilidad

Antes de comenzar a usar tus propios scripts de Jquery en WordPress, es vital que entiendas el modo de compatibilidad de jQuery. 

Por defecto, jQuery utiliza el signo $ como atajo:

$(document) .ready (function() {
$("button") .click (function () {

Sin embargo, otras librerías de JavaScript en tu web también implementan el signo del dólar en su sintaxis. Para evitar conflictos, ingresa el modo compatibilidad al reemplazar el signo $ con jQuery.

Echa un vistazo al siguiente código:

jQuery(document) .ready (function() {
jQuery("button") .click (function () {

El único problema con este modo es que pueden haber scripts sobrecargados, ya que escribir jQuery en lugar del atajo significa añadir más caracteres.

Para resolver este problema elige un nuevo nombre de variable para reemplazar el signo del dólar. El más común es $j. 

Simplemente añade este código al principio de tus scripts jQuery:

var $j = jQuery.noConflict()

2. Crea un archivo script

Luego, crea un archivo script personalizado con la extensión .js. Los usuarios de Hostinger pueden seguir los siguientes pasos: 

1. Accede a hPanel → Hosting → Administrar.
2. En el menú izquierdo, selecciona Archivos → Administrador de archivos.
3. Ingresa a public_html → wp-content.

4. Abre la carpeta Themes y selecciona uno de los temas instalados. 
5. En el menú izquierdo, haz clic en Nueva carpeta y nombrala .js.
6. Haz clic en Nuevo archivo para crear un nuevo archivo .js, por ejemplo: nuevo_script.js. 

7. Añade scripts jQuery al archivo. 
8. Repite los mismos pasos para personalizar plugins de WordPress.

3. Añade código dentro del archivo functions.php

Antes de añadir scripts en línea a WordPress, localiza el archivo functions.php en la carpeta del tema. 

Abre el archivo y agrega la siguiente función jQuery al comienzo:

function add_my_scripts() {
    wp_enqueue_script( ‘new-script', get_template_directory_uri() . '/js/new_script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_my_scripts' )

Asegúrate de reemplazar new-script y new_script.js con los nombres actuales de los archivos. 

Al agregar la función wp_enqueue_script dentro del código PHP, los usuarios pueden añadir un script personalizado e informar a WordPress que se basa en jQuery.

También ayuda a WordPress a localizar el script y personalizar el tema basado en tus scripts jQuery.

Añadir jQuery a través de un plugin de WordPress

Si añadir scripts en WordPress manualmente es muy técnico para ti, te recomendamos utilizar plugins jQuery de WordPress. 

A continuación cómo hacerlo:

1. Elige un plugin

WordPress ofrece varios plugins para crear sitios web interactivos con jQuery. Aquí nuestra elección de los mejores plugins para diferentes usos: 

• jQuery Updater: aunque jQuery viene pre-instalado con WordPress, la plataforma viene a menudo con una versión desactualizada. jQuery Updater asegura que tu sitio web instale automáticamente la última versión de la librería de JavaScript. 
• Advanced Custom Fields: esta herramienta es ideal para añadir campos personalizados en entradas y páginas. Algunos de sus campos basados en jQuery incluyen selector de color, mapa de Google, selector de fecha y hora.
• jQuery Validation For Contact Form 7: este plugin te permite mostrar mensajes de error cuando los usuarios ingresen información incorrecta en Contact Form 7. Puedes crear reglas de confirmación para URLs, fechas, tarjetas de crédito y números telefónicos. 
• jQuery Post Splitter: compatible con la mayoría de temas de WordPress, este plugin te permite dividir artículos y páginas dentro de sliders. 

A pesar de que instalar estos plugins simplifique el proceso de diseño de una página web, sigue siendo necesario tener conocimiento básico de las librerías jQuery y JavaScript para usarlas.

Conclusión

Saber cómo utilizar jQuery en WordPress es muy importante para cualquier propietario de un sitio web y desarrolladores. 

La librería jQuery ofrece una solución ligera para crear elementos interactivos, editar páginas y personalizar el aspecto general de un sitio de WordPress.

Para añadir scripts Jquery manualmente, cambia al modo de compatibilidad, crea un archivo script y personaliza el archivo functions.php en la carpeta de tu tema. 

Para principiantes, los plugins jQuery de WordPress como Advanced Custom Fields ayudarán en este proceso. 

Esperamos que este artículo te ayude a desarrollar un sitio web más atractivo y único. ¡Buena suerte! 

jQuery WordPress – Preguntas frecuentes

A continuación información adicional acerca de jQuery en WordPress.