¿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
- Cómo Agregar Código Manualmente al Encabezado y Pie de Página de WordPress
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 en algunos casos de uso.
- 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 200,000 instalaciones activas con una calificación de 5 de 5 estrellas.
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:
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:
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:
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:
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:
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 100,000 instalaciones activas con una calificación de 5 estrellas.
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:
¡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.
