Los elementos interactivos de una página, como las barras de búsqueda dinámicas, los filtros avanzados de productos y los controles deslizantes, pueden hacer que tu sitio sea más fácil de usar y atractivo. Sin embargo, es imposible crear ninguna de estas funciones sin usar JavaScript o instalar plugins de WordPress.
Por suerte, puedes crear fácilmente elementos de diseño de JavaScript usando jQuery en WordPress. Puedes hacerlo manualmente o usar un plugin para agilizar el proceso.
En esta publicación, te presentaremos jQuery y explicaremos por qué quizá quieras usarlo. Después, te mostraremos dos formas de añadir scripts personalizados de jQuery a tu sitio de WordPress y responderemos algunas preguntas frecuentes.
¿Qué es jQuery? (y por qué quizá quieras usarlo)
Antes de aprender a añadir scripts de jQuery en WordPress, necesitarás tener unos conocimientos básicos sobre jQuery.
En pocas palabras, jQuery es una biblioteca JavaScript ligera y de código abierto que simplifica la forma de escribir y usar este lenguaje de programación.
Te permite modificar y mejorar fácilmente los temas y plugins de WordPress usando JavaScript. Esta función puede ser extremadamente útil, ya que JavaScript es esencial para muchas funciones.
Por ejemplo, necesitas JavaScript para Ajax, gestión de eventos y recorrido/manipulación del DOM. La funcionalidad Ajax, en particular, es práctica y popular. Los desarrolladores web la utilizan para crear una carga instantánea de búsquedas y un filtrado avanzado de productos de comercio electrónico.
Una acción del usuario, como un clic o una búsqueda, suele activar estas funciones de JavaScript. También necesitas jQuery para crear funciones adicionales del lado del cliente, como controles deslizantes, ventanas emergentes de lightbox y mucho más.
¿jQuery viene incluido en WordPress de forma predeterminada?
jQuery es un recurso tan útil y popular que viene incluido de forma predeterminada en tu instalación de WordPress. ¡Solo tienes que saber cómo usarlo! En las siguientes secciones te enseñaremos a hacerlo.
Qué hacer antes de añadir scripts de jQuery a WordPress
Pronto explicaremos cómo puedes añadir scripts de jQuery en WordPress. Pero antes, deberías hacer algunas cosas para proteger tu sitio web antes de intentar modificar sus archivos principales.
Lo más importante es que siempre se recomienda crear una copia de seguridad de tu sitio. Esto se debe a que incluso el más mínimo error de código en archivos críticos del sitio web puede causar daños graves. Al crear copias de seguridad, puedes restaurar fácilmente tu sitio a su estado anterior en caso de emergencia.
Si no tienes claro cómo hacer una copia de seguridad de tu sitio de WordPress, o simplemente buscas una herramienta para agilizar el proceso, Jetpack VaultPress Backup es una excelente opción.
Jetpack VaultPress Backup guarda automáticamente cada cambio en tu sitio. Después, puedes usar restauraciones con un clic para recuperar rápidamente tu contenido. Jetpack incluso te permite restaurar tu sitio desde la aplicación móvil de Jetpack. Además, si tienes algún problema, puedes obtener ayuda del mejor servicio de atención al cliente: ¡Happiness Engineers!
Para proteger aún más tu sitio web, también vale la pena crear un sitio de staging de WordPress. Después, puedes probar tus cambios antes de publicarlos.
Cómo añadir scripts personalizados de jQuery a WordPress
Ahora que sabes más sobre jQuery y cómo preparar tu sitio para cambios importantes, ¡hablemos de dos formas de añadir jQuery personalizado en WordPress!
Método 1: Añadir jQuery manualmente
Primero, te mostraremos cómo añadir jQuery manualmente a WordPress. Este método puede ser adecuado para ti si tienes cierta experiencia en desarrollo y quieres controlar por completo el proceso.
Vale la pena usar un tema hijo para que los cambios que realices no se sobrescriban cuando actualices tu tema.
Paso 1: Entrar en el modo de compatibilidad
Una de las grandes ventajas de jQuery es que te permite usar algunos atajos conocidos al programar. En particular, puedes usar el símbolo $ para representar jQuery. Esto puede ahorrarte mucho tiempo, pero otras bibliotecas utilizan este atajo para representar algo diferente.
Por lo tanto, querrás entrar en el modo de compatibilidad y crear un alias único para jQuery. De este modo, podrás evitar conflictos con otras bibliotecas.
Puedes hacerlo usando el siguiente código:
<!-- Putting jQuery into no-conflict mode. -->
http://prototype.js
http://jquery.js
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv debajo es un elemento DOM, no un objeto jQuery.
window.onload = function() {
var mainDiv = $( "main" );
}
</script>Cuando ejecutes el script anterior, podrás usar $j como atajo en lugar de $. Como alternativa, puedes usar lo siguiente:
<!-- Loading jQuery before other libraries. -->
http://jquery.js
http://prototype.js
<script>
// Usa el nombre completo de la función jQuery para hacer referencia a jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>Este fragmento de código simplemente evitará cualquier conflicto. Aun así, tendrás que usar el nombre completo, jQuery, en lugar de un atajo.
Paso 2: Crear un archivo de script
Ahora que tienes el código que necesitas, estás listo para crear un archivo de script. Crea un archivo y ponle un nombre descriptivo como «my_new_script_file.js». Asegúrate de usar la extensión .js y añade al principio el fragmento de código de compatibilidad que prefieras.
En este punto, tendrás que acceder a los archivos de tu tema y editarlos; estos tienen sus propias carpetas dentro de los archivos de tu sitio web.
Empieza por conectarte a tu sitio web usando el administrador de archivos o un cliente gratuito de protocolo de transferencia de archivos (FTP) como FileZilla.
A continuación, abre el directorio raíz. Debería llamarse algo como public_html o simplemente public. Como alternativa, podría ser simplemente el nombre de tu sitio web.
Después, localiza la carpeta de tu tema activo y crea una nueva subcarpeta. Llámala /js/.
Por último, añade tu nuevo archivo de script a esta subcarpeta. Su contenido variará según la función que intentes implementar.
Paso 3: Añade un script de jQuery a tu archivo functions.php.
A continuación, tendrás que localizar el archivo functions.php de tu tema. Tanto el tema principal como el secundario deberían tener uno. Aquí es donde se realizan todas las personalizaciones manuales.
Dado que JavaScript requiere ponerse en cola, tendrás que usar la función wp_enqueue_script(). Tu código podría tener un aspecto similar a este:
function my_theme_scripts() {
wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );Asegúrate de sustituir el nombre de tu archivo de script único y añadirlo a functions.php. Esto indicará a tu archivo de tema que use el archivo de script que creaste en el paso anterior.
Método 2: Añadir jQuery con un plugin de WordPress
Como acabamos de ver, añadir jQuery manualmente puede llevar mucho tiempo y ser un poco arriesgado, especialmente si no estás familiarizado con editar código en WordPress. Por eso, ahora te mostraremos cómo añadir jQuery con un plugin de WordPress.
Paso 1: Instalar un plugin de jQuery
Primero, tendrás que elegir un plugin de jQuery. Dos de las opciones más populares son Simple Custom CSS and JS y Advanced Custom Fields.
Para este tutorial, usaremos Advanced Custom Fields. Esta herramienta te ayuda a crear funciones atractivas e interactivas con tipos de bloque personalizados.
La versión gratuita ofrece muchos tipos de bloque útiles para añadir elementos como grupos de botones, Google Maps, selectores de color, oEmbed y mucho más. Sin embargo, si quieres los 30 bloques personalizados, tendrás que actualizar a la versión de pago de Advanced Custom Fields.
Una vez que hayas seleccionado el plan que prefieras, simplemente instala y activa el plugin como lo harías normalmente. Añade las claves de licencia en los ajustes del plugin.
Paso 2: Crear un nuevo campo personalizado
Después de instalar y activar el plugin, ve a Campos personalizados → Añadir nuevo.
Aquí tendrás que crear tu primer grupo de campos. Asígnale un título junto a Añadir nuevo grupo de campos. Después, haz clic en Guardar cambios.
Ahora puedes empezar a editar el nuevo campo. Puedes ampliar las opciones haciendo clic en Editar debajo de la etiqueta.
Primero, abre el menú desplegable de Tipo de campo, y selecciona uno.
Después, completa la Etiqueta del campo, el Nombre del campo, etc. Si sigues desplazándote hacia abajo, puedes modificar ajustes adicionales como Reglas de ubicación y Presentación.
Según la ubicación que selecciones, podrás ver allí tu nuevo bloque personalizado. En el Editor de bloques, puedes identificar el bloque mediante la etiqueta que designaste en Etiqueta del campo.
Cuando hayas terminado, haz clic en Guardar cambios. Puedes seleccionar el botón + Añadir campo y repetir este proceso. Después, simplemente ve a una de las ubicaciones que elegiste para tu campo y ¡empieza a personalizarlo!
Cómo aplazar jQuery en WordPress
Como hemos explicado, hay muchas razones para usar JavaScript y jQuery en WordPress. De hecho, son fundamentales para ciertas funciones interactivas que muchos usuarios dan por sentadas.
Pero la desventaja es que estos sofisticados elementos del lado del cliente podrían ralentizar tu sitio web. Por eso, quizá quieras aplazar JavaScript (y, por extensión, jQuery) automáticamente cuando se cargue tu sitio de WordPress.
Al aplazar JavaScript, todos los elementos principales de tu sitio se cargarán antes que las funciones de JavaScript menos importantes. Por supuesto, es probable que los visitantes de tu sitio no noten que esto ocurre, pero seguramente mejorará su experiencia de usuario (UX), ya que la página parecerá cargarse más rápido.
Si quieres aplazar automáticamente jQuery en tu sitio web, puedes usar Jetpack Boost para hacerlo.
Este plugin puede mejorar drásticamente el rendimiento general de tu sitio web. Como resultado, podrás mantener todas tus funciones de JavaScript preferidas sin comprometer la velocidad de la página.
Además de aplazar el código JavaScript no esencial, Jetpack Boost puede optimizar la carga de CSS y aplicar la carga diferida de imágenes, entre otras optimizaciones de rendimiento. Con esta herramienta, puedes mejorar tus puntuaciones de Core Web Vitals y aumentar la visibilidad de tu sitio en los resultados de búsqueda.
Preguntas frecuentes sobre jQuery en WordPress
Esperamos haber aclarado la mayoría de tus dudas sobre jQuery en WordPress. Aun así, si se nos ha escapado algo, ¡aquí tienes algunas preguntas frecuentes!
¿Puedes cambiar la versión de jQuery utilizada en WordPress?
A veces, los temas y plugins pueden reemplazar o añadir versiones de jQuery a tu sitio. Por lo tanto, es importante asegurarse de que tu versión esté siempre actualizada. Puedes hacerlo fácilmente usando un plugin como jQuery Updater o Version Control for jQuery.
¿Dónde puedo comprobar la versión de jQuery en mi sitio de WordPress?
Normalmente puedes comprobar la versión de jQuery en un navegador. En Google Chrome, solo tienes que navegar hasta tu sitio web en la vista pública. Después, ve a Ver → Desarrollador → Consola de JavaScript
Introduce jQuery.fn.jquery y la consola debería mostrar la versión actual de tu sitio.
¿Puedes eliminar completamente jQuery de WordPress?
La respuesta breve es: sí. Si descubres que usar JavaScript en tu sitio afecta negativamente a su rendimiento, quizá quieras eliminar o anular el registro de jQuery.
Para hacerlo, simplemente añade el siguiente código a tu archivo functions.php:
// Remove jQuery
function vpsb_remove_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', false);
}
}
add_action('init', 'vpsb_remove_jquery');Ten en cuenta que solo deberías eliminar completamente jQuery de tu sitio si ralentiza drásticamente tus páginas. Sin embargo, es poco probable que esto ocurra, ya que jQuery ya optimiza el código JavaScript más pesado.
Si la velocidad de tu sitio se ha deteriorado después de añadir jQuery, una alternativa mejor sería usar una solución como Jetpack Boost. Puede aplazar el código JavaScript no esencial.
¿Puedes reemplazar jQuery por JavaScript puro?
Es posible reemplazar jQuery por JavaScript puro. Pero puede resultar complicado si no tienes mucha experiencia en desarrollo. Por eso, deberías considerar contratar a un desarrollador si necesitas hacerlo.
Una vez más, cabe señalar que probablemente no sea necesario reemplazar jQuery por JavaScript puro, porque jQuery ya proporciona código JavaScript óptimo. La mayoría de las veces, los pequeños efectos de jQuery en el rendimiento suelen compensar el esfuerzo, y aplazarlo suele ser una opción mejor.
Si decides seguir este camino, merece la pena consultar esta guía para añadir JavaScript a WordPress. Puede ayudarte con el proceso.
Usar jQuery en WordPress
Usar JavaScript complejo para crear funciones atractivas en tu sitio puede mejorar drásticamente la UX y ayudarte a alcanzar tus objetivos. Por desgracia, quizá no tengas tiempo o conocimientos de desarrollo para crear estos elementos interactivos desde cero. La buena noticia es que puedes usar scripts de jQuery para facilitar este proceso.
En resumen, hay dos formas de añadir jQuery a WordPress. En primer lugar, puedes hacerlo manualmente entrando en el modo de compatibilidad y creando un archivo de script. Después, añade tu nuevo script al archivo functions.php. Como alternativa, podrías usar un plugin como Advanced Custom Fields para agilizar el proceso y eliminar la necesidad de programar manualmente.
Cuando usas jQuery para añadir elementos de diseño sofisticados a tu sitio web, puedes mejorar la experiencia de usuario e impresionar a tus visitantes. Sin embargo, varias funciones interactivas podrían perjudicar el rendimiento de tus páginas web. Afortunadamente, Jetpack Boost puede ayudar a optimizar la velocidad de tu sitio.
Jetpack 