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

Es posible que, tras un tiempo gestionando un sitio web creado con WordPress, sientas la necesidad de agregar alguna funcionalidad en el mismo.

En concreto, en este artículo vamos a hablar de las modificaciones que se pueden hacer, y cómo llevarlas a cabo, en el header y el footer de tu sitio web.

¿Qué es el header y el footer?

El header también se denomina encabezado, y es la sección situada en la parte superior de un sitio web.

Algunos de los datos que pueden aparecer en el header son metadatos como la descripción, o incluso agregar alguna funcionalidad adicional del sitio web. Suele aparecer también el logotipo del sitio web, o incluso un menú para poder acceder a las categorías del sitio.

El footer, por el contrario, es el conocido como pie de página, y es la parte inferior de un sitio web. 

La información que puede aparecer en el footer va desde los datos de contacto hasta enlaces a redes sociales. Además, también es habitual incluir en el footer un enlace a la política de cookies, la política de privacidad y el aviso legal, que son documentos que es necesario incluir en los sitios web, y en la mayoría de los casos no es necesario que sean tan visibles como las categorías.

Agregar manualmente el header y el footer de WordPress

Para agregar de forma manual un header y un footer personalizados en el CMS WordPress, es necesario abrir el código HTML del tema. Pero antes de agregarlo a WordPress, es mejor asegurarse de tener el código bien ejecutado.

1- Crea el código a insertar

Para agregar código al header y al footer, hay que especificar a qué parte del sitio web queremos insertar las nuevas partes de código.

Si lo que quieres es agregar código en el encabezado de tu sitio web, puedes hacerlo modificando las siguientes líneas:

/* Describe what the code snippet does so you can remember later on */

add_action(‘wp_head’, ‘your_function_name’);

function your_function_name(){

?>

PASTE HEADER CODE HERE

<?php

}

Por el contrario, para agregar código en el pie de página de tu sitio web, podrás hacerlo con el siguiente código:

/* Describe what the code snippet does so you can remember later on */

add_action(‘wp_footer’, ‘your_function_name’);

function your_function_name(){

?>

PASTE FOOTER CODE HERE

<?php

};

De los códigos anteriores, tendrás que modificar todo aquello que está escrito de forma generalizada. Es decir, tendrás que modificar la descripción, la función que aparece en el código como ‘your_function_name’ y el código HTML que quieras añadir.

2- Agrega el fragmento de código al archivo functions.php

Cuando ya hayas preparado el código modificando la función que quieres agregar y el código concreto, puedes añadir dicho fragmento al archivo functions.php.

Puedes llegar al editor de este archivo en Apariencia > Editor de archivos de tema. En el lateral derecho de la página, encontrarás el acceso a varios archivos, entre los que se encuentra el que nos interesa: functions.php.

Tan solo tendremos que editar el archivo y pegar en él el código que hayas editado anteriormente.

Agregar código en header y footer de WordPress mediante plugin

Sin embargo, son muchas las personas que tienen un sitio web pero no tienen suficientes conocimientos de código como para hacer esto o, al menos, no para hacerlo estando seguros de que la página no se va a romper.

Es por ese motivo por el que comenzaron a crearse plugins que facilitan estas acciones. 

Y, como no podía ser de otra manera, el proceso de añadir código a estos elementos también es más sencillo a través de uno de estos complementos de WordPress.

1- Instala y activa el plugin

El primer paso es sencillo y automático. Quien tiene un sitio web en WordPress sabe cómo es el proceso de instalación de un plugin: bastará con buscarlo, clicar en instalar y, después en activar plugin. 

2- Añade código al encabezado y pie de página

A continuación, podrás añadir el código al encabezado y pie de página siguiendo las indicaciones del propio plugin, y escribiendo sobre el propio cuadro de texto que encontrarás fácilmente en él.

Plugins para modificar el header y el footer

Son varios los plugins que existen para modificar el header y el footer sin entrar a editar directamente el archivo functions.php.

Te mostramos cuáles son los tres mejores plugins que hemos encontrado para realizar este proceso:

Head, foot and post injections

El plugin Head, foot and post interjections permite pegar las líneas de código en tres campos de texto diferentes: código para añadir en el encabezado de la Home, código para añadir en el encabezado de todas las páginas y código para añadir al final de la página.

Por tanto, se trata de un plugin muy versátil, en el que puedes añadir código sin riesgo a equivocarte, ya que esos errores no afectarán al funcionamiento general de la página, y podrás corregirlos sin tener que buscar entre todas las líneas de código cuál es el error.

Header footer code manager

Header footer code manager es otro plugin muy útil para este tipo de ediciones. No solo porque cumple la misma función que el anterior en cuanto a código de encabezado y pie de página; además, también se pueden añadir nuevas funciones al header, que te harán ahorrar la instalación de otros plugins.

Algunos ejemplos de otras funciones que nos ofrece este plugin son la integración de Google AdSense o de Google Analytics, entre otros.

En definitiva, cualquier sitio externo que pida copiar un enlace y pegarlo en tu sitio web puede ser añadido fácilmente al header para añadir dicha funcionalidad.

Addfunc head & footer code

El plugin Addfunc head & footer code está pensado para añadir integraciones al sitio web. Este plugin permite añadir integraciones de, entre otras, las siguientes aplicaciones:

• Google Analytics.
• Google Tag Manager.
• Google Ads Conversion.
• Facebook Pixel.
• Hotjar.
• FullStory.
• Google Site Verification.
• Bing Site Verification.
• Yandex Site Verification.
• Alexa Site Verification.

En resumen, si estás buscando un plugin para evitar la posibilidad de romper la página cada vez que tratas de añadir alguna funcionalidad extra a tu sitio web desde el header, podrás elegir alguno de estos plugins.

Estamos seguros de que te harán la vida más fácil: bastará con copiar el código y pegarlo en el cuadro de texto del header.