¿Tienes problemas para añadir código a la cabecera o el pie de página de WordPress? Muchas herramientas de seguimiento y scripts requieren que añadas fragmentos de código a la cabecera o el pie de tu sitio WordPress. Pero, por defecto, WordPress no facilita mucho la edición de esos archivos.
En esta entrada te mostraremos cómo añadir código a la cabecera o el pie de tu WordPress usando un plugin o añadiendo manualmente el código a tu archivo functions.php. Para la mayoría de los usuarios, el método del plugin es el recomendado. Pero los usuarios de WordPress de nivel intermedio o avanzado quizá prefieran usar el método manual con código.
Cómo añadir código a la cabecera y el pie de WordPress con un plugin
Para la mayoría de los usuarios, la forma más sencilla de añadir código a la cabecera y el pie de WordPress es mediante un plugin. Las ventajas de usar un plugin frente al método manual de la siguiente sección son:
- Tus fragmentos de código se mantendrán intactos aunque cambies de tema.
- El plugin facilita añadir fragmentos de código únicamente a la cabecera o el pie de tu página de inicio, lo que puede resultar útil en algunos casos.
- El plugin es más apto para principiantes porque no requiere meterse en el código.
Aunque hay varios plugins que ofrecen esta funcionalidad, recomendamos el plugin Head, Footer and Post Injections de Stefano Lissa porque te da más control que muchas de las alternativas. Actualmente cuenta con más de 200.000 instalaciones activas y una valoración de 5 sobre 5 estrellas.
Paso 1: Instala y activa Head, Footer and Post Injections
Head, Footer and Post Injections está disponible de forma gratuita en WordPress.org, así que puedes instalarlo y activarlo directamente desde tu escritorio de WordPress yendo a Plugins → Añadir nuevo y buscándolo:
Paso 2: Añade un fragmento de código a la cabecera, el pie y las inyecciones de entrada
Una vez que actives el plugin, puedes acceder a su interfaz yendo a Ajustes → Header & Footer en tu escritorio de WordPress. Verás varias pestañas en la interfaz del plugin. Pero para esta guía trabajarás principalmente en la pestaña predeterminada Header & Footer:
Para añadir código a la cabecera de tu sitio, debes pegarlo en una de las cajas situadas debajo del área SECTION INJECTION:
- Every Page: añade el fragmento de código a la cabecera de todas las páginas de tu sitio. Esto es lo que querrás usar la mayoría de las veces.
- Home Page Only: añade el fragmento de código solo a la cabecera de tu página de inicio.
Por ejemplo, para añadir el código de seguimiento de Google Analytics a WordPress, simplemente pégalo en la caja Every Page y guarda los cambios:
Para añadir código al pie de tu sitio, puedes desplazarte hacia abajo hasta la opción BEFORE CLOSING TAG (Footer). De nuevo, tienes dos opciones, aunque son distintas de las de la sección de la cabecera:
- Desktop: a pesar del nombre, esto añade código al pie tanto de la versión de escritorio como de la versión móvil de tu sitio, salvo que marques específicamente la casilla Mobile.
- Mobile: cuando está marcada, te permite añadir un fragmento de código distinto a la versión móvil de tu sitio.
Si solo quieres añadir un fragmento de código a la sección del pie para todos los usuarios, independientemente de su dispositivo, pégalo en la caja Desktop y deja Mobile sin marcar:
EXTRA: añade código a la cabecera y el pie de las páginas de Google AMP
Otra cosa interesante de este plugin es que, si estás usando Google AMP para WordPress, el plugin te permite añadir fragmentos de código específicamente a la cabecera y el pie de las versiones Google AMP de tus páginas (siempre que estés usando el código del plugin oficial AMP de Automattic).
Para hacerlo, ve a la pestaña AMP dentro de Header & Footer y pega el fragmento de código en la caja correspondiente:
Si simplemente necesitas añadir distintas funciones PHP por todo tu sitio, también te recomendamos echar un vistazo al plugin gratuito Code Snippets. Elimina la necesidad de añadir fragmentos personalizados al archivo functions.php de tu tema. Actualmente cuenta con más de 100.000 instalaciones activas y una valoración de 5 sobre 5 estrellas.
Cómo añadir código manualmente a la cabecera y el pie de WordPress
Si no estás familiarizado con los conceptos básicos de PHP, te recomendamos quedarte con el método del plugin anterior. El método manual puede resultarte demasiado complicado.
En esta sección aprenderás a añadir manualmente fragmentos de código a la cabecera y el pie de tu tema a través de tu archivo functions.php.
Si quieres continuar con este enfoque, es fundamental que uses un tema hijo de WordPress para hacer tus modificaciones. Si no usas un tema hijo, cualquier código que añadas a tu cabecera o pie se sobrescribirá cuando actualices tu tema de WordPress.
Muchos desarrolladores proporcionan un tema hijo. Pero si el tuyo no lo hace, aquí tienes una guía sobre cómo crear un tema hijo de WordPress. Una vez que tengas listo tu tema hijo, puedes continuar con los siguientes pasos para añadir código a la cabecera o el pie de tu tema.
Aunque puedes añadir fragmentos de código directamente a tus archivos header.php y footer.php, una forma mejor es usar tu archivo functions.php y el hook de WordPress apropiado. Esto te permite mantener todos tus fragmentos en un solo lugar y evitar modificar los archivos principales del tema.
Paso 1: Prepara los fragmentos de código
Para empezar, te ofreceremos un esquema aproximado para añadir código tanto a la cabecera como al pie.
Para añadir código a tu cabecera, usa 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 añadir código a tu pie, usa 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
};En cada fragmento, asegúrate de cambiar:
- La descripción del comentario (útil cuando necesites recordar qué hace un trozo de código un año después)
- El marcador de posición your_function_name (ambas apariciones)
- El marcador de posición PASTE CODE X HERE
Paso 2: Añade los fragmentos de código al archivo functions.php del tema hijo
Una vez que tengas listos los fragmentos de código pertinentes, debes añadirlos al archivo functions.php de tu tema hijo. Puedes editar este archivo conectándote a tu sitio por FTP. O puedes ir a Apariencia → Editor y seleccionar el archivo functions.php. Luego pega tu código al final del archivo:
EXTRA: añade código a la cabecera o el pie solo en páginas específicas
Si quieres más control sobre dónde aparecen tus fragmentos de código de cabecera o pie, puedes usar sentencias if para añadir el código solo a páginas específicas de tu sitio WordPress.
Por ejemplo, para añadir fragmentos de código únicamente a la cabecera o el pie de tu página de inicio, puedes 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 añadir los fragmentos de código solo a entradas o páginas específicas. Para ello, puedes 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úrate de sustituir el número de ejemplo, 73790, por el ID real de la entrada o página a la que quieras añadir los fragmentos de código.
En caso de duda, usa el plugin
Con esto concluye nuestra guía sobre cómo añadir código a la cabecera o el pie de tu sitio WordPress. Si los ejemplos de código del método manual te resultan confusos, te recomendamos que uses el método del plugin. Es mucho más apto para principiantes y, la mayoría de las veces, te ofrece la misma funcionalidad.
