Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
25 Millones+
Sitios web que usan nuestros plugins
16+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

Cómo agregar código de encabezado y pie de página en WordPress (la forma fácil)

En WPBeginner, creamos muchos tutoriales que requieren que insertes código en las secciones <header> o <footer> de tu sitio de WordPress. Para muchos usuarios, esto puede ser intimidante, especialmente porque WordPress no tiene una forma integrada de insertar código en estas áreas.

Sin embargo, agregar código a tu encabezado y pie de página es esencial para integrar servicios populares como Google Analytics, Google Search Console, Píxel de Facebook y más. También podrías necesitar agregar CSS o JavaScript personalizados como parte de otros tutoriales de WordPress.

¿La buena noticia? No tienes que editar los archivos de tu tema directamente ni preocuparte por romper tu sitio. Usando el plugin gratuito WPCode, incluso los principiantes pueden agregar fragmentos de código a su encabezado o pie de página de forma segura y sencilla.

En esta guía, te explicaremos paso a paso cómo agregar código al encabezado y pie de página en WordPress.

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

La mejor manera de agregar código al encabezado y pie de página de WordPress

Si deseas agregar código al encabezado y pie de página de WordPress, existen tres soluciones posibles:

  1. Manualmente, editando los archivos header.php y footer.php de tu tema
  2. Con la función de código de encabezado y pie de página integrada de tu tema
  3. Usando un plugin de encabezados y pies de página para WordPress

La primera opción no es amigable para principiantes porque requiere que agregues código al encabezado y pie de página editando directamente los archivos header.php y footer.php de forma manual.

Otra desventaja de usar este método es que tu código se eliminará si instalas una actualización de tu tema.

La segunda opción es usar la función integrada de tu tema. Algunos temas de WordPress como Elegant Themes ofrecen una opción integrada para agregar rápidamente código y scripts al encabezado y pie de página de tu WordPress.

Si estás usando un tema con una función integrada, parece una solución segura y sencilla. Sin embargo, si cambias de tema, todos los fragmentos de código agregados a tu sitio web desaparecerán. Esto incluye la verificación del sitio en Google Search Console, análisis del sitio web a través de Google Analytics, y así sucesivamente.

Por eso siempre recomendamos a los usuarios que utilicen la tercera opción, un plugin de encabezados y pies de página. Esta opción es, con diferencia, el método más fácil y seguro para agregar código al encabezado y pie de página en WordPress.

Después de muchas solicitudes de nuestros lectores, nuestro equipo ha creado el plugin WPCode.

WPCode

WPCode (anteriormente llamado Insert Headers and Footers) es un plugin de fragmentos de código 100% gratuito. Puedes usarlo para agregar fácilmente código al encabezado y pie de página en WordPress.

Aquí hay algunos beneficios de usar el plugin WPCode:

1. 🚀 Fácil, Rápido y Organizado: Te permite agregar código al encabezado y pie de página de tu sitio de manera fácil y rápida. Además, te mantiene organizado al permitirte almacenar todos tus códigos de pie de página y encabezado en un solo lugar.

2. ✅ Previene Errores: La validación inteligente de fragmentos de código ayuda a prevenir errores que podrían ocurrir si editas los archivos de tu tema manualmente.

3. 😌 Actualiza o cambia tu tema sin preocupaciones: El plugin guardará el código de tu encabezado y pie de página en un lugar separado, por lo que puedes actualizar o cambiar tu tema sin preocuparte de que el código se borre.

Además de los scripts para encabezado y pie de página, también puedes usar WPCode para insertar fácilmente fragmentos de código PHP personalizado, JavaScript, CSS, HTML y texto sin editar los archivos de tu tema.

Además, WPCode tiene una biblioteca de fragmentos integrada donde puedes encontrar todos los fragmentos de código de WordPress más útiles. Esto te permite eliminar rápidamente las funciones de WordPress que no deseas, como las actualizaciones automáticas, la API REST, XML-RPC, comentarios y más.

Nota: El plugin gratuito WPCode tiene todo lo que necesitas para agregar código en el encabezado y pie de página en WordPress. Sin embargo, si deseas funciones avanzadas como una biblioteca de fragmentos en la nube privada, píxeles de conversión, fragmentos programados y más, puedes actualizar a WPCode Pro.

