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.
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:
- Manualmente, editando los archivos header.php y footer.php de tu tema
- Con la función de código de encabezado y pie de página integrada de tu tema
- 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 (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.
Si te desplazas hacia abajo, también verás un cuadro de 'Cuerpo' y un cuadro de 'Pie de página'.
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:
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.
Rattanak
AdSense me da el código para copiar en mi sitio (entre head), ¿dónde puedo poner el código en mi sitio? ¡Uso el plan premium!
Soporte de WPBeginner
Hola Rattanak,
No puedes usar AdSense en el plan premium de WordPress.com, necesitarás al menos su plan de negocios para eso. Por favor, consulta nuestra guía sobre la diferencia entre WordPress.org autoalojado vs. blog gratuito de WordPress.com.
Administrador
MADHUSUDAN
Hola,
Tu miembro del equipo intentó resolver mi problema y están a tiempo... pero acabo de ver este lugar donde podemos dejar una respuesta.
Estoy intentando agregar una etiqueta meta a mi página principal según lo requiere la empresa de mi programa de afiliados para poder promocionar su producto. Usé el complemento 'add header and footer' como sugirió tu miembro del equipo y después de agregar y guardar los cambios, no veo los cambios... ¿cómo se verá el sitio después de agregar la etiqueta meta? Por cierto, la etiqueta meta es la siguiente:
O la otra opción es agregar una nueva página con su código que es .html. Intenté copiar y pegar como pero permanece así. ¿ES PORQUE MI SITIO SOPORTA PHP Y EL CÓDIGO ES HTML O CÓMO?
Espero recibir tu consejo y comentarios.
Soporte de WPBeginner
Hola Madhusudan,
Las etiquetas meta se encuentran en el código HTML de tu sitio web. Se agregan en la sección del encabezado o al final. Las etiquetas meta no son visibles en tu sitio web y no realizan ningún cambio en la apariencia de tu sitio web. Aún puedes ver la etiqueta meta viendo el código fuente o usando la herramienta de inspección.
Administrador
Angela
He agregado el complemento de encabezado/pie de página. Agregué mi código de píxel de Facebook y presioné guardar. Pero, ¿cómo instalo este código en páginas específicas de mi sitio web para poder rastrear ciertas conversiones?
Jen
Uso este complemento todo el tiempo sin problemas. Hoy, lo instalé y agregué el código que necesitaba en el área correcta. Todas las páginas muestran el código excepto la página de inicio. ¿Alguna idea de por qué todas las páginas tendrían el código excepto la página de inicio?
John
Sin embargo, esta publicación no enseña qué script poner en el pie de página. ¿Qué script simple puedo usar para empezar? Solo quiero un pie de página simple.
Sarthak
Tengo un problema aquí. Sería de gran ayuda si pudiera resolver mi problema.
Necesito agregar el código de Google AdSense en el encabezado de mi sitio web, pero antes había agregado el código de artículos instantáneos en el encabezado, ¿qué debo hacer ahora para mantener ambos?
(Como soy principiante, no sé mucho al respecto. Ayúdenme por favor.)
George Beasley Jr
Intenté instalar "Insert Headers and Footers" en mi sitio web. Cuando voy a "Settings/Insert Headers and Footers", recibo este error: (Fatal error: Call to undefined function wp_unslash() in /home/afvetrep/public_html/wp-content/plugins/insert-headers-and-footers/ihaf.php on line 169)
¿Qué hago?
Soporte de WPBeginner
Hola George,
wp_unslash() es una función estándar del núcleo de WordPress desde WordPress 3.6. Si estás usando una versión anterior de WordPress, entonces necesitas actualizar WordPress.
Si estás usando la última versión de WordPress y sigues viendo este error, avísanos y te ayudaremos a solucionarlo.
Administrador
Frank
Hola. Estoy insertando un script de popup de MailChimp en el pie de página y esto rompe mi menú de navegación principal de WP. ¿Alguna idea de por qué o cómo solucionarlo? Acabo de actualizar a la última versión de tu plugin, pero el problema persiste. Gracias.
Frank
¿Alguien tiene alguna idea de por qué tengo este problema?
¡Gracias!
Riju
Por favor, ayúdame
No veo ningún editor en apariencia..
Necesito poner el código meta de verificación de la herramienta de webmaster, ¿cómo puedo editar el encabezado?
Necesito ayuda
Bamz
Muchas gracias. Por favor, ¿dónde puedo pegar el código de Google AdSense en este plugin, en la cabecera o en el pie de página?
Riju
Hola, no veo nada
Estoy tratando de conectar mi WB con Adsense
¿Puedo agregar código de anuncio de Adsense en WordPress después de usar el móvil???
Por favor, ayuda
echenze
Hola, ¿todavía se puede usar esto para insertar el código que se le da para la verificación de una cuenta de Google Adsense?
Soporte de WPBeginner
Sí, se puede usar para eso.
Administrador
Samuel
Este es uno de mis mejores plugins y lo uso con frecuencia para agregar códigos a la cabecera y al pie de página, pero algo sucedió después de actualizar los plugins hace unas horas, me dio un error [Fatal error: Can’t use function return value in write context in /home/campmmcg/public_html/wp-content/plugins/insert-headers-and-footers/ihaf.php on line 102]
Por favor, resuelvan esto
Soporte de WPBeginner
Hola Samuel,
Este problema se ha solucionado en la versión 1.4.1, por favor actualice el plugin.
Administrador
Meaghan Nutt
Esto fue realmente fácil, pero cambió mi cabecera en el sitio web y ¡es enorme! Ha empujado mi slider y mi contenido hacia abajo creando una gran caja blanca. ¡Ayuda!
raunak
Oye, gracias por este increíble plugin
pero ¿funcionaría si pego el código de verificación de Google en el encabezado
massive
Gracias por este gran artículo, ¿puedo usar este plugin para insertar códigos de anuncios como códigos de programas de afiliados?
Rizwan Amjad
Hola... estoy usando este plugin, tengo una pregunta: ¿puedo usar este plugin para insertar múltiples códigos de esta manera..
Código 1
Código 2
Código 3
Simplemente Código 1 y luego Botón Enter y código 2 y botón enter.
Quiero insertar códigos como Google Authorship, Analytics, Webmaster, etc.
Soporte de WPBeginner
Hola Rizwan,
Sí, puedes insertar varios fragmentos de código en nuevas líneas presionando el botón Enter después de pegar cada fragmento.
Administrador
Isabella
Hola, esta es probablemente una pregunta tonta, pero si ya instalé un script de Facebook en el encabezado y ahora quiero instalar otro de Hotjar, ¿estoy eliminando el script anterior de Facebook para que no se reinstale, correcto? Lo siento, no soy un experto en código.
Gracias
Soporte de WPBeginner
Hola Isabella,
Sí, está bien hacerlo. Si no estás segura, puedes copiar el código antiguo y guardarlo como un archivo de texto en tu computadora.
Paul
Excelente video. Muy claro y útil. Ahora me estoy suscribiendo a tu canal.
dominion
buen día. sin instalar ningún tema de wp, ¿hay alguna forma en que pueda usar mi propio tema o plantilla?
gajendra
¡¡¡Plugin Superb…!!!
Vladimír
Este es un gran plugin, veo que tiene más de un año sin actualizaciones. ¿Podrías actualizarlo por favor?
Vladimir
Lauren
Muchas gracias por el video. Intenté resolver esto a través de otros sitios web y con mi propio cerebro, pero todavía no estaba seguro. Tu video fue corto y conciso, y finalmente me dio las imágenes que necesitaba para hacer el trabajo. ¡Gracias de nuevo!
Soporte de WPBeginner
You are welcome
Administrador
nazanin
Hola, Quiero agregar mi logo de WP (logo dinámico) ¿Dónde está este plugin?
khalid
hola gente increíble, instalé y agregué el código de artículo instantáneo de FB, pero FB todavía dice que el código no está en el sitio web.
Lo agregué a la sección de encabezado.
Suzanne Ball
Recibo “403 Prohibido
Se ha detectado una operación potencialmente insegura en tu solicitud a este sitio.”
cuando inserto el script de Google
Rene Hedges
¡Gracias! Siendo muy nuevo en la creación de sitios web y sin experiencia en codificación, ¡esto fue fácil de seguir!
Soporte de WPBeginner
Glad you found it helpful.
Administrador
haris
hola, soy nuevo en wp... ¿cómo creo una base de datos en wp y creo inserciones de tablas, etc.?
Marcelo Guimaraes
¡Hola! Estoy usando Insert Headers and Footers para agregar el código de Google Analytics a mi sitio WP. ¿Necesito preocuparme por cada página de mi sitio por separado o estoy cubriendo todo el sitio simplemente siguiendo las instrucciones de este video y agregando el código a la caja de Encabezados (Insert Headers and Footers > Configuración)?
Soporte de WPBeginner
Estás cubriendo todo el sitio.
Administrador
Luciferbui
Do you have html code or something, i need it to make my site faster
No more plugin
Thanks
Patrick Saad
¡Hola!
Esta sería la primera vez que uso tu plugin. Espero hacer que mi sitio web sea más seguro agregando los siguientes scripts en el encabezado:
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Mis preguntas son: ¿Puedo usar tu plugin para hacer esto y, si es así, agrego los scripts de adición de encabezado uno por uno o como los he escrito aquí?
¡Gracias por tu ayuda!
Soporte de WPBeginner
La forma más apropiada de establecer encabezados HTTP en WordPress es usando el hook send_headers. Aquí tienes un ejemplo, va en el archivo functions.php.
add_action( 'send_headers', 'add_header_xua' ); function add_header_xua() { header( 'X-UA-Compatible: IE=edge,chrome=1' ); }1-click Use in WordPress
Administrador
Conrad Hall
Hola,
Soy nuevo en WPBeginner.com, y este es el primer tutorial que veo. Para ser sincero, estoy asombrado de que un tutorial diga: "Aquí ves dos cuadros de texto donde puedes agregar tu código. Simplemente copia y pega cualquier información meta, scripts, Google Analytics, etc. y haz clic en 'guardar configuración'. Este código ahora se mostrará en tu encabezado o en tu pie de página".
Lamentablemente, no hay enlaces a información que ayude a un principiante a entender cómo obtener o usar cualquiera de los códigos indicados. Esto hace que el plugin sea inútil para mí.
Mi uso para este plugin es usarlo para conectarme a páginas como la política de privacidad y el descargo de responsabilidad del editor. ¿Hay algún tutorial en alguna parte que muestre esto? Si es así, por favor, enlaza a él desde esta página.
Soporte de WPBeginner
Si tu tema tiene un menú de navegación en el área del pie de página, consulta nuestra guía cómo agregar un menú de navegación en WordPress.
Administrador
Richard Bauer
¿Pueden los encabezados ser menús estáticos que incluyan texto, gráficos y enlaces a páginas? Lo mismo para los pies de página.
es mi sitio y está desarrollado usando FrontPage. Queremos simplemente convertir todo el sitio a Word Press lo más simple posible. Todos los enlaces son a otras páginas del sitio, archivos PDF y Word del sitio, y algunos enlaces externos. Sin formularios, sin base de datos dinámica, SIN búsquedas.
se agradecería cualquier ayuda
marke
¿Mismo resultado al insertar en el Hook wp_head en Genesis Simple Hooks? A mí me funcionó.
Personal de WPBeginner
Sí, lo es.
Mary
Ha habido grandes cambios en WP – ¿Sigue siendo compatible este plugin?
Gracias
Personal de WPBeginner
Parece que tu tema de WordPress no utiliza las funciones estándar wp_header y wp_footer. Por favor, intenta cambiar temporalmente a un tema predeterminado como twenty thirteen y comprueba si el problema persiste.
Mufidah Kassalias
He estado usando este plugin felizmente hasta el otro día, cuando actualizamos a la última versión del tema (una actualización importante). El plugin rompió nuestro menú (llevó bastante investigación para reducirlo y estar seguro de que era este plugin el que causaba el conflicto), así que tuve que desactivarlo. Como puedes imaginar, esta no es una gran solución, ya que la verificación de mi sitio en Google, la información del editor, el seguimiento de análisis, etc., ya no existen en el encabezado de mi sitio. ¿Tienes alguna sugerencia sobre código adicional que pueda incluir para resolver el problema? Gracias.
Personal de WPBeginner
¿Estás seguro de que es este plugin? Probamos esto y pudimos subir imágenes sin problemas.
Andrea
Hola. He notado que tengo que desactivar el plugin para poder ver mis imágenes e insertarlas en una publicación. ¿Hay alguna forma de arreglar esto? ¡Por lo demás, me encanta el plugin!
Cha
¿Cuánto tiempo tarda antes de que el código comience a publicar datos para Google Analytics?
Henrietta
Hola,
Me has ayudado muchísimo con tantos problemas – ¡el mejor sitio! ¡Gracias!
Krista
Hola,
Estoy intentando actualizar mi línea de código en Google Analytics para obtener información demográfica. Estoy seguro de que la he pegado correctamente en el encabezado (y pie de página, que siempre he tenido ahí, pero acabo de leer en un comentario anterior que es innecesario). Cuando hago clic en el botón en Google Analytics para validar el código, no reconoce el cambio. Lo he intentado varias veces. ¿Podrías ayudarme a resolver esto, por favor? ¡Gracias!
Soporte de WPBeginner
Puedes intentar agregar tu código de análisis en el encabezado.
Administrador
corlie
Brilliant! super easy to use
Julie
¿Puedo usar este plugin para agregar código javascript? ¿Como un script de redirección?
¡Gracias!
Soporte de WPBeginner
puedes agregar código javascript
Administrador
Pedro
Hola, acabo de instalar tu plugin y entiendo que permite insertar código en todo el sitio en el encabezado, ¿tienes alguna versión/recomendación para un plugin que funcione por separado para cada página del sitio?
¡Muchas gracias!
Bob
Estoy usando Genesis y busco un pie de página que sea mucho más fácil de usar, como un widget donde un usuario de negocios (no programador) pueda ingresar los campos típicos del pie de página. Incluso los pies de página basados en widgets que veo en el mercado solo llegan hasta decir, ok, aquí está tu espacio, ahora agrega un widget aleatorio con algunos fragmentos de código (mucho más allá de mis habilidades).
Si esa magia no existe, ¿puedo simplemente copiar el código del pie de página que están usando en wpbeginner.com, editar la información y pegarla en un widget de Texto en mi posición de Pie de página 1?
Personal editorial
Teóricamente sí, puedes copiar el código y pegarlo en el área del pie de página. Sin embargo, puede causar algunos problemas de estilo.
Administrador
april whitlow
Si lo estoy usando para Google Analytics, ¿lo inserto en el encabezado y pie de página o solo en el pie de página? Disculpa la pregunta simple. Estoy al principio de mi aprendizaje.
Personal editorial
Header
Administrador
Vince
¿Cómo se agregan scripts en el encabezado solo en "una página específica"? Este plugin solo es aplicable si estás agregando un script para todas las páginas, pero no es aplicable si lo vas a agregar en una página específica.
Rya
para “¿Cómo agrego scripts de encabezado en solo “una página específica”? Este plugin solo es aplicable si estás agregando un script para todas las páginas, pero no es aplicable si lo agregarás en una página específica.”
Puedes usar php c/ la siguiente información:
http://codex.wordpress.org/Conditional_Tags
en conjunción con tus scripts.
Fayola
Hice esto y veo que el script aparece en el pie de página. Sin embargo, Google Analytics todavía dice que el seguimiento no está instalado. ¡Por favor, ayuda!
Personal editorial
¿Estás usando un plugin de caché? Si es así, ¿puedes vaciar tu caché?
Administrador
Stan Peters
Recibo Notice: wp_register_style was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or init hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.) en C:\tools\xampp\htdocs\wpfrontier\wp-includes\functions.php en la línea 2758
cuando lo uso para insertar código de fuente de Google en el encabezado
Personal editorial
Este plugin se creó principalmente para scripts de análisis o información meta. No está diseñado para insertar jQuery u otros elementos de diseño como esos. El propósito era permitir a los usuarios agregar fácilmente etiquetas en su encabezado o pie de página sin editar los archivos del tema.
Administrador
Ed
Tengo el mismo problema. ¿Hay alguna solución para esto?
Mladen
Intenté agregar etiquetas meta de FB en el encabezado con este plugin, pero no funcionó. La idea es buena, sin embargo.
Personal editorial
Si estás intentando agregar código PHP dinámico en este plugin, entonces no funcionará. Este plugin no ejecuta PHP. Es principalmente para insertar etiquetas meta estáticas.
Administrador
Mladen
Well, I don’t know if those tags are dynamic or static
I tried the standard Facebook tags such as this:
<meta property="og:url" content="”/>
<meta property="og:title" content="” />
<meta property="og:description" content="ID)); ?>” />
<meta property="og:image" content="ID ) ) ?>” />
¿Me puedes decir si este plugin es bueno para este propósito? Gracias
Personal editorial
No, no es bueno para eso. Porque la URL, el Título y la Descripción tienen la etiqueta PHP, que es dinámica.
Gautam Doddamani
Un gran plugin, ¡pero mi tema personalizado ya tiene esta opción! Guardaré esta publicación en marcadores por si cambio de tema.
Personal editorial
Sí, su propósito principal es evitar que dependas del tema. A menudo, las personas colocan sus códigos de Analytics, etc. en el área de scripts del pie de página de su tema, como este. Luego se olvidan de él cuando cambian de tema. Esto hace que pierdan datos de análisis durante varios días.
Administrador