Cómo solucionar errores de JavaScript en WordPress

Como propietario de un sitio de WordPress, ocasionalmente te encontrarás con errores que pueden impedir que tu sitio funcione correctamente. Estos problemas de JavaScript pueden ser difíciles de solucionar, especialmente para los principiantes en línea.

JavaScript es una parte crucial de los temas y plugins de WordPress. Esto significa que los problemas relacionados con JavaScript pueden afectar rápidamente las funciones principales, ralentizar tu sitio o afectar la experiencia del usuario.

En esta guía, te explicaré cómo encontrar y solucionar errores de JavaScript en WordPress, desde detectarlos en la consola del navegador hasta aislar conflictos de plugins y temas y ejecutar WordPress en modo de depuración seguro.

Cómo solucionar errores de JavaScript en WordPress

Normalmente encontrarás la causa de un error de JavaScript en pocos minutos una vez que sepas dónde buscar. A continuación, se presentan los cinco lugares que reviso primero, además de algunos hábitos que ayudan a prevenir que estos errores ocurran en el futuro.

Cómo identificar y solucionar problemas de JavaScript

Los errores de JavaScript pueden ocurrir por una variedad de razones. Te mostraré los mejores lugares donde buscar para descubrir qué está causando el problema en tu sitio.

1. Usar las herramientas de desarrollador del navegador

La consola del navegador es tu mejor aliada cuando se trata de identificar errores de JavaScript. Aquí te explico cómo acceder a ella:

Primero, abre la página en la que estás experimentando el error de JavaScript. Luego, haz clic derecho en cualquier lugar de la página y selecciona Inspeccionar para abrir el menú de desarrollador de tu navegador.

Si prefieres usar un atajo de teclado, presiona Cmd+Option+J en Mac (o Ctrl+Shift+J en Windows) para Chrome. En Firefox, el equivalente es Cmd+Option+K o Ctrl+Shift+K.

Una vez aquí, navega a la pestaña Consola para ver las advertencias relacionadas con JavaScript. Si no se muestran errores, es posible que necesites recargar la página.

Los problemas de JavaScript suelen aparecer en texto rojo en la consola. Al solucionar problemas, busca mensajes que proporcionen pistas sobre qué script, archivo o función está causando el problema.

Una vez que hayas identificado los errores de JavaScript en la consola, puedes rastrearlos hasta su origen. Aquí tienes algunos de los errores más comunes que probablemente verás en la consola de tu navegador.

• Uncaught ReferenceError: jQuery is not defined: Un script intentó usar jQuery antes de que se cargara, o nada lo cargó. Los temas de bloque creados en el Editor de Sitio no ponen en cola jQuery a menos que un plugin lo solicite.
• Uncaught TypeError: $ is not a function: jQuery se cargó en modo noConflict y un script usó el atajo $ de todos modos. Envolver el fragmento en un bloque jQuery(function($) { }) normalmente lo soluciona.
• Uncaught SyntaxError: Un error tipográfico o un carácter suelto en código personalizado. La consola nombra el archivo y el número de línea, lo que normalmente es suficiente para encontrarlo.
• Uncaught TypeError: Cannot read properties of undefined: El script se ejecutó antes de que existiera el elemento al que se dirige en la página. Esto es común cuando un fragmento se carga en la cabecera en lugar de en el pie de página.
• Un 404 o net::ERR_ABORTED en un archivo .js: El archivo nunca se cargó. Mira tu CDN, tu plugin de caché o un archivo que fue renombrado durante una actualización.

En la mayoría de los casos, el problema mostrará el archivo/ubicación de donde se origina el error. A partir de ahí, puedes determinar si está relacionado con un plugin o un tema.

2. Identificar conflictos de plugins o temas

La mayoría de los errores de JavaScript en WordPress a menudo son causados por conflictos de plugins o temas. Si varios plugins o temas utilizan bibliotecas de JavaScript incompatibles o funciones duplicadas, pueden crear problemas.

Así es como se solucionan los conflictos:

Conflictos de temas

Recomiendo cambiar temporalmente a un tema predeterminado de WordPress. Al menos uno de estos temas suele venir preinstalado en tu sitio de WordPress. Siempre se nombran según el año (por ejemplo, Twenty Twenty-Six).

Para activar uno de los temas predeterminados de WordPress, dirígete a Apariencia » Temas desde tu panel de WordPress. Luego, pasa el ratón sobre un tema predeterminado y haz clic en Activar.

Si los problemas desaparecen después de cambiar de tema, es probable que sea un problema con tu tema de WordPress.

La solución inmediata es comprobar si hay actualizaciones. Si hay una nueva versión disponible, haz clic en el enlace Actualizar ahora para actualizar tu tema.

A menudo, una actualización del tema podría haber solucionado problemas críticos de JavaScript. Si el problema persiste, recomiendo contactar al desarrollador del tema y cambiar temporalmente a un tema nuevo.

