Cómo Agregar Código al Encabezado y Pie de Página de WordPress

Actualizado July 23, 2018
10
Shares

¿Está luchando con cómo agregar código al encabezado o pie de página de WordPress? Muchas herramientas y scripts requieren que agregue fragmentos de código al encabezado o pie de página de su sitio WordPress. Pero, de forma predeterminada, WordPress no hace muy accesible editar esos archivos. En este artículo, le mostraremos cómo agregar código al encabezado o pie de página de WordPress usando un plugin de WordPress o agregando manualmente el código a su archivo functions.php. Para la mayoría de los usuarios, el método del plugin es el recomendado. Pero los usuarios avanzados de WordPress pueden preferir el uso del método de código manual.

Puede hacer clic en los enlaces siguientes para ir directamente a su método preferido:

Cómo Agregar Código al Encabezado y Pie de Página de WordPress Mediante un Plugin

Para la mayoría de los usuarios, la forma más fácil de agregar código al encabezado y pie de página de WordPress es vía un plugin. Los beneficios de usar un plugin sobre el método manual que describimos en la siguiente sección son:

  • Sus fragmentos de código permanecerán intactos si alguna vez cambia de tema
  • El plugin hace que sea fácil agregar solo fragmentos de código al encabezado o pie de página de su página de inicio, lo cual puede ser útil para algunos usos.
  • El plugin es ideal para principiantes porque no requiere profundizar en el código

Si bien hay varios plugins que ofrecen esta funcionalidad, recomendamos el plugin Head, Footer and Post Injections de Stefano Lissa porque le da más control que muchas de las alternativas. Actualmente tiene más de 100,000 instalaciones activas con una calificación de 5 de 5 estrellas.

Header and Footer WordPress plugin

WordPress Header and Footer plugin

Paso 1: Instalar y Activar Inyecciones de Encabezado, Pie de Página y Publicación

Las inyecciones de cabeza, el pie de página y la publicación están disponibles de forma gratuita en WordPress.org, por lo que puede instalar y activarlo directamente desde su tablero de WordPress yendo a Plugins → Añadir Nuevo y buscarlo:

Instalar el plugin

Instalar el plugin

Paso 2: Agregue el Fragmento de Código a las Inyecciones de Encabezado, Pie De Página Y Publicación

Una vez que active el plugin, puede acceder a su interfaz yendo a Configuración → Encabezado y pie de página en su tablero de WordPress. Verá una cantidad de pestañas en la interfaz del plugin. Pero para esta guía, en su mayoría trabajará en la pestaña de encabezado y pie de página predeterminada:

Interfaz de inyecciones de encabezado, pie de página y publicación

Interfaz de inyecciones de encabezado, pie de página y publicación

Para agregar código al encabezado de su sitio, debe pegarlo en una de las casillas debajo del área <HEAD> INYECCIÓN DE SECCIÓN:

  • Cada página – agrega el fragmento de código al encabezado de cada página del sitio. Esto es lo que deseará usar casi siempre.
  • Sólo página de inicio – solo agrega el fragmento de código al encabezado de su página de inicio.

Por ejemplo, para añadir el código de seguimiento de Google Analytics a WordPress, simplemente debe pegarlo en la casilla de Cada página y guardar sus cambios:

Ejemplo de agregar código al encabezado

Ejemplo de agregar código al encabezado

Para agregar código al pie de página de su sitio, puede desplazarse hacia abajo hasta la opción ANTES DE </ BODY> CIERRE DE ETIQUETA (PIE DE PÁGINA). De nuevo, tiene dos opciones, aunque son diferentes de la sección de encabezado:

  • Desktop – a pesar del nombre, esto agrega código al pie de página de la versión de escritorio y móvil de su sitio, a menos que marque específicamente la casilla para Móvil.
  • Móvil – al ser marcada, esta oprción le permite agregar un fragmento de código diferente a la versión móvil de su sitio.

Si solo desea agregar un fragmento de código a la sección del pie de página para todos los usuarios, sin importar sus dispositivos, péguelo en el cuadro de Desktop y deje Móvil desactivado:

Ejemplo de agregar código al pie de página

Ejemplo de agregar código al pie de página

Si es necesario, puede agregar múltiples fragmentos de código a cada casilla.

BONUS – Añada Código Al Encabezado y Pie de Página de las Páginas de Google AMP

Otra cosa clara sobre este plugin es que, si usted está usando Google AMP para WordPress, el plugin le permite agregar específicamente fragmentos de código al encabezado y pie de página de las versiones de sus páginas de Google AMP  (siempre y cuando esté usando el plugin Oficial AMP de Automattic).