Para más detalles, lee nuestra guía sobre cómo agregar fácilmente código personalizado en WordPress.

Dicho esto, veamos cómo agregar fácilmente código en el encabezado y pie de página en WordPress usando el plugin WPCode.

Agregar código al encabezado y pie de página en WordPress

Lo primero que necesitas hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, ve a Fragmentos de código » Encabezado y pie de página desde tu panel de administración de WordPress. Después de eso, verás un cuadro de 'Encabezado' donde puedes agregar tu código.

Agrega código al encabezado y pie de página con WPCode

Si te desplazas hacia abajo, también verás un cuadro de 'Cuerpo' y un cuadro de 'Pie de página'.

Cuadros de scripts de encabezado y pie de página WPCode

Simplemente pega el código en uno de los tres cuadros. Una vez que hayas terminado, no olvides hacer clic en el botón 'Guardar cambios' para almacenar tu configuración.

El plugin ahora cargará automáticamente el código en las ubicaciones respectivas de tu sitio de WordPress.

Siempre puedes editar y eliminar cualquier código que ya no desees conservar.

Deberás mantener el plugin instalado y activado en todo momento. Desactivar el plugin detendrá la adición de todo el código personalizado a tu sitio.

Si desactivas el plugin accidentalmente, el código seguirá almacenado de forma segura en tu base de datos de WordPress. Simplemente puedes reinstalar o reactivar el plugin, y el código comenzará a aparecer de nuevo.

Nota: Es posible que debas limpiar la caché de tu WordPress después de guardar los cambios, para que el código aparezca correctamente en el front-end de tu sitio web.

Hemos encontrado que la razón principal por la que muchos principiantes usan el plugin WPCode es para agregar Google Analytics a su sitio web. Para eso, recomendamos usar el plugin gratuito MonsterInsights.

MonsterInsights es el mejor plugin de Google Analytics para WordPress. Te ayuda a configurar correctamente el seguimiento de Google Analytics con solo unos pocos clics, y te muestra estadísticas útiles directamente en tu panel de WordPress.

Para obtener instrucciones paso a paso, consulta este tutorial sobre cómo instalar Google Analytics en WordPress.

Tutorial en video

Si no disfrutas siguiendo instrucciones escritas, puedes ver nuestro video tutorial sobre cómo agregar código de encabezado y pie de página en WordPress:

Suscríbete a WPBeginner

Esperamos que este artículo te haya ayudado a aprender cómo agregar código de encabezado y pie de página en WordPress fácilmente. También podrías querer ver nuestra guía sobre cómo mostrar código en tu sitio de WordPress, o nuestras selecciones expertas de las mejores herramientas de desarrollo de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Consulta cómo se financia WPBeginner, por qué es importante y cómo puedes apoyarnos. Aquí está nuestro proceso editorial.

El Kit de herramientas definitivo para WordPress

Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Interacciones del lector