WPForms también documenta los conflictos de temas comunes que aparecen con más frecuencia.

Conflictos de plugins

Si cambiar a un tema predeterminado no resuelve el error, el siguiente paso es comprobar conflictos de plugins.

Para hacerlo, necesitarás desactivar todos los plugins de tu sitio y comprobar si el error de JavaScript persiste. Para una guía más completa, consulta nuestra guía sobre cómo probar conflictos de temas o plugins.

Para ello, ve a Plugins » Plugins instalados y haz clic en la casilla para seleccionar todos los plugins.

Después de eso, haz clic en el desplegable Acciones en bloque y selecciona Desactivar.

A continuación, haz clic en Aplicar para desactivar todos los plugins de tu sitio de WordPress.

Si el error ha desaparecido, es probable que uno de tus plugins de WordPress sea la causa del problema. Para encontrar el plugin defectuoso, reactiva los plugins uno por uno. Para ello, haz clic en Activar debajo del nombre del plugin.

Crea tu formulario de WordPress ahora

Una vez que actives un plugin, comprueba si el error vuelve a aparecer. El plugin que activaste antes de ver el error de nuevo es probablemente el culpable.

Después de identificar el plugin defectuoso, recomiendo comprobar si hay actualizaciones disponibles. Si las hay, asegúrate de actualizar el plugin.

El desarrollador del plugin puede haber lanzado una actualización que resuelva el problema. Pero si no hay actualizaciones disponibles, considera eliminar el plugin defectuoso y cambiar a un plugin alternativo.

3. Usar herramientas de depuración en WordPress

WordPress incluye herramientas de depuración integradas que pueden ayudarte a descubrir problemas de JavaScript. Cuando habilitas el modo de depuración en tu sitio, WordPress mostrará cualquier error que encuentre en el frontend de tu sitio.

Para habilitar el modo de depuración, necesitarás acceder a tus archivos de WordPress en tu servidor, ya sea a través de FTP, cPanel, o un plugin de administrador de archivos FTP.

Una vez que tus archivos de sitio estén abiertos, necesitarás abrir wp-config.php para editarlo. Estará ubicado en la carpeta raíz de tu sitio. En tu archivo wp-config.php, establece WP_DEBUG a true. Esto activa el modo de depuración de WordPress y registra los errores.

define( 'WP_DEBUG', true );

WPForms tiene un tutorial más completo sobre cómo habilitar la depuración en WordPress si deseas más detalles sobre las constantes disponibles para ti.

WordPress también incluye constantes adicionales que le permiten solucionar problemas en otras áreas del software principal. Por ejemplo, si desea ver las versiones no minimizadas de los scripts principales de WordPress, agregue el siguiente fragmento al editor de código wp-config.php:

define('SCRIPT_DEBUG', true);

Cuando SCRIPT_DEBUG está habilitado, WordPress cargará archivos como wp-includes/js/script.js en lugar de wp-includes/js/script.min.js. Esto puede ser muy útil al desarrollar o depurar un sitio, ya que proporciona acceso completo al código para una inspección y modificación más sencillas.

Si desea almacenar los registros de errores en un archivo en lugar de mostrarlos en el frontend de su sitio, deberá habilitar la constante WP_DEBUG_LOG. Para hacerlo, agregue la siguiente línea de código a su archivo wp-config.php.

define('WP_DEBUG_LOG', true);

Cuando WP_DEBUG_LOG está habilitado, registra los errores en un archivo ubicado en wp-content/debug.log. Este registro a menudo contiene información valiosa sobre qué scripts están funcionando mal.

4. Habilitar el modo de solución de problemas

Si deshabilitar plugins o cambiar de tema interrumpe su sitio web, considere usar el Modo de solución de problemas con herramientas como Health Check & Troubleshooting. Para hacerlo, deberá instalar y activar el plugin Health Check & Troubleshooting en su sitio.

El plugin le permite activar el Modo de solución de problemas sin afectar a los visitantes de su sitio. Este enfoque es particularmente útil en sitios en vivo donde no puede permitirse tiempo de inactividad.

Después de activar el plugin, vaya a Herramientas » Salud del sitio desde su área de administración de WordPress. Luego, navegue hasta la pestaña Solución de problemas.

Ahora, haga clic en el botón Activar modo de solución de problemas para continuar.

Esto deshabilitará todos los plugins de su sitio y también configurará su sitio con un tema predeterminado. Será dirigido a la pantalla del Modo de solución de problemas.

Aquí, puede administrar su tema y plugins en un entorno controlado. Si hay algún problema en su sitio, los verá en la sección Avisos.

Su sitio utilizará un tema nativo de WordPress por defecto después de habilitar el Modo de solución de problemas.

Sugiero revisar su sitio para ver si usar un tema predeterminado soluciona el error en su sitio. Si es así, el problema probablemente esté relacionado con su tema de WordPress.

