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 plugins 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 plugin

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 plugin. La ventaja de utilizar un plugin para este propósito es que el el código permanece incluso si cambia su tema. Adicionalmente, un plugin no requiere que profundices en el código y estructura de archivos de WordPress.

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

Después de instalar y activar su plugin, vaya a Configuración> Encabezado y pie de página en su panel de administración. Verá la interfaz del plugin 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 debajo de 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 agregar código al primer campo para que esté en el encabezado de cada página. Por ejemplo, si desea agregar una etiqueta de Google Analytics, todo lo que tiene 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 para 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 plugin 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 archivo de su tema elegido.

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

Con todos los temas de Qode, tienes blanco child temas que puedes descargar junto con el tema principal principal que se utilizará para realizar cambios. En caso de que desee crear una nueva child tema, puedes hacer en solo unos pocos pasos.

Una vez que tengas tu child tema listo, necesitas 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 archivo del child tema. Le sugerimos que utilice el functions.php archivo de tu child tema 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 tu child tema. La forma más fácil 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 plugin, 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 intente 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 plugin, 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 plugins 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.