Cómo agregar código de encabezado y pie de página en WordPress

Personalizar su sitio web de WordPress usando código puede ser aterrador. A menudo, deberá profundizar en los archivos principales para modificar las configuraciones o agregar nuevos parámetros, lo que puede dañar su sitio si lo hace de manera incorrecta.

Sin embargo, agregar código de encabezado y pie de página tiende a ser mucho más simple. A menudo, solo necesitará copiar y pegar fragmentos de código específicos. Esto significa que si sabe cómo acceder a sus archivos de encabezado y pie de página, ya pasó la parte más aterradora.

En este artículo, le enseñaremos cómo agregar código de encabezado y pie de página en WordPress, tanto manualmente como con un complemento. Ambos enfoques son muy sencillos, ¡así que vamos directo al grano!

Por qué es posible que necesite agregar un código de encabezado y pie de página en WordPress

Si ejecuta un sitio web, probablemente esté familiarizado con al menos un servicio de terceros que requiere que incruste un código para conectarse a él.

Algunos de los ejemplos más populares incluyen Google Analytics, Search Console, Facebook Pixel y muchas otras herramientas que involucran el seguimiento de sitios web.

Todos esos servicios requieren que agregue scripts específicos entre las etiquetas principales de su sitio web. El encabezado de su sitio es un componente crucial que incluye elementos como scripts, títulos, archivos de estilo y más.

Las etiquetas de pie de página funcionan de manera similar a sus contrapartes principales . Técnicamente, si agrega fragmentos de código al pie de página de su sitio, deberían funcionar igual que si los incluyera en su encabezado.

Sin embargo, es importante comprender que su sitio web ejecutará los scripts en el orden en que los incluya. Además, el código del encabezado   ejecutar antes de que se cargue la página, mientras que el código de pie de página se ejecutará después.

Si tiene la opción de elegir y le preocupa la optimización del sitio web, mover JavaScript al pie de página de su sitio puede ayudar a acelerar los tiempos de carga. Sin embargo, algunos servicios le pedirán explícitamente que agregue su código a su encabezado para evitar problemas de ejecución.

Como regla general, si un servicio te lo pide, te recomendamos que sigas sus consejos. Para otros fragmentos de código JavaScript, colóquelos en el pie de página de su sitio de WordPress. El código CSS siempre va en el encabezado.

Cómo agregar código de encabezado y pie de página en WordPress (2 métodos)

Como suele ser el caso con WordPress, puede lograr el mismo objetivo modificando los archivos manualmente o usando un complemento.

Comencemos hablando sobre el enfoque del complemento.

1. Use un complemento como encabezado, pie de página y post inyecciones

Usar un complemento para agregar código a sus archivos de encabezado y pie de página en WordPress es el enfoque más seguro. Con un complemento, no necesita modificar los archivos de tema manualmente ni asegurarse de que está agregando scripts en el lugar correcto.

Si bien hay muchos complementos buenos para elegir, nuestra recomendación para el trabajo es el complemento Inyecciones de encabezado, pie de página y publicación.

Este complemento le brinda mucho control sobre en qué parte de su código desea agregar sus fragmentos de código. También ofrece la opción de agregar diferentes scripts para representaciones móviles y de escritorio de su sitio.

Para agregar el complemento, vaya a Complementos> Agregar nuevo dentro de su tablero y use la función de búsqueda para encontrar el complemento. Haga clic en instalar, luego active el complemento.

Una vez que el complemento esté activo, puede ir directamente a Configuración > Encabezado y pie de página . Verá varios campos donde puede agregar fragmentos de código.

Si profundiza en las opciones del complemento, verá que ofrece muchas ubicaciones adicionales para sus fragmentos de código. Sin embargo, en la mayoría de los casos, puede ceñirse a la pestaña Encabezado y pie de página .

Para el código global, asegúrese de colocar esos fragmentos dentro del campo En cada página . Sin embargo, si solo necesita que el código se ejecute en su página de inicio, use la opción Solo en la página de inicio .

Una vez que termine de agregar el código a su sitio web, guarde los cambios en el complemento y ¡listo!

2. Agregue fragmentos de código a través de su archivo functions.php

Agregar código de encabezado y pie de página manualmente en WordPress no es complicado, pero requiere más consideraciones que el enfoque del complemento.

Puede agregar el código directamente a los archivos header.php o footer.php de su tema activo. Puede encontrar estos archivos dentro del directorio /public_html/wp-content/themes/ abriendo la carpeta de su tema activo y mirando dentro:

Puede acceder a esos archivos a través del Protocolo de transferencia de archivos (FTP) y editarlos con su editor de código favorito. Sin embargo, editar archivos de encabezado y pie de página directamente puede ser complicado. Con esto en mente, tenemos dos recomendaciones si planea usar el enfoque manual:

1. Crea un tema hijo para tu tema. De esta manera, no perderá ninguna personalización cuando actualice el tema principal.
2. Use ganchos para agregar el código a través de su archivo functions.php . Esto ofrece un enfoque más limpio sobre la edición manual de archivos de encabezado y pie de página.

Idealmente, siempre debe usar un tema secundario si planea realizar algún tipo de personalización del tema. Puede acceder al archivo functions.php de su tema secundario en su carpeta dentro del directorio /wp-content/themes .

Abra el archivo functions.php en su editor de código. Para agregar el código que desea, debe usar wp_head   o wp_footer   gancho.

El siguiente fragmento de código agrega su código personalizado al encabezado de su sitio:

 add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }

Puede usar el gancho wp_footer en lugar de wp_head si desea colocar el código en su pie de página. También puede cambiar el nombre de la función (test_script) si lo desea.

Cuando haya terminado de modificar su archivo functions.php , recuerde guardar los cambios y eso es todo. ¡Cualquier código que haya agregado debería estar funcionando ahora!

Conclusión

Muchos servicios de terceros, como Google Analytics o Facebook Pixel, requieren que agregue fragmentos de código a su sitio web para que puedan conectarse a él. Sin embargo, este es solo uno de los muchos casos en los que deberá agregar código a su encabezado y pie de página en WordPress, por lo que vale la pena saber cómo hacerlo.

Hay dos formas de agregar fragmentos de código a su encabezado y pie de página. Puede usar un complemento como 'Inyecciones de encabezado, pie de página y posteriores', o agregar fragmentos de código a través de su archivo functions.php .

¿Tiene alguna pregunta sobre cómo agregar código de encabezado y pie de página en WordPress? ¡Hablemos de ellos en la sección de comentarios a continuación!