Hacer clic en el menú desplegable Plugins disponibles mostrará todos los plugins de su sitio. Aquí, podrá activar los plugins uno por uno para verificar conflictos de plugins. Para activar un plugin, haga clic en Activar junto al nombre del plugin.

Siga los pasos en la sección solución de conflictos de plugins de esta guía para obtener más detalles. Cuando haya terminado de solucionar problemas de su sitio, haga clic en el botón Desactivar modo de solución de problemas para devolverlo a su estado original.

5. Comprobación de conflictos de plugins de rendimiento

Si el error solo aparece en tu sitio en vivo, solo para visitantes desconectados, o desaparece en el momento en que desactivas la caché, un plugin de rendimiento es la causa probable.

Ajustes como Diferir JavaScript, Retrasar JavaScript, Minificar y Combinar cambian el orden en que se ejecutan tus scripts. Ese orden es importante porque jQuery no se puede diferir de forma segura cuando otros scripts esperan que esté listo primero.

Plugins como WP Rocket, LiteSpeed Cache, Autoptimize y Perfmatters incluyen estas opciones, y a menudo se activan con un ajuste de optimización de un clic en lugar de deliberadamente.

Los temas de bloques creados en el Editor de Sitio no encolan jQuery en absoluto a menos que algo lo solicite explícitamente, por lo que un fragmento que funcionaba bien en un tema antiguo puede romperse después de cambiar a Twenty Twenty-Six.

Una interrupción de la CDN hace algo similar, llevándose tus scripts con ella cada vez que un plugin carga jQuery desde una CDN en lugar de desde WordPress mismo.

• Para probar esto, desactiva toda la optimización de JavaScript en tu plugin de rendimiento, borra todas las cachés y recarga la página.
• Si el error desaparece, vuelve a activar una configuración a la vez hasta que regrese. Luego, agrega el script que se rompe a la lista de exclusión de esa configuración.
• Para jQuery en sí, la ruta a excluir es /wp-includes/js/jquery/jquery.min.js.

Si WP Rocket es tu plugin de caché, WPForms tiene un documento sobre cómo configurar sus ajustes de optimización. El documento sobre JavaScript no se carga correctamente cubre una lista de verificación más amplia.

Mejores prácticas para evitar errores de JavaScript

A continuación, compartiré algunos consejos para ayudarte a proteger tu sitio de WordPress y evitar que ocurran problemas relacionados con JavaScript.

• Mantén tu sitio actualizado: Actualizar regularmente WordPress, tu tema y otros plugins puede ayudar a evitar conflictos y errores. A menudo, el problema que encuentras probablemente se habrá resuelto con una actualización reciente del plugin o tema. Dejar que las actualizaciones se acumulen es uno de los errores más comunes de WordPress con los que me encuentro.
• Usa un tema hijo para personalizaciones: A veces, al actualizar tu tema o plugins se sobrescribirán fragmentos de código personalizados que hayas agregado a tu sitio. Esto puede resultar en funcionalidades de JavaScript rotas. Usar un tema hijo asegura que tus fragmentos personalizados no se modifiquen.
• Verifica los fragmentos de JavaScript personalizados: Si has agregado JavaScript personalizado en tu tema o plugin de WordPress, verifica que esté formateado correctamente. Además, comprueba que sea compatible con los demás scripts de tu sitio. Sugiero envolver el JavaScript en línea con una función o usar jQuery para evitar conflictos.
• Carga los scripts correctamente: Si estás agregando algún script personalizado, debes cargarlo correctamente usando las funciones de WordPress para evitar problemas de carga. Aquí tienes un ejemplo:

function my_custom_scripts() { 
          wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), null, true); 
} 
add_action('wp_enqueue_scripts', 'my_custom_scripts');

• Prueba en varios navegadores: Los navegadores modernos han estandarizado en gran medida sus implementaciones de JavaScript. Sin embargo, sigue siendo importante probar tu sitio en diferentes navegadores, incluidas las versiones antiguas de Internet Explorer. Esto puede ayudar a identificar problemas específicos del navegador en las primeras etapas del proceso de desarrollo web.
• Implementa un manejo de errores adecuado: Las buenas prácticas de manejo de errores en tu fragmento de JS personalizado pueden evitar que muchos problemas causen interrupciones importantes. Esto incluye el uso de bloques try-catch y la provisión de opciones de respaldo siempre que sea posible.

A continuación, explore los mejores plugins para usar en WordPress

En esta publicación, le he mostrado cómo identificar y solucionar errores de JavaScript en WordPress. Como regla general, recuerde mantener actualizados los plugins y temas y seguir las mejores prácticas al agregar JavaScript personalizado.

Además, asegúrese de usar plugins recomendados en su sitio de WordPress y evite usar versiones anuladas de plugins como el plugin anulado de WPForms Pro.

Crea tu formulario de WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.