Tanto si quieres mejorar las interacciones con el usuario, integrar herramientas de terceros o añadir efectos visuales únicos, inyectar JavaScript en tu sitio web Astra puede hacer que tu sitio realmente destaque.
En esta guía, te guiaremos a través de diferentes formas de añadir sin esfuerzo código JavaScript personalizado a tu tema Astra. Iremos paso a paso, asegurándonos de que tienes la capacidad de ajustar el comportamiento y las características de tu sitio web de acuerdo con tu visión precisa.
¿Cómo añadir código JavaScript personalizado en Astra?
Añadir código JavaScript personalizado a tu sitio web Astra es muy fácil, y existen varios métodos para conseguirlo. Aquí hay tres maneras convenientes para incorporar JavaScript personalizado en su tema Astra:
- Con el plugin Insertar encabezados y pies de página
- Con el plugin gratuito Astra Hooks
- Con el módulo Site Builder del Addon Astra Pro
Puedes elegir el método que mejor se adapte a tu estilo, ya sea un plugin o las herramientas de Astra.
Con el plugin Insertar encabezados y pies de página
Cualquier JavaScript que no esté relacionado con el tema o el diseño del sitio web; cualquier código que necesitará tener en el sitio web incluso si cambia el tema - siempre debe añadirse a través de un plugin.
Por ejemplo, siempre necesitarás el código de Google Analytics presente en tu sitio web independientemente del tema que estés utilizando. Pero si añades el código de Google Analytics en la configuración del tema ahora y cambias el tema de Astra a otro más adelante, el código de Google Analytics dejará de funcionar.
Así que es una mejor práctica para instalar JavaScript no relacionados con el diseño y el tema en su propio plugin independiente. Insertar encabezados y pies de página es un plugin gratuito, popular y ligero que puede utilizar para añadir código JavaScript.
Con el plugin gratuito Astra Hooks
El plugin Astra Hooks te permite añadir tu contenido personalizado, Shortcodes y código JavaScript en las distintas ubicaciones de los hooks. Una vez instalado, verás una nueva pestaña en el Personalizador.
- Para añadir código JavaScript en la cabecera, utilice la opción wp_head ubicación
- Para añadir el código en el pie de página, utilice la función wp_footer ubicación.
Por favor, visite la página del plugin WordPress Repository para descargar y obtener más información sobre este plugin y su funcionamiento.
Con el módulo Site Builder del Addon Astra Pro
Si tiene Astra Pro Addon, no necesita instalar otro plugin para añadir código JavaScript.
- Ir al panel de control de Astra
- Activar el módulo Creador de sitios
- Navegue hasta Astra > Site Builder
- Seleccione los Ganchos como tipo de presentación
- Active el Editor de código y añada su código
- Sustituya los comentarios existentes y pegue su código
- Configura otras opciones según tus necesidades y guarda.
Para la mayoría de los sitios web, las configuraciones de abajo funcionan muy bien:
- Disposición: Ganchos
- Acción: wp_head o wp_footer dependiendo de dónde desee añadir el código
- Prioridad: 10
- Espaciado: 0
- Mostrar en: Todo el sitio web
- Funciones de los usuarios: Todos
Esperamos que este documento le haya sido útil. Si tiene alguna pregunta, no dude en dejar un comentario a continuación.
