Añadir JavaScript personalizado a WordPress puede desbloquear nuevas funciones muy útiles, desde calculadoras interactivas hasta interfaces de usuario dinámicas. Pero si no eres desarrollador, puede resultar intimidante. ¿Dónde se coloca el código? ¿Cómo lo añades sin dañar tu sitio?
Esta guía te explicará los métodos más seguros y eficaces para añadir JavaScript a tu sitio, con ejemplos prácticos y buenas prácticas para asegurarte de hacerlo bien desde el primer intento.
¿Puedes usar JavaScript en WordPress?
JavaScript es un lenguaje de programación que puedes usar para mejorar la experiencia de usuario (UX) de un sitio web, haciendo que sea más interactivo y adaptable.
Por ejemplo, podrías usar JavaScript para crear una ventana emergente cuando un visitante haga clic en un botón. También podrías mostrar un mensaje cuando alguien pase el cursor sobre un elemento de tu página.
JavaScript puede añadir calculadoras, reproductores de vídeo y otras herramientas a las páginas y entradas de WordPress. Aunque necesitarás algunos conocimientos básicos de HTML y CSS para añadir JavaScript a WordPress, el proceso es bastante sencillo.
Qué hacer antes de añadir código JavaScript a WordPress
Al añadir código JavaScript a tu sitio de WordPress, es importante recordar que los errores en el código pueden dañar todo tu sitio. Si no te sientes cómodo trabajando con código, quizá quieras contratar a un desarrollador para que te ayude.
De lo contrario, asegúrate de tener una copia de seguridad del sitio antes de realizar cualquier cambio. De ese modo, si algo sale mal, siempre podrás volver a una versión funcional de tu sitio web.
Hay dos partes de tu sitio de WordPress de las que debes hacer una copia de seguridad antes de añadir personalizaciones:
- Base de datos: donde se almacenan todas tus entradas, páginas, ajustes y configuraciones.
- Archivos: tus imágenes, vídeos, temas y plugins.
Puedes usar un plugin como Jetpack para hacer una copia de seguridad de tu sitio de WordPress de forma rápida y sencilla. Otra opción es hacer una copia de seguridad de tus archivos manualmente. También deberías plantearte crear un tema hijo para añadir código personalizado.
Un tema hijo es un duplicado de tu tema actual que puedes personalizar sin afectar al código original. Puedes activar de nuevo el tema original para revertir cualquier cambio si cometes un error. Esto también te permite actualizar tu tema principal sin perder los cambios de código que hayas realizado.
Además, podrías considerar la posibilidad de probar tu JavaScript personalizado en un sitio de pruebas antes de añadirlo a tu sitio activo. Un sitio de pruebas es una copia de tu sitio web activo que puedes usar con fines de prueba. Es buena idea configurar uno por si algo sale mal con tus cambios de JavaScript.
Cómo añadir JavaScript a todo tu sitio de WordPress
Si quieres añadir JavaScript a todo tu sitio de WordPress, hay varios métodos diferentes. Un método consiste en añadir un archivo HTML personalizado a tu tema y, después, insertar el código JavaScript en ese archivo.
Otra forma es crear un plugin de WordPress que contenga tu código JavaScript. También puedes editar directamente tu archivo functions.php e insertar allí el código.
Como alternativa, para realizar cambios en todo tu sitio de WordPress, puedes añadir JavaScript a la cabecera o al pie de página. La forma más sencilla es instalar y activar el plugin Insert Headers and Footers. Exploremos los cuatro métodos en profundidad.
Cuatro formas de añadir JavaScript personalizado a WordPress
Hay distintas formas de añadir JavaScript personalizado para WordPress a tu sitio web. Aquí tienes una guía paso a paso para cada una:
Método 1: usar un plugin para añadir JS
La forma más sencilla de añadir JavaScript a WordPress es mediante un plugin. Este método es más flexible y fácil de gestionar que añadir el código directamente a tu tema.
Si no te sientes cómodo programando o quieres una solución más fácil de usar, te recomendamos utilizar uno de los muchos plugins disponibles para añadir JavaScript a WordPress.
Para este tutorial, usaremos Insert Headers and Footers.
Una vez activado el plugin, ve a Ajustes → Insertar encabezados y pies de página en tu panel de administración de WordPress.
Verás dos cuadros etiquetados como Scripts in Header y Scripts in Footer. Cualquier código que añadas a estos cuadros se insertará en el encabezado o pie de página de tu sitio. Aquí es donde añadirás tu JavaScript.
Supongamos que quieres añadir un cuadro de confirmación de JavaScript. En el cuadro Scripts in Header correspondiente, inserta el siguiente código:
<!DOCTYPE html>
<html>
<body>
<h2>Cuadro de confirmación de JavaScript</h2>
<button onclick="myFunction()">Pruébalo ahora</button>
<p></p>
<script>
function myFunction() {
var txt;
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>Este código mostrará un botón Probar en el encabezado. Cuando selecciones el botón, confirmará que lo has pulsado.
Puedes probar esta función visitando tu sitio web y haciendo clic en Probar para verla en acción.
Método 2: Añadir JavaScript a tu tema
Añadir JavaScript directamente a tu tema es uno de los métodos más sencillos. Tendrás que crear un archivo nuevo en el directorio de tu tema y ponerle un nombre como «custom.js».
Después, puedes añadir tu código JavaScript a ese archivo y guardarlo. Por último, edita tu archivo header.php y añade una línea de código para cargar el nuevo archivo JavaScript:
?php%20bloginfo('template_directory');%20?/custom.jsRecuerda sustituir «custom.js» por el nombre de tu archivo. Una vez que hayas añadido esa línea de código, guarda tu archivo header.php y súbelo a tu servidor. Tu código JavaScript debería estar ejecutándose ahora en todo tu sitio de WordPress.
Método 3: Usar funciones y hooks de WordPress
También puedes añadir código personalizado con las funciones y hooks de WordPress. Una función es un fragmento de código que realiza una acción específica. Por ejemplo, la función wp_enqueue_script() se utiliza para cargar un archivo JavaScript.
Un hook es una característica de WordPress que permite añadir código sin editar ningún archivo del núcleo. Hay dos tipos de hooks: acciones y filtros.
Una acción es una función PHP que se activa en puntos específicos durante la carga de una página. Por ejemplo, el hook de acción wp_head se activa antes de la etiqueta </head> en el archivo header.php de tu tema. Puedes usar este hook para añadir código o scripts personalizados a tu encabezado.
Los filtros modifican código o datos existentes. Por ejemplo, el filtro the_content puede modificar el contenido de una entrada antes de que se muestre.
Para añadir JavaScript personalizado a tu sitio de WordPress usando funciones y hooks, tendrás que insertar tu código en el archivo functions.php de tu tema hijo.
Añade una carpeta nueva en tu directorio de WordPress para crear un tema hijo. Después, crea un archivo style.css que contendrá los estilos de tu tema hijo. A continuación, tendrás que añadir el siguiente código a tu archivo style.css como se muestra a continuación:
/*
Theme Name: Twenty Twenty-Two Child
Template: twentytwentytwo
*/Ahora que has creado tu tema hijo, puedes activarlo yendo a Apariencia → Editor de archivos de temas desde el panel de administración de tu WordPress. Ve al archivo functions.php; después, añade el siguiente código:
function ti_custom_javascript() {
?>
<script>
// tu código JavaScript va aquí
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');Cuando hayas terminado, guarda los cambios.
Método 4: Crear un plugin
Si quieres mantener tu código JavaScript separado de tu tema, puedes crear un plugin de WordPress que lo contenga. Crear un plugin requiere más trabajo que añadir el código directamente a tu tema. Aun así, este enfoque puede ser más flexible y fácil de gestionar.
Para crear un plugin, primero tienes que crear un directorio nuevo en tu instalación de WordPress, dentro de wp-content/download/ y ponerle un nombre como «my-javascript-plugin».
Después, crea un archivo nuevo en ese directorio y llámalo “my-javascript-plugin.php”. El contenido de ese archivo debería verse así:
<?PHP
/*
Plugin Name: My JavaScript Plugin
Plugin URI: http://example.com/
Description: This plugin contains my JavaScript code.
Version: 1.0
Author: Jane Doe
Author URI: http://example.com/
*/
?>Reemplaza los campos Plugin Name, Plugin URI, Description, Author y Author URI con tus valores. Estos son simplemente campos de información general que describen tu plugin.
A continuación, debes añadir tu código JavaScript al archivo. El código debe ir debajo de la información inicial del plugin, pero antes de la etiqueta PHP de cierre (?>). Cuando hayas añadido el código, guarda el archivo y súbelo a tu servidor.
Tu plugin ya debería estar instalado y activado. Puedes comprobar que funciona accediendo a la página de Plugins en el panel de administración de WordPress. Allí debería aparecer tu plugin.
Cómo añadir JavaScript a una página o entrada específica de WordPress
Método 1: Añadir JavaScript con el editor de bloques
Con el editor de bloques, puedes añadir código directamente dentro de una entrada o página. Esto funciona bien si solo necesitas el script en una página. Ayuda a mantener tu sitio rápido.
Sigue estos pasos:
Primero, ve a la página o entrada que quieres editar. Haz clic en el botón de signo más para añadir un bloque nuevo. Busca el bloque “HTML personalizado”. Haz clic para añadirlo a tu entrada.
A continuación, copia todo tu código JavaScript. Pégalo directamente en el bloque de HTML personalizado. Tu código debe comenzar con <script> y terminar con </script>.
Por último, guarda tu trabajo. Haz clic en el botón Actualizar o Publicar. El script funcionará ahora en esa única página.
Método 2: Añadir JavaScript usando el archivo functions.php
Si quieres añadir JavaScript a una página o entrada de WordPress específica, puedes insertar el código directamente en el editor del tema. Ve al archivo functions.php y añade el siguiente código:
function ti_custom_javascript() {
if (is_single ('1')) {
?>
<script type="text/javascript">
// tu código JavaScript va aquí
</script>
<?php
}
}
add_action('wp_head', 'ti_custom_javascript');Debes cambiar el “1” del código anterior por el ID de la entrada o página. Puedes encontrar este número abriendo la entrada desde tu escritorio y buscando la URL en la barra del navegador. El número de ID aparecerá junto a “post=”:
Cuando reemplaces ese número y añadas tu JavaScript personalizado, recuerda guardar el archivo.
Cómo añadir JavaScript a tu menú de WordPress
Para añadir JavaScript a tu menú de WordPress, tendrás que crear un elemento de menú personalizado. Primero, localiza el número de ID del elemento del menú usando las Herramientas para desarrolladores y, después, usa jQuery para seleccionar ese ID. Esto activará el script cada vez que un visitante haga clic en el elemento del menú.
Cómo añadir JavaScript al pie de página de tu WordPress
La forma más sencilla de añadir JavaScript al pie de página de tu WordPress es usar un plugin como Insert Headers and Footers. Esta herramienta puede insertar código en el encabezado y el pie de página de tu sitio de WordPress sin editar ningún archivo del tema.
Para utilizar Insertar encabezados y pies de página, solo tienes que instalar y activar el plugin. Después, ve a Ajustes → Insertar encabezados y pies de página.
En la página de ajustes, verás tres cuadros para añadir código al encabezado, cuerpo y pie de página de tu sitio. Solo tienes que pegar tu código JavaScript en el cuadro Scripts in Footer correspondiente y hacer clic en el botón Save.
Otro método consiste en abrir functions.php para editarlo. Puedes insertar el siguiente código para ejecutar JavaScript en el pie de página de tu sitio:
function wpb_hook_javascript_footer() {
?>
<script>
// tu código JavaScript va aquí
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');Este código se conectará a wp_footer. Recuerda guardar el archivo para actualizar los cambios cuando termines.
Cómo añadir JavaScript a un widget de WordPress
Para añadir JavaScript a un widget de WordPress, tendrás que editar el código del widget. Para hacerlo, haz clic en el menú del widget y selecciona Editar como HTML.
En el editor de código del bloque, añade tus etiquetas <script> y el código JavaScript. Cuando termines, pulsa Actualizar para terminar.
Cómo añadir JavaScript con «onclick» a un botón de WordPress
Añadir un evento «onclick» a un botón de WordPress es una excelente manera de incorporar funcionalidades adicionales a tu sitio web. Puedes usar un evento onclick para activar una ventana emergente o mostrar un mensaje cuando se haga clic en el botón.
Para añadir un evento onclick a un botón de WordPress, tendrás que editar el código del botón y añadir el siguiente atributo: onclick=”your_function()”. Asegúrate de sustituir «your_function()» por el código JavaScript que quieras ejecutar cuando se haga clic en el botón.
Una vez que hayas añadido el atributo onclick, pulsa el botón Save. Ahora tu botón debería incluir el evento onclick.
Cómo encontrar y depurar un error de JavaScript en una página de WordPress
Para encontrar y depurar errores de JavaScript, puedes activar la depuración de scripts en el archivo wp-config.php de tu sitio.
Abre el archivo mediante un cliente de protocolo de transferencia de archivos (FTP) o tu gestor de archivos. A continuación, inserta el siguiente código:
define('SCRIPT_DEBUG', true);Recuerda colocar este código antes de la línea «That’s all, stop editing! Happy blogging».
Para encontrar y depurar errores de JavaScript en una página de WordPress, puedes usar tu navegador. En Google Chrome, haz clic en el icono de menú (tres puntos verticales) situado en la esquina superior derecha. Después, selecciona Más herramientas → Herramientas para desarrolladores en el menú desplegable.
También puedes acceder a las herramientas para desarrolladores pulsando Ctrl + Shift + J (Windows/Linux) o Cmd + Option + J (Mac).
Una vez abiertas las Developer tools, haz clic en la pestaña Console. Aquí verás cualquier error de JavaScript que se haya producido en tu sitio de WordPress.
Si no estás seguro de qué significa el error o de cómo solucionarlo, puedes buscarlo en Internet. Solo tienes que copiar y pegar el mensaje de error en un motor de búsqueda y deberías encontrar algunos resultados útiles.
También puedes intentar desactivar todos tus plugins de WordPress para comprobar si así se soluciona el problema. Si es así, sabrás que uno de tus plugins está causando el problema. También puedes determinar qué herramienta está causando el problema reactivando tus plugins de uno en uno hasta encontrar al culpable.
Si sigues teniendo problemas, considera ponerte en contacto con tu empresa de alojamiento de WordPress para obtener más ayuda. Deberían poder ayudarte a identificar y solucionar el problema.
Cómo añadir otros lenguajes de programación a WordPress (HTML, CSS, PHP)
Existen varios métodos para añadir otros lenguajes de programación a WordPress. Por ejemplo, puedes usar los bloques HTML personalizado o Código para añadir HTML personalizado a WordPress.
Otro método consiste en instalar un plugin como Code Snippets.
El plugin Code Snippets te permite añadir código directamente en el editor y asignarle un título. También puedes elegir si quieres ejecutar el código en el encabezado o en el pie de página de tu sitio.
Preguntas frecuentes (FAQ) sobre cómo añadir JavaScript a WordPress
A estas alturas, esperamos que ya tengas una comprensión sólida de cómo añadir JavaScript a WordPress. Ahora, veamos algunas preguntas frecuentes.
¿Cuál es la mejor manera de añadir JavaScript en línea a WordPress?
La mejor manera de añadir JavaScript en línea es usar wp_add_inline_script() como función de WordPress.
¿Cuál es la mejor manera de añadir una biblioteca de JavaScript a WordPress?
Si quieres añadir una biblioteca de JavaScript, puedes hacerlo editando el código de tu tema. Usaremos añadir y usar jQuery como ejemplo.
En tu panel de administración de WordPress, ve a Apariencia → Editor y busca el archivo llamado footer.php. Haz clic en este archivo para editarlo.
En la parte inferior del archivo, verás una línea de código similar a esta: “wp_footer();”. Añade el siguiente código encima de esta línea:
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery.js', array(), '1.0.0', true );Guarda los cambios. Tu biblioteca jQuery debería haberse añadido a WordPress. Puedes probarla visitando la interfaz pública de tu sitio web y comprobando si funciona correctamente.
¿Puedes añadir JavaScript personalizado mediante un shortcode de WordPress?
Puedes usar JavaScript personalizado con shortcodes de WordPress. Tendrás que añadir el siguiente código a tu archivo functions.php:
function my_shortcode_javascript() { ?> <script type="text/javascript"> // Add your javascript here </script> <?php } add_shortcode( 'my-shortcode', 'my_shortcode_javascript' );Este método te permitirá usar el siguiente shortcode en el contenido de tu entrada o página. Después, puedes usar esta misma técnica para poner en cola cualquier otro script que necesites para tu shortcode.
¿Puedes añadir JavaScript personalizado mediante el Editor de bloques?
Puedes añadir JavaScript personalizado a tu sitio de WordPress usando el Editor de bloques. Para hacerlo, simplemente añade el bloque HTML personalizado.
Después, pega tu código JavaScript en el bloque. Solo asegúrate de usar las etiquetas de apertura <script> y de cierre </script>.
¿Puedes añadir JavaScript personalizado mediante el Editor clásico (TinyMCE)?
WordPress recomienda actualizar al Editor de bloques. Pero si sigues usando el Editor clásico (TinyMCE), puedes añadir JavaScript personalizado en unos sencillos pasos.
Ve a la página o entrada donde quieras insertar el JavaScript. A continuación, en la barra de herramientas del editor, selecciona Texto como pestaña.
Aquí puedes insertar tu código JavaScript. De nuevo, asegúrate de incluir las etiquetas <script>.
Empieza a personalizar tu sitio de WordPress
Añadir JavaScript a WordPress puede crear funciones interactivas y mejorar la experiencia de usuario (UX) de tu página. Hay varias formas de añadir código JavaScript.
El mejor método para ti dependerá de tus preferencias y de la naturaleza del código que estés añadiendo. Trabajar directamente con tu tema podría ser lo más sencillo si solo vas a insertar una pequeña cantidad de código. Pero si vas a añadir mucho código, podría ser mejor usar un plugin o editar functions.php.
Añadir JavaScript puede ralentizar tu sitio si no está optimizado. Por suerte, Jetpack Boost es una herramienta gratuita y fácil de usar para optimizar la velocidad y el rendimiento de tu sitio, y posponer la carga de JavaScript no esencial cuando cargas las páginas de tu sitio. Tus visitantes no solo te agradecerán que uses Jetpack Boost, sino que los motores de búsqueda también podrían recompensarte con mejores posiciones.
Jetpack 