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

La plataforma de WordPress hace un gran trabajo para ayudar a aquellos que no tienen experiencia en codificación a implementar casi cualquier tipo de funcionalidad. Sin embargo, en algunos casos, deberá agregar un código de encabezado y pie de página en WordPress para ayudar a los servicios de terceros a integrar su propia funcionalidad.

El caso de uso más típico para esto es integrar Google Analytics en su sitio. Sin embargo, hay muchas otras razones por las que querrá hacer esto; es posible que ya sepa por qué desea llevar a cabo esta tarea.

Para este tutorial, le mostraremos un par de formas de agregar código de encabezado y pie de página en WordPress. Sin embargo, primero vamos a echar un vistazo a los tipos de razones por las que querrías hacer esto en primer lugar.

Lo que puede lograr con código adicional en el encabezado y pie de página de su sitio

Un sitio web estándar se dividirá en algunos componentes diferentes, como un documento de texto:

• Encabezamiento. El encabezado de su sitio contiene una serie de elementos de "carga previa" y detalles sobre su certificado de capa de conexión segura (SSL), encriptación, JavaScript y más.
• Pie de página. Esto funciona de manera similar a su encabezado, pero termina en la parte inferior de la página.
• Cuerpo. La mayor parte de la funcionalidad que implemente en su sitio estará dentro del 'cuerpo' de su contenido. Este es el enfoque principal de casi todo dentro del tablero de WordPress, y el cuerpo representa lo que ve en la página.

Los servidores cargarán las páginas de forma lineal: el encabezado, el cuerpo y luego el pie de página. Esto significa que el código del encabezado se cargará primero, pero el código del pie de página se cargará después de todo lo demás.

Casos de uso de fragmentos de código cotidianos

Las herramientas de redes sociales y optimización de motores de búsqueda (SEO) a menudo necesitarán que agregue un código de encabezado en WordPress. Esto se debe a que esos servicios deben tener cierta prioridad cuando se carga un sitio para registrar todo lo que viene después.

Es una situación similar con el código CSS, porque dicta cómo se verá tu sitio. Si esto estuviera en el pie de página, vería una serie de cambios de diseño antes de ver el estilo.

Si bien JavaScript nos ayuda a producir, ver e interactuar con sitios web modernos, no es un componente necesario (en un sentido técnico). Como tal, JavaScript en el pie de página le brindará un mayor rendimiento en muchos casos, y si tiene eso opción, usted debe ir con ella.

De hecho, hay muchos más casos de uso y los cubrimos con más detalle en otro artículo en el blog de WPKube. Sin embargo, en una situación típica de WordPress, no tiene acceso a los elementos de encabezado y pie de página de su sitio. Para hacer esto, deberá ensuciarse las manos o pedir ayuda externa.

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

En el resto del artículo, cubriremos dos formas de agregar código de encabezado y pie de página en WordPress. Ambos son simples, pero preferimos uno sobre el otro:

1. Puede usar un complemento para ayudarlo a agregar el código a las áreas correctas de su sitio.
2. Puede agregar código a su archivo functions.php y necesitará tener conocimientos adicionales sobre cómo acceder a los archivos de su sitio.

Primero veremos la opción del complemento, por las razones que explicaremos en breve.

1. Use un complemento para agregar código a su encabezado y pie de página

Si desea implementar algo en WordPress, un complemento debería hacer el trabajo por usted. Consideraríamos que un complemento es el predeterminado en la mayoría de los casos para los sitios web de WordPress. Como tal, si desea agregar un código de encabezado y pie de página en WordPress, el complemento de código incrustado será ideal:

Esta es una solución que desarrolla nuestro sitio hermano DesignBombs, y le brinda una forma rápida y sencilla de agregar código a su sitio como un todo, páginas o publicaciones específicas, e incluso tipos de publicaciones personalizadas.

Para usarlo, instalará y activará el complemento de la manera típica de WordPress. Cuando finalice este proceso, verá una nueva opción Configuración > Código para insertar en el tablero:

En esta pantalla, verá dos áreas de texto: una para el encabezado y otra para el pie de página. Incluso obtendrá una pista sobre dónde se ubicará el código que ingrese dentro de su HTML:

El uso de esta herramienta es muy sencillo. Una vez que ingrese su código, guarde sus cambios. Esto agregará cualquier código aquí a nivel global (es decir, en todo el sitio). Sin embargo, es posible que solo desee agregar código a una publicación o página individual. Puede hacerlo a través del Editor de bloques: el metabox y las opciones que necesita se encuentran en la parte inferior de la pantalla:

Si bien el código incrustado es nuestro método preferido, y uno que debe usar con el mínimo esfuerzo, también hay otra forma que puede brindarle los resultados que necesita. Veremos este a continuación.

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

Cada instalación de WordPress puede acceder a un archivo functions.php dedicado dentro de su directorio de nivel superior o específico del tema. Esto le permite agregar fragmentos de código para ayudar a WordPress a usar más funciones. Sin embargo, hay algunos requisitos previos que deberá comprender y cumplir antes de comenzar:

• Accede a sus archivos principales de WordPress, y por extensión, al archivo functions.php , utilizando el Protocolo seguro de transferencia de archivos (SFTP). Como tal, necesitará saber cómo funciona esto para encontrar los archivos de sus sitios y trabajar con ellos.
• También le recomendamos que utilice un tema secundario para conservar sus cambios si el tema en cuestión recibe una actualización.
• Querrá al menos un conocimiento práctico de los ganchos, acciones y filtros de WordPress. Además, querrá comprender cómo WordPress accede a su encabezado y pie de página a través de estos ganchos.

Cuando se trata de usar SFTP, WPKube tiene una selección de artículos que puede considerar lectura esencial:

• Una guía para principiantes sobre el protocolo de transferencia segura de archivos (SFTP)
• Cómo usar FileZilla: una guía paso a paso
• Una guía para principiantes sobre los permisos de archivos de WordPress

También puede consultar la biblioteca de ganchos para desarrolladores de WordPress, especialmente las entradas para wp_head y wp_footer , aunque esto es opcional, ya que no las usará de manera estricta.

A partir de aquí, el proceso toma unos pocos pasos. Primero, abra el servidor de su sitio dentro de su cliente SFTP, luego navegue hasta wp-content/themes . Aquí, abra el directorio de su tema actual y busque el archivo functions.php relevante:

Deberá abrir este archivo en su editor de texto o código favorito. Dentro, puede colocar la siguiente plantilla de fragmento:

 add_action( 'wp_head', '<SNIPPET_NAME>' ); function <SNIPPET_NAME>() { ?> <!-- Place your HTML code or other script here. --> <?php }

En resumen, esto agrega un gancho de acción a WordPress usando como lo llames <SNIPPET_NAME> . Dentro de la función en sí, reemplazará o escribirá debajo de la línea de comentario (es decir, la línea que comienza con <!-- ). Si desea agregar código al pie de página, reemplazará 'wp_head' con 'wp_footer' y continuar con normalidad.

Una vez que guarde sus cambios, esto debería aplicarse a su sitio. Dependiendo del código que agregue, debería haber algo visible en la página frontal, dentro de su panel de WordPress o incluso en un panel de terceros.

Terminando

Si bien WordPress no necesita conocimientos típicos de codificación para usarlo al máximo, en algunos casos es posible que deba agregar código de encabezado y pie de página en WordPress. Por ejemplo, es posible que desee utilizar análisis, que es una razón popular para abrir los archivos de su sitio.

Esta publicación ha analizado dos formas diferentes de agregar código a su encabezado y pie de página:

• Un complemento como Embed Code le permitirá agregar código de encabezado y pie de página a WordPress usando el tablero. Como tal, simplemente deberá copiar y pegar, sin la preocupación de acceder a su servidor.
• Sin embargo, si tiene los conocimientos, puede agregar un fragmento a su archivo functions.php . Necesitará conocimientos de SFTP y un poco de experiencia con sus archivos de WordPress, pero este enfoque es tan bueno como la opción del complemento.

¿Qué método usará para agregar código de encabezado y pie de página en WordPress? ¡Háganos saber en la sección de comentarios!