267 CommentsLeave a Reply

  1. ¡Esta guía es increíble! Administro sitios web para varios clientes, y me alegra mucho que hayas destacado el uso del plugin WPCode en lugar de editar temas directamente. Confía en mí en esto: ¡aprendí esta lección de la manera difícil! Una vez tuve una actualización de tema que borró los códigos de seguimiento de tres de mis clientes. Nada divertido.
    Algo que me ha ahorrado muchos dolores de cabeza es que mantengo una hoja de cálculo simple que rastrea todos los códigos de encabezado y pie de página para cada sitio de cliente. Muestra qué hace cada código y dónde se usa. Ha sido de gran ayuda durante los cambios de tema, y ya no tengo que adivinar qué se está ejecutando en cada sitio.

  2. Desde que uso wpcode en mi sitio web, ha reducido muchos problemas de meterse con el archivo functions.php.
    Recuerdo que estuve metiéndome con el código allá por 2017 y fue horrible.
    wpcode facilita no solo la inserción de fragmentos de código, sino que también ayuda en el mantenimiento fácil.
    Además, te da el poder de evitar muchos plugins para obtener funcionalidades pequeñas.

  3. Gracias por esta guía.
    Aunque agregar código al encabezado y pie de página fue alguna vez un gran problema para mí, ya que tengo miedo de perder el código personalizado al actualizar mi tema, entonces creé un tema hijo para esto, pero de alguna manera era técnico.
    Ahora, estoy usando WPcode para agregar el código e implementar otros códigos personalizados con facilidad, es incluso más rápido ya que hay algunos códigos personalizados listos en WPcode mismo. El plugin es muy útil, gracias.

  4. He estado usando el plugin WpCode durante varios años y es realmente genial. Especialmente para los novatos que tienen miedo de insertar códigos en el sitio web. Este plugin es casi imprescindible en todos los sitios web. Realmente puede ahorrar mucho trabajo y aquí en wpbeginner hay muchas soluciones listas para usar.

  5. Hola
    Instalé el plugin WPCode e inserté código en el campo de encabezado en la pestaña “Encabezado y pie de página global”. Este código muestra una ventana emergente.
    El sitio web es multisitio y WPCode está activado en toda la red.
    La ventana emergente se muestra bien en la página de inicio de mi sitio web, pero no en otras páginas donde las personas pueden aterrizar después de buscar en Google.
    ¿Qué debo hacer para que la ventana emergente se muestre en cualquier página?
    Gracias

  6. ¿Cuántos códigos podemos agregar en una sola sección de encabezado o pie de página? Es decir, ¿puedo usar dos o tres códigos en una sola sección de encabezado como código de Facebook, código de Google, etc.?

    • Siempre y cuando el código se agregue correctamente y no estés colocando código dentro de otros bloques de código, puedes agregar tantos como desees.

      Administrador

    • Dependería del código que agregaste, ya que no todo el código tiene un componente visible. También podrías intentar borrar la caché de tu sitio, ya que es una razón común para no ver ningún cambio.

      Administrador

  7. Hola — Pregunta rápida. He instalado el plugin. ¿Hay alguna forma de seleccionar en qué páginas se muestran la cabecera y el pie de página? Todo lo que veo es una instalación global sin la posibilidad de seleccionar páginas. ¡Gracias!

    • Por el momento, el plugin sirve para agregar código al encabezado de tu sitio y no para mostrar/ocultar tu encabezado. Las plantillas de tu tema decidirían dónde se muestran tu encabezado y pie de página en tu sitio.

      Administrador

  8. Instalé el plugin (y aparece como activado en la lista de plugins) pero no se muestra en el menú de "Configuración". ¿Me salté algún paso? ¿Podrían proporcionarme una solución?
    Gracias

    • No, la opción debería estar disponible una vez que el plugin esté activo, siempre y cuando tengas acceso para editar la configuración del sitio. Deberías asegurarte de ser administrador del sitio y, si aún no es visible, deberías intentar desactivar tus otros plugins para ver si es posible un conflicto con alguno de ellos.

      Administrador

  9. ¡Hola! ¡Tengo una pregunta! Estoy intentando agregar la etiqueta global del sitio y el fragmento de teléfono a mi código en cada página para poder rastrear mis llamadas de anuncios de Google. Tengo el plugin "Encabezados y Pies de Página", ¿puedo simplemente pegarlo aquí y ya está? ¿O importa dónde lo pego (Encabezado vs. Cuerpo. Pie de página)? ¡Muchas gracias!

  10. ¡Tan cerca de ser lo que se necesita! Pero Google recomienda encarecidamente usar metadatos diferentes para cada página. “Las descripciones idénticas o similares en cada página de un sitio no son útiles cuando las páginas individuales aparecen en los resultados web. En estos casos, es menos probable que mostremos el texto repetido. Siempre que sea posible, cree descripciones que describan con precisión la página específica”. Por favor, considere actualizar su plugin en consecuencia.

    • Our plugin is not for metadata, it is mainly for code to add things like Google Analytics tracking or for verification codes. If you want a plugin for adding metadata to individual posts, we would recommend taking a look at All in One SEO as that will give you far better control over your metadata :)

      Administrador

  11. Tengo una pregunta. ¿Cómo se elimina el código que agregué usando el plugin 'insert headers and footers'? Cuando abro el editor de temas, no encuentro el código que agregué con este plugin.

    • El código agregado usando el plugin se eliminaría al quitarlo de la configuración del plugin o al desinstalar el plugin.

      Administrador

  12. Hola, oye, agregué el plugin anterior a mi sitio y agregué el código a la sección de encabezado. Luego probé con su sitio y dijo que se guardó correctamente.

    Pero no veo el bot cuando voy al sitio en vivo. ¿Podrías decirme qué estoy haciendo mal? Gracias.

    • Dependería del código específico que estés agregando, te recomendaríamos consultar con el soporte del código para saber si lo agregaste correctamente, ya que no todo el código está hecho para que algo sea visible.

      Administrador

  13. Quería cambiar el color de mi barra de direcciones usando este plugin, pero cada vez que pego me aparece un mensaje de error

    ¿Está bien mi código?

    • Dependería del código específico y de dónde se pretenda añadir. Deberías contactar a quien te proporcionó el código para saber dónde colocarlo.

      Administrador

  14. Compré un tema pero no me deja añadir ninguna acción de botón en la cabecera ni en el menú, ¿crees que este plugin podría ayudarme???

  15. ¿Cómo puedo añadir el código en la cabecera lo más arriba posible? Necesito poner el código primero de unas líneas en la cabecera. ¿Cómo puedo controlar la posición del código?

    Gracias

    • Si necesitas una ubicación muy específica para el código, deberías añadir el código manualmente a tus archivos.

      Administrador

  16. INÚTIL para un tema que no tiene cabeceras en primer lugar, como wordpress 2021. Inútil.

    Se implicaba que este plugin haría eso. No lo hace. TODO lo que hace es insertar una versión GIGANTE de la imagen que eliges ENCIMA de tu menú y nombre del sitio.

    • El tema 2021 sí tiene una cabecera, pero el plugin Insert Headers and Footers es para insertar código como Google Analytics, no para añadir fotos a la cabecera de tu sitio web. No recomendaríamos usar este plugin para añadir una imagen de cabecera, ya que causaría los errores que estás experimentando.

      Administrador

  17. Hola,

    Ya instalé el plugin "Insert Footer and Header". Si quiero desinstalarlo del sitio, ¿el código insertado también se eliminaría de la sección del encabezado o se guardaría sin el plugin?
    Por favor, ilumínenme.

  18. Google Analytics me está diciendo que agregue un código de Etiqueta de Sitio Global inmediatamente después de la etiqueta . ¿Hace esto el plugin? De lo contrario, ¡no tengo idea de cómo agregar este código a *cada* página de mi sitio!

    • El código agregado usando el plugin estará en cada publicación y página, no códigos individuales para publicaciones y páginas individuales.

      Administrador

  19. Hola,

    ¿No encuentro la sección "Insertar encabezados" debajo del editor de mi publicación? ¿Cómo puedo habilitar esa función para insertar código diferente para publicaciones específicas?

    • Nuestro plugin es para todo el sitio en este momento y no para publicaciones o páginas individuales.

      Administrador

  20. Estoy recibiendo el siguiente error al presionar GUARDAR desde este plugin:

    Se ha detectado una operación potencialmente insegura en tu solicitud a este sitio

    • Deberías verificar si tienes algún plugin de seguridad activo en tu sitio o si tu host tiene uno configurado. También podrías asegurarte de haber copiado correctamente el código que intentas agregar.

      Administrador

  21. En tu demostración no apareció nada en la parte superior.
    Estas son las instrucciones del generador de código que estoy usando;
    Pega el código copiado en la parte inferior de tu página HTML justo antes de la etiqueta de cierre </body>
    Probé el código y no funciona, “¿Estoy haciendo algo diferente?”

  22. Hola. Necesito editar el código del encabezado solo en un conjunto específico de páginas. Actualmente he agregado el script que necesito al archivo header.php, sin embargo, esto aplica el código a todas las páginas de forma global.

    ¿Hay alguna forma de agregar el script solo a un conjunto específico de páginas?

    • A menos que se indique lo contrario, no tenemos un método recomendado para código específico de página en este momento.

      Administrador

  23. Thank you so much!!!

    ¡Estas cosas me asustan porque creo que condenaré mi sitio web para siempre!

    Explicado tan fácilmente, definitivamente me suscribiré.

    Necesito trabajar en esto todos los días.

  24. Si mi tema no permite imágenes de encabezado personalizadas, ¿este plugin me permitirá crear imágenes de encabezado personalizadas? Estoy perdido sobre cómo hacer esto. Tenemos un tema antiguo con función de encabezado personalizado.

  25. ¿Podría usar una ruta relativa? Así puedo mover el sitio a un host diferente sin cambiar el encabezado. Si es así, ¿dónde está el origen?

    Intenté incluir algunos ejemplos, pero Sucuri bloqueó la publicación como maliciosa. Supongo que no le gusta ver rutas.

  26. ¡Siiii! Estoy muy emocionado. Tuve muchos problemas para que funcionara mi pop-up de Mailchimp, ¡pero este plugin hizo el trabajo pan comido!

  27. Hola, he instalado el plugin de Encabezados y Pies de Página y he agregado código para el pie de página. El texto que quiero mostrar está al final, debajo de la línea de derechos de autor de Bento. ¿Hay alguna manera de que mi pie de página aparezca en la parte superior de la visualización del pie de página? Gracias

    • Para personalizaciones del pie de página, deberías contactar al soporte de tu tema para ver si tienen alguna opción recomendada que puedas usar.

      Administrador

  28. Ya he puesto el código de Google Analytics en la sección de encabezado usando el plugin de insertar encabezados y pies de página, ¿cómo puedo agregar el código de AdSense allí de nuevo?

    • Eso sería algo que podrías hacer, pero no todos los principiantes quieren o entienden cómo crear un tema hijo, por eso recomendamos este método.

      Administrador

  29. La activación de este plugin envía correos electrónicos masivos automáticamente desde mi servidor de hosting. Esto está funcionando como spam. Así que tengo que eliminarlo de mi sitio web.

    • Este plugin no tiene nada de eso, te recomendaríamos escanear tu sitio para asegurarte de que no tienes ningún código malicioso en tu sitio.

      Administrador

  30. Agregué este plugin a mi sitio pero no apareció nada cuando hice clic en el plugin. Estoy usando una versión antigua de WP, pero no estoy seguro de si esta es la razón.

    • Deberías encontrar la sección del plugin en Configuración > Insertar Encabezados y Pies de Página

      Administrador

  31. Hola equipo,

    ¿Se copió y pegó el código base del Píxel de Facebook en la etiqueta del encabezado de ese complemento?
    ¿se aplicará automáticamente a todas las páginas del sitio web? ¡Por favor, responda!

  32. ¿Cómo puedo agregar un código en la sección del cuerpo (no en la sección del encabezado/pie de página) con este plugin?
    Quiero agregar cierto código en la sección del cuerpo para evitar el bloqueo de renderizado.

    • El plugin debería tener actualmente un tercer cuadro de entrada donde puedes incluir código que debe estar en el cuerpo de tu sitio.

      Administrador

  33. Hi,
    My site was built by a web developer who already included all sorts of code snippets in the section of my site.
    If I add new snippets of code using this plugin, will it overwrite the code that’s already there or just add the new code to the existing code?
    I don’t want to make a mess of my site… :-)
    Thanks!

  34. ¡Hola! Intenté agregar el plugin a mi sitio, pero ¿necesitas tener una página de negocios para agregar algún plugin? ¿Puedo agregar el código sin un plugin?

  35. hola
    Primero instalé el plugin de encabezado y pie de página y luego pegué mi código de Google Analytics. Pero mi problema es que una vez que pego el código y veo mi sitio web, ¿el código se muestra deshabilitado? ¿Cómo solucionarlo?

    • Si el código no se está agregando a tu encabezado, deberías borrar cualquier caché en tu sitio, ya que esa es la causa más común de ese problema.

      Administrador

    • Deberías consultar con el soporte de tu tema específico para el encabezado que no aparece en una página específica, ya que podría ser una plantilla específica de la página la que te cause problemas.

      Administrador

  36. ¡Gracias chicos por su plugin! Lo usé para agregar el Pixel de FB a mi sitio, pero ahora tengo una página de destino y necesito un evento de Pixel diferente (Lead) en la página de agradecimiento después de que los visitantes confirmen sus datos. ¿Puedo usar el plugin para agregar el script a una página específica?

Deja una respuesta