Cómo agregar JavaScript a una página de WordPress (+ consejos de depuración)

¿Quieres agregar JavaScript a una página de WordPress, pero crees que lo estás haciendo mal o ni siquiera sabes por dónde empezar? ¿O ya lo hizo y está viendo mensajes de error y/o problemas de rendimiento que no sabe cómo solucionar problemas?

De cualquier manera, estás en el lugar correcto.

Esta publicación será una educación de primera fila en todo lo relacionado con JavaScript y WordPress. Al final, sabrá todo lo que necesita sobre por qué usar JavaScript en WordPress es una buena idea, cómo agregarlo a sus páginas y qué hacer cuando no funciona correctamente o ralentiza su sitio.

¿Por qué agregar JavaScript a sus páginas de WordPress?

JavaScript, a menudo abreviado a JS, es un lenguaje de programación popular. Es una de las tres tecnologías principales utilizadas para crear páginas web. Los otros dos son HTML, que define la estructura y el contenido de la página, así como el CSS, que es responsable del estilo.

JavaScript es un idioma del lado del cliente, lo que significa que se ejecuta en el navegador, no en el servidor. Debido a eso, puede usarlo para modificar y actualizar CSS y HTML existentes incluso después de que una página haya terminado de cargar.

Es por eso que uno de sus principales usos es hacer que las páginas web sean más interactivas. Por ejemplo, JavaScript a menudo impulsa elementos de página como:

• Menús deslizantes

• Ventanas emergentes

• Animaciones

El editor de bloques de WordPress también está escrito principalmente en JavaScript.

Además de la interactividad, JavaScript también es una forma común de integrar los servicios de terceros en su sitio, como el seguimiento de los scripts para análisis web. Otros ejemplos incluyen:

• Chat en vivo

• Formularios de opción y contacto de correo electrónico de correo electrónico

• Videos incrustados

• Mapas interactivos

• Feeds de redes sociales

Consideraciones importantes

Si se hace incorrectamente, agregar JavaScript a sus páginas de WordPress puede conducir a errores y problemas. Tomar precauciones desde el principio puede ahorrarle tiempo y frustración más tarde:

• Solo use JavaScript de fuentes de confianza para mantener su sitio seguro y estable.

• Tome una copia de seguridad completa de los archivos y la base de datos de su sitio web antes de hacer cambios en caso de que algo salga mal.

• Cuando agrega JavaScript directamente a los archivos de temas, siempre use un tema infantil. Si modifica el tema principal, perderá sus cambios cuando lo actualice.

• Pruebe los cambios en un entorno de estadificación o desarrollo antes de aplicarlos a su sitio en vivo.

• JavaScript agrega código adicional a sus páginas de WordPress, que pueden retrasarlas. Realice un seguimiento del rendimiento al introducir nuevas funciones en su sitio.

6 formas de agregar JavaScript a una página en WordPress

Suficiente con la teoría. A continuación, le mostramos seis formas de agregar JavaScript a WordPress, desde la mayoría hasta menos técnico.

1. Use ganchos y funciones de WordPress

Los ganchos son piezas de código colocadas dentro del proceso de carga de WordPress donde puede adjuntar el código personalizado (llamado "funciones") para que se ejecute en un momento o ubicación particular.

Por ejemplo, wp_head () se ejecuta en la sección <BEAD> en la parte superior de su sitio. Si desea usarlo para agregar JavaScript a una página de WordPress, debe hacerlo en el archivo functions.php de su tema (hijo), por ejemplo, así:

 function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Ingrese su código JavaScript donde dice: "Coloque su código JavaScript aquí". También puede cambiar el nombre de la función de "add_custom_script" a algo más descriptivo.

Este método es excelente para scripts más pequeños con fines muy claramente definidos, como el código de seguimiento de análisis simple o los elementos interactivos básicos. También funciona para cargar JavaScript en el pie de página, que es una solución popular para mejorar el rendimiento de la página. Simplemente use wp_footer () en lugar de wp_head ().

El cabezal y el pie de página son ubicaciones populares para cargar scripts porque generalmente aparecen en todas partes en un sitio web. Eso los convierte en una excelente manera de agregar JavaScript a todas las páginas de un sitio de WordPress.

