Recientemente, un usuario nos pidió consejos para optimizar el rendimiento del sitio web de su WordPress. Una de nuestras sugerencias fue reemplazar el script jQuery predeterminado de WordPress con jQuery de las Bibliotecas Alojadas de Google.
WordPress incluye jQuery con el software principal por defecto. Sin embargo, hemos descubierto que reemplazarlo con la última versión de jQuery de la biblioteca de Google puede mejorar el rendimiento.
En este artículo, te mostraremos cómo reemplazar fácilmente el script jQuery predeterminado de WordPress con la biblioteca de Google para mejorar el rendimiento y la velocidad.
¿Por qué y cuándo deberías reemplazar el jQuery predeterminado de WordPress?
jQuery es una popular biblioteca de JavaScript utilizada por los desarrolladores para crear hermosas aplicaciones web. Se usa con bastante frecuencia en WordPress para agregar funciones como deslizadores, popups y mucho más.
WordPress incluye una biblioteca de jQuery empaquetada con el software principal de WordPress. Muchos de los plugins de WordPress más importantes y los temas de WordPress más populares dependen de esta biblioteca para su funcionalidad y características esenciales.
Sin embargo, cargar jQuery en un servidor de hosting compartido puede consumir muchos recursos y ralentizar tu sitio, especialmente si utilizas temas o plugins de WordPress mal codificados que no siguen las mejores prácticas de WordPress.
Otro problema al usar la versión de jQuery incluida con WordPress es que no se actualizará a menos que WordPress la actualice. Podría haber versiones más nuevas de jQuery con correcciones de rendimiento o seguridad, pero no tendrás acceso a ellas hasta que se incluyan en una actualización de WordPress.
Hay algunas soluciones para arreglar esto. Por ejemplo, puedes cargar jQuery a través de los servidores de Google o la CDN oficial de jQuery.
Google Hosted Libraries es una buena opción porque sus servidores son estables, están actualizados y están altamente optimizados para la velocidad, lo que permite que jQuery se cargue mucho más rápido en tu sitio de WordPress.
Dicho esto, veamos cómo reemplazar fácilmente el jQuery predeterminado de WordPress con la biblioteca de Google.
Reemplazar el jQuery predeterminado de WordPress con la biblioteca de Google
WordPress viene con un método incorporado para agregar fácilmente scripts y hojas de estilo. Esto también te permite eliminar de forma segura cualquier script o hoja de estilo que se cargue utilizando el método incorporado.
Usaremos este método para primero deshabilitar el jQuery predeterminado de WordPress. Después de eso, le indicaremos a WordPress que cargue jQuery a través de la biblioteca de Google.
Deberás agregar el siguiente código a tu archivo functions.php, a un plugin específico del sitio o a un plugin de fragmentos de código.
function wpb_modify_jquery() {
//check if front-end is being viewed
if (!is_admin()) {
// Remove default WordPress jQuery
wp_deregister_script('jquery');
// Register new jQuery script via Google Library
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0');
// Enqueue the script
wp_enqueue_script('jquery');
}
}
// Execute the action when WordPress is initialized
add_action('init', 'wpb_modify_jquery');
Recomendamos usar el plugin de fragmentos de código WPCode para agregar este código en WordPress. Es gratuito, fácil de usar y no romperá tu sitio web si algo sale mal.
Nota: También existe una versión premium de WPCode que ofrece funciones avanzadas como revisiones de código, píxeles de conversión automáticos, fragmentos programados, una biblioteca privada en la nube y más.
Para empezar, necesitarás instalar y activar WPCode. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Una vez activado el plugin, navega a Fragmentos de código » Añadir fragmento desde tu panel de WordPress.
Desde allí, busque la opción 'Agregar su código personalizado (Nuevo fragmento)' y haga clic en el botón '+ Agregar fragmento personalizado' debajo de ella.
Luego, necesitas seleccionar un tipo de código de la lista de opciones que aparecen en la pantalla.
Para este tutorial, elige ‘Fragmento de PHP’.
A continuación, puedes añadir un título para tu fragmento de código. Puede ser cualquier cosa que te ayude a recordar para qué es el código.
Después de eso, simplemente pega el código de arriba en el cuadro ‘Vista Previa del Código’.
Por último, cambia el interruptor de ‘Inactivo’ a ‘Activo’ y haz clic en el botón ‘Guardar fragmento’.
¡Eso es todo! WordPress ahora reemplazará el jQuery predeterminado y lo cargará a través de la biblioteca de Google en su lugar.
Nota: Este método seguirá cargando la versión de jQuery mencionada en la URL. En el futuro, es posible que necesites cambiar la URL de la biblioteca de Google para usar una versión más reciente de jQuery.
Google no actualizará automáticamente el número de versión por ti porque podría causar problemas de compatibilidad si tu tema o plugins dependen de una versión diferente.
Puedes encontrar la URL más reciente visitando el sitio web de bibliotecas alojadas por Google.
Desde allí, también puedes encontrar las URL de versiones anteriores de jQuery que puedes usar para solucionar problemas si es necesario.
Reemplazando otras bibliotecas jQuery predeterminadas
Además de la biblioteca principal de jQuery, WordPress también incluye una serie de otros scripts de jQuery. Algunos de estos scripts, como jQuery Mobile y jQuery UI, están alojados en la biblioteca de Google.
Para otras bibliotecas, puedes usar los propios servidores CDN de jQuery para cargarlas mucho más rápido. En el siguiente ejemplo, hemos reemplazado el script jquery-ui-core de WordPress con la versión oficial de jquery-ui.
function wpb_modify_jquery_ui() {
if (!is_admin()) {
wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', false, '1.12.1');
wp_enqueue_script('jquery-ui-core');
}
}
add_action('init', 'wpb_modify_jquery_ui');
Al igual que con las bibliotecas de Google, necesitarás reemplazar la URL después de un tiempo para usar la última versión del script.
Deshabilitar completamente jQuery en WordPress
Debido a su amplio uso, no recomendamos deshabilitar completamente jQuery en tu sitio web de WordPress. Incluso si tu tema de WordPress no usa jQuery, muchos plugins populares de WordPress todavía lo necesitan.
Sin embargo, si estás seguro de que tu sitio web no necesita jQuery, entonces puedes deshabilitarlo de forma segura.
Simplemente agrega el siguiente código al archivo functions de tu tema, a un plugin específico del sitio o a un plugin de fragmentos de código como WPCode.
if ( !is_admin() ) wp_deregister_script('jquery');
Eso es todo. Este código simplemente deshabilita la carga del script jQuery en el front-end de tu sitio web de WordPress.
Solución de problemas de jQuery en WordPress
Las nuevas versiones de jQuery a veces pueden desaprobar o eliminar métodos y funciones antiguas. Si un plugin de WordPress en tu sitio web está utilizando un método más antiguo, esto podría causar problemas.
Es posible que notes advertencias en el área de la Consola de la herramienta Inspect, o que algunas funciones simplemente hayan dejado de funcionar.
WordPress solía usar un script llamado jQuery-migrate para proporcionar compatibilidad de respaldo con versiones anteriores de jQuery. Sin embargo, desde WordPress 5.5, este script ha sido retirado de WordPress.
Si desea volver a agregar el script jQuery-migrate o solucionar problemas entre diferentes versiones de jQuery, puede intentar el siguiente método.
Simplemente instale y active el plugin Version Control for jQuery. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, deberá visitar la página Ajustes » Control de Versión de jQuery. Desde aquí, puede elegir la versión de jQuery que desea utilizar.
El plugin cargará automáticamente esa versión desde la CDN oficial de jQuery.
El plugin también cargará el script de migración de jQuery. Si lo deseas, puedes deshabilitarlo durante la solución de problemas.
No olvides hacer clic en el botón 'Guardar Cambios' para guardar tus modificaciones.
Esperamos que este artículo te haya ayudado a aprender cómo reemplazar el jQuery predeterminado de WordPress con la biblioteca de Google. También te pueden interesar estos útiles tutoriales de jQuery para usuarios de WordPress, o consulta nuestra guía completa de optimización del rendimiento de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Mrteesurez
Al reemplazarlo manualmente cuando WordPress podría lanzar nuevas versiones de actualización de WordPress y creo que todas las actualizaciones necesarias deberían haberse realizado antes de lanzarlo, ¿o hay algún dato sobre esto?
Además, ¿necesito deshabilitar jQuery por completo como me has instruido en este artículo antes de usar el de la biblioteca de Google, ya que has dicho que el integrado podría ralentizar el sitio web, especialmente en un hosting compartido?
Soporte de WPBeginner
WordPress también podría lanzar una actualización, pero depende de las necesidades individuales si desean tener una versión más reciente de jQuery.
Si estás siguiendo los pasos de este artículo, recomendamos deshabilitar la versión antigua para evitar que se ejecuten varias versiones de jQuery al mismo tiempo y causen un conflicto.
Administrador
Mrteesurez
Gracias. Agradezco tu respuesta y orientación. Ni siquiera pensé en el conflicto, estaba pensando si los dos al mismo tiempo no ralentizarían un sitio por completo. Me ceñiré a tus instrucciones al ejecutarlo. Gracias por tomarte tu tiempo para responder.
ALEX
Hola,
Tenemos un servidor en China y todos los recursos de Google están bloqueados por el cortafuegos del gobierno chino.
Pero, los recursos de Jquery y Fuentes se cargan desde Google en Wordpress por defecto ahora, y el sitio causa un retraso grave.
Entonces, ¿hay alguna manera de forzar que los recursos Js o CSS se carguen desde el servidor local, por favor?
Gracias
Soporte de WPBeginner
Si tienes una dirección web para los archivos de jquery en un servidor local, entonces cambiarías la URL en el fragmento para que apunte a donde se encuentra jquery.
Administrador
Wilbur
Hey, sorry for haling this post out of the grave…
How relevant is this still? In Terms of the latest P Core versions?
Gracias
Jorge
Hola,
Aquí hay una implementación más avanzada:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Donde "cdn.yourdomain.com" debe ser reemplazado por la ruta del archivo, usando un CDN para un mejor resultado.
Saludos cordiales,
Jorge Ortiz
Simon
Tanto la solución del post como esta rompen mi sitio
Plato39
El código de Jorge me funcionó, pero las comillas deben ser reemplazadas. Intenta esto:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Plato39
OK – es esta página web la que está agregando las comillas elegantes. Simplemente haz un 'buscar y reemplazar' en tu editor de texto (o reemplaza manualmente las comillas por unas normales) y el código funcionará en el archivo functions.php de tu tema.
Shaurya
¿qué pongo en la url si no tengo un cdn?
will
hola
muchas gracias por tu publicación, intenté cambiarlo y no sé si lo hice bien porque mi web ahora es 2 segundos más lenta
¿Cómo compruebo si lo hice bien y si estoy utilizando las bibliotecas de Google?
Ihsan
Probé el código anterior y reemplacé la última línea con esto para que funcione y sea mejor
add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );
Alejandro
Hola, gracias por tus consejos. No sé por qué al usar esta función, el jquery de Google se carga dos veces, es decir, tengo dos solicitudes HTTP en lugar de una. Aquí está la prueba: http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com.
Con jquery.easing sucede lo mismo, pero esta vez con 3 solicitudes HTTP para el mismo archivo.
¿Alguna idea? He estado revisando el código pero no encontré duplicación de wp_enqueue_script(”);
Thank you in advance
Alejandro
Acabo de notar que cuando estoy conectado, el jquery de Google solo se carga una vez.
Mathieu
¡Gracias! El jQuery solía romper la funcionalidad de mi administrador, ahora eso está resuelto.
Mitch
Gracias, muy apreciado.
Joseph Chambers
¿Qué pasa si quiero cargar HTTP o HTTPS según lo que el visitante esté visitando en nuestra página?
para la mayoría de las cosas podemos cambiar: http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js -> //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js y funciona. Sin embargo; algo en wp_register_script() está lanzando un error (página blanca con la palabra: Error) cuando cambio eso. ¿ideas, soluciones?
Sajid Iqbal
Gracias Syed por esta gran publicación. Me ahorró mucho tiempo.
Matt Ogborne
¡Muy útil, gracias!
Matt
Riversatile
Hola,
Aquí está la última versión del archivo jquery de googleapi.
Cuando copies/pegues el código de arriba, no olvides reemplazar la URL de jquery por esta:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Luego reemplaza "1.4.4" por "1.6.2"
Así:
//Haciendo jQuery Google APIfunction modify_jquery() { if (!is_admin()) { // comenta las siguientes dos líneas para cargar la copia local de jQuery wp_deregister_script(‘jquery’); wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js’, false, ‘1.6.2’); wp_enqueue_script(‘jquery’); }}add_action(‘init’, ‘modify_jquery’);
vnu
¿Alguien podría decirme si necesito modificar (!is_admin) a una capacidad "mínima" si uso un plugin como el de pestañas y acordeones de thethefly? ¿Así las pestañas creadas en las páginas son visibles para todos?
¡Gracias!
Melissa Cleaver
¡Muchas gracias por el código, pero cuando intenté usarlo en mi archivo functions.php, obtuve un error fatal, sin importar dónde lo pusiera en el código. ¿Estoy haciendo algo mal aquí?
Personal editorial
Prueba el nuevo código que acabamos de publicar.
Administrador
swanie
Pregunta: ¿La Biblioteca de Google hace un buen trabajo al extraer la información de la etiqueta alt de la biblioteca de medios? … Tengo varios temas profesionales que usan un slider jQuery principal en la página, pero no extraen la etiqueta alt … por lo tanto, el código fuente se ve así: alt="" … lo cual, por supuesto, es un "no-no" para el SEO. Nunca he usado el script de la Biblioteca de Google … me gustaría saber cómo funciona. ¿Cuál es tu experiencia?
Personal editorial
¿Etiqueta alt para qué? Esto solo está reemplazando el javascript….
Administrador
swanie
OK… supongo que estoy hablando específicamente de los sliders de jQuery… He comprado varios temas profesionales con un slider principal de jQuery… aquí hay uno de ellos: http://coloradospringsautomechanics.com… si ves el código fuente, extrae las imágenes, pero no las etiquetas alt… la etiqueta alt está vacía.
Supongo que al leer esta publicación, este enfoque de Google Library podría resolverlo.
Otra solución podría ser abrir los archivos del plugin y agregar a la etiqueta alt, así que debería tener:
img src=\"file.jpg\" alt=\"\" title=\"\"
Solo me pregunto por qué estos sliders de jQuery no extraen las etiquetas alt. ¿Tiene sentido? ¿Estoy fuera de tema?
Ustedes son geniales, por cierto.
Aamir Rizwan
Tu sitio web está marcado como "malware" por Google.
Geraldo
//Fuera de tema
@Swanie
Ve y mira aquí: http://sitecheck.sucuri.net/results/coloradospringsautomechanics.com/
Reporte de seguridad (Advertencias encontradas):
error En lista negra: Sí
error Probablemente comprometido: Sí
//En tema
¿No podemos: "agrupar" todos nuestros scripts de JQuery? ¿Tenemos que hacer una llamada por cada script por separado?
Soporte de WPBeginner
@Geraldo: puedes resolver dependencias. Por ejemplo, si estás cargando un script de jQuery, obviamente necesitará jQuery, así que lo agregas como dependencia y WordPress lo pondrá en cola por ti.