¿Cómo agregar JavaScript personalizado a WordPress?
Agrega JavaScript personalizado a WordPress con plugins de fragmentos de código. También puedes usar wp_enqueue_script() en el functions.php de un tema hijo.
Añadir JavaScript (JS) personalizado a tu sitio WordPress te permite incorporar funcionalidades dinámicas, interacciones específicas o scripts de terceros. Te muestro las formas más seguras y recomendadas para hacerlo, evitando modificar archivos del núcleo o del tema directamente.
1. Usando un plugin de fragmentos de código (recomendado para la mayoría):
Es la forma más segura y flexible, ya que el JS se gestiona fuera de tu tema.
- Instala y activa un plugin como «Code Snippets» o «Simple Custom CSS and JS».
- Ve a la sección del plugin en tu panel de WordPress.
- Crea un nuevo snippet (fragmento de código), pega tu código JavaScript y configura dónde quieres que se ejecute (por ejemplo, en el frontend del sitio, en la cabecera, o en el pie de página).
- Activa el snippet y guárdalo.
- Ventaja: Tus scripts se mantienen incluso si cambias de tema, y si un script causa un problema, puedes desactivarlo fácilmente desde el panel.
2. En el archivo functions.php de un tema hijo (para usuarios avanzados):
Esta es la forma estándar y recomendada para desarrolladores. Permite encolar scripts correctamente.
- ¡Usa siempre un tema hijo! Edita el
functions.phpde tu tema hijo. - Utiliza la función
wp_enqueue_script()para añadir tu JavaScript. Esto asegura que el script se cargue de forma óptima y sin conflictos.<?php function mi_script_personalizado() {wp_enqueue_script( 'mi-script-js', // handle únicoget_stylesheet_directory_uri() . '/js/mi-script.js', // URL del archivo JSarray('jquery'), // Dependencias (ej. jQuery)'1.0', // Versióntrue // True para cargar en el footer, false para el head );}add_action( 'wp_enqueue_scripts', 'mi_script_personalizado' ); ?> - Deberías colocar tu archivo
mi-script.jsdentro de una subcarpetajsen tu tema hijo.
3. Directamente en el editor de bloques (para scripts pequeños y específicos de una página):
Para bloques de JavaScript pequeños o scripts de terceros específicos de una página o entrada.
- En el editor de bloques (Gutenberg), añade un bloque «HTML personalizado».
- Pega tu código JavaScript dentro de este bloque, asegurándote de incluir las etiquetas
<script>y</script>. - Consideración: Este método no es ideal para scripts que deben cargarse en todo el sitio o en el
<head>.
Evita:
- Pegar código JavaScript directamente en los archivos del tema padre, ya que se perdería con las actualizaciones.
- Usar plugins que inserten JS de forma insegura o ineficiente.
Al agregar JavaScript, asegúrate de que el código sea válido y no cause conflictos con otros scripts existentes en tu sitio. Si un script rompe tu sitio, puedes desactivarlo vía FTP renombrando la carpeta del plugin de snippets o eliminando el código del functions.php del tema hijo.