Si solo desea cargar JavaScript en páginas específicas, puede combinar este método con una declaración condicional:

 function add_custom_script() { if (is_page(123)) { ?> <script> // Place your JavaScript code here </script> <?php } } add_action('wp_head', 'add_custom_script');

La parte que limita esto a una sola página es IS_PAGE (123). El "123" es la ID de página, que debe actualizar a la ID de su página si desea usar este código. Aparece en la barra del navegador cuando abre su página en el editor de WordPress. También puede usar IS_Page () para atacar las páginas por nombre o Slug URL.

2. Cargue JavaScript en un archivo separado

Otra opción es poner su JavaScript en su propio archivo. Esta es una buena idea, especialmente para scripts grandes, pero también tiene sentido en general porque le permite cargar sus archivos con las funciones wp_register_script () y wp_enqueue_script ().

Ese es el método preferido porque ayuda a evitar conflictos, cargar scripts en el orden correcto y administrar dependencias. Esto es lo que parece:

 function enqueue_custom_script() { wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true ); wp_enqueue_script('my-custom-script'); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');

En este ejemplo, el script se coloca en el directorio de temas, al que nos dirigimos con get_template_directory_uri () (para temas infantiles, use get_stylesheet_directory_uri () en su lugar). La matriz ('jQuery') indica que este script depende de jQuery y debe cargarse después de ella. El '1.0.0' es el número de versión, y 'verdadero' significa que WordPress debe cargar el script en el pie de página.

Esta también funciona y es la forma correcta de cargar JavaScript de terceros, como los códigos de seguimiento. Asegúrese de actualizar el código en su caso de uso antes de colocarlo en su sitio.

3. Incluya el código en los archivos de temas

Los ganchos son una excelente manera de enzar todos sus guiones JS desde un solo lugar, pero no son la única forma de cargarlos en su tema.

En lugar de usar wp_head () para cargar algo en la sección del cabezal, puede lograr lo mismo publicando su script o un enlace directamente al archivo del tema a su archivo de tema de encabezado.

En temas clásicos, eso suele ser encabezado.php . Encuéntralo en su tema, haga una copia y colóquela en el tema de su hijo, luego incluya el script directamente en algún lugar de la sección <Bead>.

Si desea cargarlo solo en una determinada página, puede usar una declaración condicional como antes. Alternativamente, gracias a la jerarquía de plantillas, también es posible crear un archivo personalizado solo para esa página, por ejemplo , página-Contact.php .

4. Cree un complemento personalizado

El problema con agregar JavaScript a las páginas de WordPress usando archivos de tema es que hace que el código dependa del tema. Cuando cambias de temas, tu JavaScript también desaparece.

Puede evitarlo usando un complemento personalizado. Esto hace que el tema del código sea independiente y también le permite activarlo y desactivarlo en el menú de complementos de WordPress.

Aquí está el marcado para un complemento simple para agregar JavaScript a sus páginas de WordPress:

 <?php /* Plugin Name: Custom JavaScript Loader Plugin URI: https://yourwebsite.com Description: A simple plugin to add custom JavaScript to WordPress pages. Author: Your Name Author URI: https://yourwebsite.com Version: 1.0 */ function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Coloque este código en un archivo PHP y asegúrese de ajustar el nombre del complemento , URI de complemento , descripción , autor y URI del autor a su propia información, tal como aparece en el menú de complementos de WordPress.

Nombra el archivo algo significativo, por ejemplo , seguimiento personalizado-código-plugin.php , luego cárguelo en un directorio del mismo nombre dentro de WP-Content/Plugins en tu instalación de WordPress. Después de eso, debería aparecer en el menú de complementos .

5. Agregue JavaScript en el editor de WordPress

Si bien este no es el método más recomendado, también es posible agregar JavaScript directamente a una página usando el editor de WordPress. Para hacerlo, agregue un nuevo bloque (haga clic en el botón Plus o use una barra de reenvío) y elija el bloque HTML personalizado .

Simplemente inserte su código JavaScript para que se cargue directamente en la página.

Solo asegúrese de usar las etiquetas de apertura <script> y cierre </script> y guarde sus cambios en el editor para que entren en vigencia.

También puede agregar JavaScript al editor clásico utilizando la pestaña Código .

6. Use un complemento de fragmento de código

No sería WordPress si no hubiera una solución de complemento para agregar JavaScript a su sitio. De hecho, hay varios, incluidos:

• Wpcode

• Administrador de código de pie de página del encabezado

• CSS y JS personalizados simples

• Caja de herramientas CSS y JavaScript

Los complementos le permiten administrar mejor su JavaScript. Puede nombrar sus fragmentos, organizarlos en categorías, encenderlos y apagarlos selectivamente y configurar reglas condicionales. Además, como la solución de complemento personalizado, hace que su JavaScript sea independiente del tema.

Usar estos complementos también es simple. Por lo general, agregan un nuevo menú a su sitio donde puede administrar sus fragmentos de JavaScript.

Simplemente cree un nuevo fragmento, inserte su código, luego configure dónde desea que aparezca.

Eso es todo.

Solución de problemas de JavaScript en WordPress

Ahora sabe cómo agregar JavaScript a su sitio web y páginas de WordPress. Pero, ¿y si algo no funciona como se supone? Pasaremos la parte final de este artículo hablando sobre cómo identificar y resolver los problemas de JavaScript con los que podría encontrarse.

1. Verifique las herramientas del desarrollador del navegador

Una forma de verificar los errores de JavaScript es usar las herramientas de desarrollador de su navegador. Le permiten inspeccionar el código de sitio subyacente, incluidos los scripts.

Puede abrirlos haciendo clic derecho en cualquier página web y eligiendo Inspect .

Alternativamente, acceda a ellos a través del menú del navegador, por ejemplo, en Chrome, se encuentran en más herramientas> Herramientas para desarrolladores .

También hay atajos de teclado para abrirlos, en Chrome, Edge y Firefox es Ctrl/Cmd+Shift+I , en Safari CMD+Opt+C.

Abra las herramientas de desarrollo en su sitio y luego vaya a la pestaña de la consola . Debería ver cualquier error, incluidos los causados ​​por JavaScript aquí.

Tenga en cuenta que es posible que tenga que volver a cargar la página para que se presenten. Los errores de JavaScript más comunes son:

• ReferenceError: indica una variable o función faltante o indefinida.

• TypeError: sugiere que hay un problema con una operación, por ejemplo, tratando de usar un valor de un tipo inapropiado.

• SyntaxError: a menudo ocurre debido a un error tipográfico o un formato incorrecto en el código, como los soportes faltantes, los semicolones o las citas.

Desea averiguar qué script, archivo o función está causando el error para que pueda corregirlo. Ayuda a usar puntos de interrupción en la pestaña Fuentes , lo que le permite detener la ejecución de JavaScript e inspeccionar lo que está sucediendo.

Use su motor de búsqueda o IA favorito para obtener más información sobre cualquier mensaje de error que encuentre. Además, también puede verificar la pestaña de red para ver si sus scripts se están cargando correctamente.

2. Resolver conflictos de tema y complementos

Los errores de JavaScript también pueden ocurrir debido a conflictos de tema y complementos, por ejemplo, cuando se usan bibliotecas incompatibles o funciones duplicadas.

Aquí le mostramos cómo solucionar estos problemas de JavaScript:

• Actualizar temas y complementos: su tema o desarrollador de complementos ya puede saber sobre el problema y los ha corregido en la última versión.

• Cambie temporalmente a un tema predeterminado: active un tema predeterminado de WordPress como veinticinco. Si el problema desaparece, es probable que su tema tenga la culpa.

• Desactive sus complementos: apague todos los complementos de su sitio y encienda uno por uno para ver cuándo reaparece el problema. Actualice o reemplace el complemento que lo causa.

El complemento de cheques de salud le permite simular todo lo mencionado anteriormente desde el tablero de WordPress (vaya a la pestaña Solución de problemas ) y revertir con un solo clic.

También tiene mucha más información adicional sobre el estado de su sitio web. Se recomienda que realice estas pruebas en un sitio web de desarrollo o estadificación, no en su sitio en vivo.

3. Use el modo de depuración

WordPress tiene un modo de depuración incorporado para ayudarlo a detectar y resolver problemas del sitio. Si bien no muestra directamente problemas con JavaScript, hace que sea más fácil encontrar PHP, complementos y errores de tema que puedan interferir con los scripts en su sitio.

Para activar el modo de depuración, abra su archivo wp-config.php (a través de FTP o su administrador de archivos de alojamiento) y agregue las siguientes líneas:

 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('SCRIPT_DEBUG', true);

Ya puede encontrar definir ('script_debug', falso); en el archivo. Si es así, simplemente cámbielo a "verdadero". Guarde y vuelva a cargar el archivo.

La configuración anterior habilita el modo de depuración, el registro de errores (los errores aparecerán en WP-Content/Debug.log ) y cargar versiones sin minificar de CSS y archivos JavaScript para rastrear los problemas más fácilmente.

Nuevamente, haga esto en un sitio de desarrollo, lejos de los ojos de sus visitantes. Además, no olvide eliminar este código para volver a la normalidad después.

4. Abordar problemas de rendimiento

Como cualquier otro código, agregar JavaScript a sus páginas de WordPress puede hacer que su sitio web sea más lento. A menudo notará que cuando acelere su sitio web y reciba una advertencia que dice "Reduzca el JavaScript no utilizado".

Para evitar problemas de rendimiento causados ​​por JavaScript, siga estas mejores prácticas:

• Elimine los scripts que no necesita: audite regularmente la carga de JavaScript en su sitio para ver si realmente lo necesita, especialmente los servicios de terceros.

• Cargue scripts en el pie de página: solo coloque los archivos JavaScript en la sección del cabezal cuando sea necesario que se carguen temprano.

• Combine scripts: combine varios scripts en un solo archivo (esto se llama "concatenación"). Un solo archivo grande a menudo se carga más rápido que varios más pequeños.

• Minificar archivos de JavaScript : esto elimina el formato innecesario y el espacio en blanco que es excelente para la legibilidad innecesaria para ejecutar código.

• Cargue JavaScript asíncronamente: lo que significa que el navegador no deja de procesar el sitio mientras carga archivos JavaScript, pero los carga en segundo plano y los ejecuta una vez descargado.

• Diferir scripts grandes: aquí, sus archivos también se descargan en segundo plano, pero solo se ejecutan después de que termine el resto del proceso de carga, por lo que no se interrumpe.

• Retrasar la ejecución de JavaScript : esto pospone la carga de todos los archivos JavaScript y los scripts en línea hasta que haya una interacción del usuario. Es como la carga perezosa para imágenes pero para archivos JavaScript.

Simplifique la optimización de rendimiento de JavaScript con WP Rocket

En lugar de hacer esto a mano, también tiene la opción de implementarlo mucho más fácilmente usando WP Rocket. Cuando está activo en su sitio, el complemento minifica JavaScript de forma predeterminada y puede combinar, retrasar, diferir y cargar asincrónicamente cualquier scripts en su sitio de WordPress simplemente revisando algunas cuadros en el menú de optimización de archivos .

Si es necesario, tiene la opción de excluir scripts, complementos y archivos individuales de que se optimicen, en caso de que interfiera con la capacidad de respuesta de los elementos de su página.

Aparte de eso, WP Rocket implementa automáticamente una serie de mejoras de rendimiento en el fondo, como:

• Almacenamiento en caché, incluido un caché móvil separado

• Compresión gzip

• Caché y enlaces de precarga

• Optimización crítica de la imagen (para excluir imágenes sobre el pliegue de la carga perezosa) para mejorar la pintura contenta más grande

• Renderizado perezoso automático para cargar elementos en la página más rápido

De hecho, simplemente instalar y activar el complemento implementa el 80% de las mejores prácticas de rendimiento en su sitio y lo hace más rápido de inmediato. Y si eso no es suficiente, hay muchas otras características que puede activar para aumentar la velocidad de su sitio, como:

• Carga perezosa para imágenes, incluidos fondos CSS, videos e iframes

• Precarga de archivos y fuentes externas

• Fuentes de Google autohostantes

• Optimización de la base de datos

• Opciones para conectarse fácilmente a un CDN, incluido Rocketcdn

¿Listo para agregar JavaScript a tus páginas de WordPress?

JavaScript ofrece muchas posibilidades emocionantes para los sitios web de WordPress, ya sea para agregar interactividad o integración con software de terceros. Hay muchas maneras en que puede agregarlo a sus páginas, dependiendo de su nivel de habilidad y preferencias.

Al mismo tiempo, JavaScript puede introducir errores y ser un factor importante en el rendimiento de la página. Por esa razón, es imperativo que agregue JavaScript a sus páginas de WordPress con cuidado.

Si está luchando con problemas de rendimiento relacionados con JavaScript, WP Rocket le ayuda a abordarlos de manera fácil y efectiva. Además, ofrece muchas otras funcionalidades para acelerar su sitio. ¡Obtenga WP Rocket hoy y pruébelo sin riesgos durante 14 días!