Para hacerlo, vaya a la pestaña AMP en Encabezado y pie de página y pegue el fragmento de código en la casilla correspondiente:

Interfaz de Google AMP

Interfaz de Google AMP

Si simplemente necesita agregar diferentes funciones de PHP en todo el sitio, también recomendamos que revise el plugin Code Snippets. Éste elimina la necesidad de agregar fragmentos personalizados al archivo functions.php de su tema. Actualmente tiene más de 50,000 instalaciones activas con una calificación de 5 estrellas.

Code Snippets WordPress plugin

Code Snippets WordPress plugin

Cómo Agregar Manualmente el Código al Encabezado y Pie de Página de WordPress

Si no está familiarizado con los conceptos básicos de PHP, le recomendamos que siga con el método del plugin anterior. El método manual puede ser demasiado complicado para usted.

En esta sección, aprenderá cómo agregar manualmente fragmentos de código al encabezado y pie de página de su tema a través de su archivo functions.php.

Si desea continuar con este método y no el plugin en la sección anterior, es esencial que use un tema secundario de WordPress para realizar sus ediciones. Si no utiliza un tema secundario, cualquier código que agregue a su encabezado o pie de página se sobrescribirá si actualiza su tema de WordPress.

Muchos desarrolladores proporcionan un tema secundario. Pero si su desarrollador no lo hace, aquí hay una guía sobre cómo crear un tema secundario de WordPress. Una vez que tenga listo su tema, puede continuar con los siguientes pasos para agregar código al encabezado o pie de página de su tema.

Si bien puede agregar fragmentos de código directamente a sus archivos header.php y footer.php, una mejor manera es usar su archivo functions.php y el hook apropiado de WordPress. Esto le permite mantener todos sus fragmentos en un solo lugar y evitar modificar los archivos del tema central.

Paso 1: Preparar Fragmentos de Código

Para comenzar, le proporcionaremos un marco aproximado para agregarlo a su encabezado y pie de página.

Para agregar código a su encabezado, use este fragmento de código:

/* 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
};

Para agregar código a su pie de página, use este fragmento de 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
};

Para cada fragmento, asegúrese de cambiar:

  • La descripción del comentario (útil cuando necesita recordar lo que hace un fragmento de código más tarde)
  • El marcador de posición nombrede_de_función (ambas instancias)
  • El marcador de posición PEGUAR X CÓDIGO AQUÍ

Paso 2: Agregue Fragmentos de Código al Archivo functions.php en el Tema Secundario

Una vez que tenga listos los fragmentos de código relevantes, debe agregarlos al archivo functions.php del tema secundario. Puede editar este archivo conectándose a su sitio a vía FTP. O bien, puede ir a Apariencia → Editor y seleccionar el archivo functions.php. Luego, pegue su código al final del archivo:

Añadir código al archivo functions.php

Añadir código al archivo functions.php

¡Asegúrese de guardar sus cambios y listo!

BONUS: Agregue Dódigo al Encabezado o al Pie de Página Solo para Páginas Específicas

Si desea tener más control sobre dónde aparecen los fragmentos de código de encabezado o pie de página, puede usar extractos if para agregar solo el código a páginas específicas en su sitio WordPress.

Por ejemplo, para agregar solo fragmentos de código al encabezado o pie de página de su página de inicio, puede usar:

/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_front_page()) {  ?>
PASTE HEADER CODE HERE
<?php  }
};

Otra opción es agregar solo los fragmentos de código a publicaciones o páginas específicas. Para hacer eso, puede usar este fragmento de código:

/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_single(73790)) {  ?>
PASTE HEADER CODE HERE
<?php  }
};

Asegúrese de reemplazar el número de ejemplo – 73790 – con la ID actual de la publicación o página a la que desea agregar los fragmentos de código.

En Caso de Duda, Use el Plugin

Y aquí termina nuestra guía sobre cómo agregar código al encabezado o pie de página de su sitio WordPress. Si los ejemplos del código manual son confusos, recomendamos que use el método de plugin. Es mucho mejor para principiantes y la mayoría de las veces, le brinda la misma funcionalidad.

¿Le resultó útil este artículo?
No, o no fue completo

Artículos relacionados

kinsta newsletter

¿Utilizas WordPress?

¡Únete a más de 20.000 lectores que ya reciben nuestro newsletter semanal GRATUITO con consejos de WordPress sobre cómo generar más tráfico e ingresos para tu negocio!

You have Successfully Subscribed!

Send this to a friend