Personalizar su sitio web de WordPress usando código puede ser aterrador. A menudo, tendrá que 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, ha superado 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 vayamos directo a ello!
Por qué es posible que necesite agregar 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 inserte 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 los cabeza etiquetas. El encabezado de su sitio es un componente crucial que incluye elementos como scripts, títulos, archivos de estilo y más.
Pie de página Las etiquetas funcionan de manera similar a sus cabeza contrapartes. Técnicamente, si agrega fragmentos de código al pie de página de su sitio, deberían ejecutarse de la misma manera 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 le pide esto, le recomendamos que siga 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 de WordPress, puede lograr el mismo objetivo modificando los archivos manualmente o utilizando un complemento.
Comencemos hablando sobre el enfoque del complemento.
1. Utilice un complemento como Head, Footer y Post Injections
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 es necesario 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 Inyecciones de cabeza, pie de página y poste enchufar.
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 saltar 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 Cabeza y pie de página pestaña.
Para el código global, asegúrese de colocar esos fragmentos dentro del En cada pagina campo. Sin embargo, si solo necesita que el código se ejecute en su página de inicio, utilice el Solo en la página de inicio opción.
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 su tema activo header.php o footer.php archivos. Puede encontrar estos archivos en el / public_html / wp-content / themes / directorio abriendo la carpeta de su tema activo y mirando dentro:
Puedes acceder a esos archivos a través de File TransFer Protocolo (FTP) y edítelos con su editor de código favorito. Sin embargo, editar archivos de encabezado y pie de página directamente puede ser complicado. Teniendo esto en cuenta, tenemos dos recomendaciones si planea utilizar el enfoque manual:
- Crear un tema infantil para tu tema. De esta manera, no perderá ninguna personalización cuando actualice el tema principal.
- Use ganchos para agregar el código a través de su functions.php expediente. 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 hijo si planea realizar cualquier tipo de personalización del tema. Puede acceder a los temas de su hijo functions.php archivo en su carpeta dentro del / wp-content / themes directorio.
Abre el functions.php archivo en su editor de código. Para agregar el código que desea, debe usar el 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
}
Puedes usar el wp_footer gancho 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 (prueba_script) si tu quieres.
Cuando termines de ajustar tu functions.php archivo, recuerde guardar sus cambios, y eso es todo. ¡Cualquier código que agregaste 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 necesitará 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 utilizar un complemento como ‘Head, Footer and Post Injections’, o agregar fragmentos de código a través de su functions.php expediente.
¿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!