Una de las mejores maneras de mejorar la funcionalidad de la interfaz de usuario de su sitio web es agregar JavaScript personalizado de WordPress. Sin embargo, descubrir cómo hacerlo puede ser complicado, especialmente si está acostumbrado a trabajar con el Personalizador para insertar CSS personalizado.
Afortunadamente, puede usar algunas estrategias diferentes según su nivel de experiencia y lo que está tratando de lograr. Una vez que sepa cuáles son sus opciones, podrá elegir la solución de JavaScript personalizada que tenga más sentido para usted.
En esta publicación, lo guiaremos a través de tres métodos que puede usar para agregar JavaScript personalizado a su sitio de WordPress, así como también discutiremos los pros y los contras de cada opción. Estos son los tres métodos que cubriremos: puede hacer clic para ir directamente a un método específico:
- Use el complemento de código de encabezado y pie de página ( la opción más simple para usuarios no técnicos )
- Agregar código al archivo functions.php
- Agregue código al encabezado ( usando la función wp_enqueue_script o el gancho wp_head )
¡Saltamos!
1. Instale un complemento como Head & Footer Code
Usar un complemento es una de las formas más fáciles de agregar JavaScript personalizado de WordPress a su sitio web. Por ejemplo, Head & Footer Code es una buena herramienta:
Este complemento gratuito le permite insertar código de varias maneras. Puede usarlo para Facebook Pixel , Google Analytics , CSS personalizado y más.
Para comenzar, agregue el complemento a su sitio navegando a Complementos → Agregar nuevo desde su panel de administración, luego busque «Código de encabezado y pie de página».
Una vez que haga clic en los botones Instalar ahora y Activar , puede ubicar la configuración del complemento yendo a Herramientas → Código de encabezado y pie de página . En esta pantalla, hay tres cuadros para las secciones de encabezado, pie de página y cuerpo:
Puede ingresar su JavaScript personalizado de WordPress en cualquiera de estos cuadros. Cuando haya terminado, seleccione el botón Guardar cambios en la parte inferior de la pantalla. El código se cargará en cada página de su sitio.
Pros y contras de usar un plugin
La principal ventaja de usar un complemento es que es una opción amigable para principiantes. No necesita preocuparse por editar los archivos de su tema . El complemento de código de encabezado y pie de página también puede ser útil si está buscando una forma sencilla de agregar otros tipos de código y CSS personalizado.
Sin embargo, la desventaja de este método es que implica la instalación de un complemento de terceros, que algunos propietarios de sitios intentan evitar. Si desea mantener sus extensiones al mínimo, es mejor que utilice uno de los otros métodos. Además, el complemento está diseñado para cambios de JavaScript en todo el sitio en lugar de páginas o publicaciones específicas.
2. Usa tu archivo functions.php
Otro método para agregar JavaScript personalizado de WordPress a su sitio web es aprovechar las funciones integradas y los ganchos para editar el archivo functions.php . Este enfoque implica cargar manualmente los scripts en su servidor.
Antes de comenzar, recomendamos crear un tema secundario . Este paso ayuda a garantizar que aún podrá actualizar el tema principal de manera segura. También debe hacer una copia de seguridad de su sitio en caso de que algo salga mal.
Este método implica el uso de la función IS_PAGE . Puede agregar lógica condicional para aplicar su JavaScript personalizado a una sola publicación o página.
Para comenzar, ubique y abra su archivo functions.php , luego copie y pegue el siguiente fragmento de código:
function ti_custom_javascript() {
?>
}
add_action('wp_head', 'ti_custom_javascript');Este código agregará JavaScript a su encabezado. Para aplicarlo a una sola publicación, puede usar lo siguiente:
function ti_custom_javascript() {
if (is_single ('3')) {
?>
}
}
add_action('wp_head', 'ti_custom_javascript');Tenga en cuenta que deberá reemplazar 3en el ejemplo anterior con el número de identificación de la publicación a la que desea agregar el código. Para ubicar ese número, navegue hasta la publicación desde su panel de administración y luego haga clic en Editar . En la URL de la barra del navegador, el número de ID es el número junto a “post=”:
Guarde su archivo una vez que reemplace el número de ID y agregue su JavaScript personalizado al área designada. También puede repetir este mismo proceso para una sola página de WordPress.
Pros y contras de editar tu archivo functions.php
Una ventaja de editar su archivo functions.php es que no necesita instalar otro complemento. También puede usar esta técnica para agregar características y funcionalidades tanto a su tema como a WordPress. Por ejemplo, este método puede insertar JavaScript en una sola publicación o página o en todas las páginas.
El único inconveniente de este método es que implica trabajar con código y editar los archivos de su sitio. Por lo tanto, puede que no sea la mejor opción si no tienes experiencia en este departamento.
3. Agregue JavaScript a su encabezado
Hay una manera de agregar JavaScript de WordPress personalizado insertando la
}
add_action('wp_head', 'ti_custom_javascript');
Tenga en cuenta que el gancho wp_head solo se activa en la parte frontal de su sitio web. Esto significa que cualquier JavaScript personalizado que agregue con este método no aparecerá en las áreas de administración o inicio de sesión. Sin embargo, si quisiera agregar JavaScript a esas áreas, podría usar los ganchos de acción admin_head y login_head , respectivamente.
Pros y contras de agregar JavaScript a su encabezado
Los desarrolladores prefieren la función wp_enqueue_script porque evita los conflictos que pueden surgir con otras opciones, como agregar directamente scripts a su archivo header.php . Además, el uso de este método no crea ningún script dependiente.
El principal problema de agregar JavaScript de WordPress personalizado al encabezado de su sitio es que puede causar problemas con otros complementos que cargan sus propios scripts. Esta configuración también puede hacer que se carguen varios scripts más de una vez, lo que puede afectar la velocidad y el rendimiento general de su sitio web .
Comience con el JavaScript personalizado de WordPress
De forma predeterminada, WordPress no le permite insertar fragmentos de código JavaScript en sus páginas y publicaciones. Afortunadamente, algunos intentos pueden agregar su JavaScript personalizado de WordPress sin romper su sitio web. El mejor método depende de su nivel de comodidad para editar los archivos de su sitio y dónde desea aplicar los scripts.
Como discutimos en esta publicación, hay tres formas en que puede agregar JavaScript personalizado de WordPress a su sitio web:
- Instale un complemento como Head & Footer Code.
- Use su archivo functions.php para agregar JavaScript personalizado a una sola página o publicación.
- Agregue JavaScript a su encabezado usando la función wp_enqueue_script o el gancho wp_head .
Ahora que sabe cómo agregar JavaScript personalizado a WordPress, es posible que le interese nuestra otra guía sobre cómo agregar CSS personalizado a WordPress .
¿Tiene alguna pregunta sobre cómo agregar JavaScript personalizado de WordPress a su sitio web? Puedes poner ponerla en los comentarios y nuestra comunidad o nuestros expertos te ayudarán.
