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

Muchas herramientas y scripts de seguimiento requieren que agregue cierto código a las áreas de encabezado y pie de página de su sitio web. Esto hace que sea muy probable que tenga que editar estos elementos en algún momento. Afortunadamente, hay un par de formas sencillas de lograrlo.

En este artículo, le mostraremos cómo puede agregar código de encabezado y pie de página en WordPress, ya sea usando complementos o manualmente. Solo tiene que elegir cuál de las dos formas le conviene más para modificar estos elementos.

Cómo agregar código a su encabezado y pie de página de WordPress usando un complemento

Para la mayoría de los usuarios, la forma más fácil de agregar código al área de encabezado y pie de página de un sitio web es con la ayuda de un complemento. La ventaja de utilizar un complemento para este propósito es que el el código permanece incluso si cambia su tema. Adicionalmente, un complemento no requiere que profundices en el código y estructura de archivos de WordPress.

Hay varios complementos que puede usar para este propósito.. En este artículo, utilizaremos el Complemento Head, Footer and Post Injections que es gratis. Puedes instalarlo para poder seguir los siguientes pasos o elegir otro si lo prefieres.

Después de instalar y activar su complemento, vaya a Configuración> Encabezado y pie de página en su panel de administración. Verá la interfaz del complemento y desde allí debe seleccione la pestaña Encabezado y pie de página.

Para agregar código al encabezado de su sitio web, debe ingresarlo en uno de los campos en la sección INYECCIÓN DE LA SECCIÓN DE LA PÁGINA . Dependiendo del campo que use, el código que ingrese aparecerá en el encabezado de cada página o solo en el encabezado de la página de inicio.

Lo más probable es que seas agregando código al primer campo para que esté en el encabezado de cada página. Por ejemplo, si desea agregar un Etiqueta de Google Analytics, todo lo que tienes que hacer es ingrese el código apropiado en el EN CADA PÁGINA campo y guarde el cambio.

Para agregar código al pie de página de su sitio web, debes desplazarte hacia abajo hasta los ANTES DE LA ETIQUETA DE CIERRE (PIE DE PIE) sección. También contiene dos campos, pero son ligeramente diferentes de los que teníamos para el encabezado.

Como puede ver en la imagen de arriba, los dos campos disponibles son Escritorio y móvil.

Si desea que su código esté presente en el pie de página, independientemente del dispositivo que tengan los usuarios, debe agregar el código al campo Escritorio y dejar el campo Móvil sin marcar. Sin embargo, si necesita que el código para la versión móvil de su sitio web sea diferente, puede marcar la opción Móvil e ingrese el código apropiado en cada campo.

Cuando termines, no olvide hacer clic en el botón Guardar en la parte inferior de la pantalla.

Cómo agregar código manualmente a su encabezado y pie de página de WordPress

Para agregar código de encabezado y pie de página en WordPress manualmente, necesitas tener algunos conocimientos básicos de PHP. De lo contrario, le sugerimos que utilice el método de complemento descrito anteriormente. Con el método manual, puede agregar código directamente a las áreas de encabezado y pie de página de su sitio web. Esto se hace a través de los header.php y footer.php archivos oa través del functions.php expediente de su tema elegido.

Si va a agregar código a su encabezado y pie de página manualmente, debes usar un tema hijo para hacerlo. De esa manera, los cambios no se pierden cuando se actualiza su tema de WordPress.

Con todos los temas de Qode, tienes temas infantiles en blanco que puedes descargar junto con el tema principal principal que se utilizará para realizar cambios. En caso de que desee crear un nuevo tema hijo, puede hacerlo en solo unos pocos pasos.

Una vez que tenga listo el tema de su hijo, debe elija si ingresará el código en el encabezado y pie de página directamente mediante el header.php y footer.php archivos o hacerlo a través del functions.php expediente del tema hijo. Le sugerimos que utilice el functions.php archivo de su tema hijo para agregar el código. Esto te permitirá guarde el código completo en un solo lugar. Además, no necesitaría modificar los archivos centrales de WordPress.

Para empezar, echaremos un vistazo a ejemplos de fragmentos de código que puede usar para agregar código de encabezado y pie de página en WordPress.

Para agregar código a su encabezado, puede utilizar este ejemplo de fragmento de código:

/* Make description for code snippet */
function your_custom_function_name(){
?>
PASTE HEADER CODE WHICH YOU WANT TO ADD HERE
<?php
};
add_action('wp_head', 'your_custom_function_name');

Y para agregar código a su pie de página, puede utilizar este ejemplo de fragmento de código:

/* Make description for code snippet */
function your_custom_function_name(){
?>
PASTE FOOTER CODE WHICH YOU WANT TO ADD HERE
<?php
};
add_action('wp_footer', 'your_custom_function_name');

Tenga en cuenta que estos fragmentos no representan código funcional y que debe adaptarlos agregando la información adecuada. Ingrese una breve descripción del código en el campo de comentarios para ayudarte a recordar su propósito más adelante. Cambie el marcador de posición para el nombre de la función con el nombre real de su función personalizada en ambos lugares. Y agregue su código en el espacio marcado por el texto en mayúsculas.

Una vez que los fragmentos de código estén listos, debe agregarlos al functions.php archivo de su tema hijo. La forma más sencilla de acceder a este archivo es a través de la opción Apariencia> Editor de temas. en el panel de administración. Ábrelo y luego ingresa el fragmento de código que preparaste.

El código que usamos en este ejemplo es el mismo que usamos para explicar el método del complemento, es decir, la etiqueta de Google Analytics. Como puede ver en la captura de pantalla anterior, utilizamos un fragmento de código personalizado para el encabezado para agregar el código. El mismo principio se aplica a la adición de código al pie de página.

En caso de que la opción Editor de temas esté inactiva cuando intenta abrirla, también puede acceder al archivo functions.php usando FTP. En ese caso, después de ingresar el código, no olvide guardar los cambios en el archivo.

Pensamientos finales

Agregar código de encabezado y pie de página en WordPress se está convirtiendo en una práctica cada vez más popular. Es una forma conveniente de personalizar su sitio web, implementar Google Analytics o mejorar el rendimiento.

Si decide agregar código a su sitio, le sugerimos que utilice un complemento, ya que es el método más simple. Especialmente si no está completamente seguro de intentar agregar código al encabezado y pie de página manualmente. Los complementos son adecuados para usuarios de todos los niveles de conocimiento y le brindan todas las funcionalidades necesarias. Sin embargo, si elige utilizar el método manual, le proporcionará más libertad para agregar código al encabezado y al pie de página. Pero tenga en cuenta que aún requiere un poco más de conocimiento y está destinado a usuarios más experimentados.