En la actualidad la publicidad es parte esencial de la mayoría de las páginas web de Internet. En este tutorial te voy a mostrar cómo insertar y mostrar banners en diferentes partes de tu página web de WordPress. La mayoría de las páginas web que ofrecen banners te proporcionarán todo el código del banner, asi que todo lo que tienes que hacer es decidir dónde quiere colocar ese banner siguiendo las instrucciones de más abajo.

Índice

Es una práctica común el uso del sidebar (barra lateral) para insertar banners en Wordpress. Hay dos maneras de hacer esto:

  1. Si tu plantilla es compatible con widgets en la barra lateral, puedes agregar un widget de texto con el código del banner
  2. Si tu plantilla no es compatible con widgets en la barra laterals, puedes agregar el código del banner directamente al archivo sidebar.php de tu plantilla.

Si tu plantilla es compatible con widgets, ve a Apariencia > Widgets. A continuación, arrastre un widget de texto al área del sidebar correspondiente. En mi caso sería «Sidebar Principal«. A los efectos de este tutorial, vamos a poner este widget justo debajo del campo de búsqueda. Por último, pega el código de banner en el widget, estableciendo un título para el widget (que es opcional, déjalo vacío si no quiere tener un título) y pulsa el botón Guardar (aunque wordpress te va guardando los cambios automáticamente).

como insertar banner sidebar wordpress

Este proceso colocará el banner que tu quieras en el sidebar o barra lateral de tu WordPress.

como insertar banner sidebar wordpress

Si tu plantilla no soporta widgets, vas a tener que añadir el código de banner directamente en el archivo sidebar.php. Puede editar este archivo en Apariencia > Editor.

Cómo insertar un banner en una entrada del blog o una página

Si lo que quieres es agregar un banner dentro del contenido de tus entradas o posts, o en las páginas estáticas, abre el modo de texto en el editor de WordPress y pega el código del banner.

como insertar banner entrada blog pagina wordpress

Esto agregará la imagen entre los dos párrafos. Puede utilizar el editor WYSIWYG de WordPress con el fin de colocar o alinear el banner y hacer que se vea mejor en el post o en la página.

como insertar banner entrada blog pagina wordpress

Cómo insertar un banner al principio o al final de una entrada del blog o una página

Para insertar banners en la parte superior o inferior de todos tus posts o páginas, es necesario agregar el código de banner en los archivos single.php o page.php de tu plantilla de WordPress. Ambos archivos tienen un contenido similar, pero que manejan diferentes partes de tu página web: tus posts (single.php) y tus páginas (page.php). Puede editar estos archivos accediendo al panel de administración de WordPress en Apariencia -> Editor.

Si desea insertarel banner en la parte superior de tus entradas o páginas, busca el siguiente código:

<?php while ( have_posts() ) : the_post(); ?>

Añade el código del banner justo después de esa línea de código. Esto insertará el banner encima del título de todos tus posts o páginas. Por supuesto, puedes añadir estilos CSS con el fin de hacer que se vea de acuerdo a sus necesidades.

como insertar banner entrada blog pagina wordpress

Cómo insertar un banner en el header o en el footer

Añadir banners en el header (encabezado) o en el footer (pie de página) depende una vez más de la plantilla que estés usando. Si tienes área para widgets añadidos en tu pie de página o encabezado, puede seguir las instrucciones de la primera parte de este tutorial para insertar los banners (igual que en el sidebar).

Por otro lado, si tu plantilla no tiene áreas de widgets añadidas en las zonas de pie de página/cabecera, es necesario añadir los banners manualmente. Para hacer esto dirígete al panel de administración de WordPress y ve a Apariencia -> Editor. A efectos de este tutorial, vamos a añadir un banner personalizado en el header o cabecera. Dado que vamos a agregar el banner en la cabecera de la página, selecciona header.php de la lista de archivos disponibles para editar. Ten en cuenta que el código a insertar en este archivo será diferente dependiendo de la platilla de Wordpress que estés usando. Necesitarás conocimientos de HTML básicos con el fin de añadir el banner.

como insertar banner header footer wordpress

En primer lugar, encontrar la apertura de la etiqueta body. El valor por defecto de una plantilla de Wordpres debería tener este aspecto:

<body <?php body_class(); ?>>

A continuación añade el siguiente código:

<div><a href="Enlacedelbanner" target="_blank"><img src="URLdelaimagen" width="Ancho" height="Alto" /></a></div>

Es necesario sustituir Enlacedelbanner URLdelaimagen con los datos de tu banner. Por último, proporciona el ancho y alto reales de la imagen del banner.

Este código hará que tu banner se inserte en la parte superior de página web. Ten en cuenta que dependiendo de la plantilla que tengas instalada, es posible que tengas que mover el código con el fin de colocarlo donde quieras.

como insertar banner header wordpress

Ten en cuenta que hemos insertado el banner con un elemento div. Hemos hecho esto porque queremos estilizar el banner. Para ello, selecciona style.css de la columna de la derecha y agrega las siguientes líneas de código:

.headerbanner { display:block; margin: 10px auto; width: 480px}

Esto centrará el banner y añadirá un poco de margen superior dándole un mejor aspecto. Por supuesto, esto es sólo un ejemplo – se puede utilizar todo el potencial de CSS para estilizar el banner de la manera que quieras.

como insertar banner header wordpress

Añadir un banner en el footer o pie de página es básicamente el mismo con una pequeña diferencia: es necesario abrir el archivo footer.php en lugar del header.php. Entonces, todo lo que tienes que hacer es pegar el código en donde quieras mostrar el banner.

Cómo insertar un banner usando plugins

Si deseas mostrar más de un banner en una página, realizar un seguimiento de los anuncios que se muestran y funcionalidades más avanzadas, es aconsejable el uso de los plugins de WordPress disponible para la gestión de banners. Ya que depende de la estructura de la página web en particular y tus necesidades, te sugiero que busques a través de los plugins de banner en el Directorio de Plugins de WordPress con el fin de encontrar el plugin que mejor se adapte a tus necesidades. Una vez hecho esto, se puede instalar el plugin, como cualquier otro plugin de WordPress.

Nota: Ahora mismo estoy utilizando el plugin Ad Inserter PRO para mostrar la publicidad de mi página web.

¡Ah! Que no se te olvide compartir este artículo… o añadir un comentario con alguna duda o pregunta…. solo si te ha gustado :)

¿Te ha gustado el contenido?

Puntuación media 5 / 5. Votos: 578

¡Todavía no hay votos! Sé el primero en valorar el contenido.

También te puede interesar esta guía
tutorial wordpress

Sin duda, una de las mejores plataformas para crear una página web con diseño Wordpressblogs o tiendas online para tu negocio, ya que es fácil de usar, flexible y ofrece muchas opciones para personalizarla de acuerdo a tus necesidades. Empieza con buen pie con WordPress y revisa esta completa guía.

Ir a la guía

¿Te ha gustado? Comparte el contenido

Publicado por Ignacio Santiago
imagen autor contenido

Soy muchas cosas, pero todo empezó como Blogger. Desde ahí he crecido como especialista en Marketing Online, aunque con mucha experiencia en Diseño Web, Blogging, SEO y WordPress. Ayudo a emprendedores y pequeñas empresas a crear, mejorar y potenciar su presencia y visibilidad en Internet, con un branding fuerte, que inspire confianza y que genere ventas.

Contenidos relacionados
Deja tu comentario y opina (52 Comentarios)
  1. Pedro Nieves 07/05/2020 a las 19:19 - Responder

    Hola Ignacio, gracias por tu aporte. Quisiera saber como puedo hacer este mismo procedimiento pero en un blog de blogger, ya que actualmente quiero salir adelante e incursionarme en el mundo de las paginas web pero por ahora no tengo el dinero para pagar un host con CPanel. Si podrías explicarme te lo agradecería un montón! un abrazo!

    • Ignacio Santiago 08/05/2020 a las 14:12 - Responder

      Hola Pedro 😊,

      Gracias por tu comentario, me encantaría ayudarte pero no tengo un contenido sobre esto en blogger ya que no es la plataforma que utilizo ni recomiendo. Lo mejor es que busques a algún experto que hable sobre ello. Siento no poder ayudarte. Saludos!

  2. Vicente 17/04/2020 a las 03:36 - Responder

    Hola,

    Muchas gracias! me ha venido de perlas.

  3. Manu Duque 22/07/2019 a las 13:47 - Responder

    Hola Ignacio,

    Gracias por el post! Muy útil, he añadido en la barra lateral un banner, recuerdo que añadí anteriormente otro que ya quité y me recomendaron añadir en el código «Rel no follow», porque supuestamente a Google no le gusta que añadamos widgets de publicidad., cosa que desconozco. Mi pregunta, en el caso que haya que añadir «rel no follow», en que parte de la etiqueta del código se añade, por ejemplo:

    Gracias de antemano! Saludos!

    Manu

    • Ignacio Santiago 02/10/2019 a las 12:28 - Responder

      Hola Manu 😄

      Muchas gracias por tu comentario y tu apreciación. Si necesitas usar el atributo nofollow con poca frecuencia, no es difícil agregar manualmente el código.
      Este método es bueno para cualquier link que agregues en el contenido regular de WordPress. Para comenzar, agrega un link regular. Luego, selecciona el link y ve a la siguiente pestaña del Texto en editor de WordPress. Deberías ver el HTML actual para su link. Ahora, encuentra la parte del HTML que dice href=»examplesite.com» y agregue rel=»nofollow» después de esa parte, con un espacio intermedio. ¡Y eso es todo! Ahora ya puedes volver a la pestaña Visual del Editor de WordPress y continuar con la publicación.
      El enlace se verá 100% normal en la pestaña Visual, pero el atributo nofollow permanecerá ahí.
      Espero haberte servido de ayuda y si tienes alguna duda, eres más que bienvenido en el blog, aquí te espero.

      ¡Saludos!

  4. Raúl 03/07/2019 a las 21:39 - Responder

    Bua muchas gracias!! me ha servido para mi nueva pagina que estoy creando!

  5. jorge 12/02/2019 a las 01:53 - Responder

    Sigo todos los pasos para poner el banner en el header y efectivamente me los pone pero en las entradas al blog de mi pagina no en el main menú, ¿sabrás por que ocurre esto?

    • Ignacio Santiago 21/06/2019 a las 13:06 - Responder

      Hola Jorge, me encantaría ayudarte pero habría que ver el caso en cuestión. Saludos!

  6. Luis Marcano 08/01/2019 a las 21:13 - Responder

    Muchísimas gracias Ignacio

    Leì tu post y volvì varias veces, gracias a tu publicación pude insertar mis primeros banners de afiliado de la empresa de hosting donde mi web està alojada

    Ya lo hice en las páginas, ahora me toca hacerlo uno a uno en mis entradas

    Saludos desde Caracas

  7. Carmelo 21/11/2018 a las 00:20 - Responder

    Saludos amigo.
    Estoy intentando eso de solo pegar el código en la parte de texto y al terminar y publicar la entrada solo se observa la dirección URL y no el banner. Soy nuevo en esto y no se si es que Wordpress ha cambiado las cosas que ya no permite hacerlo, con Blogger si pude hacerlo. Gracias por tu ayuda.

    • Ignacio Santiago 21/06/2019 a las 12:25 - Responder

      Hola Carmelo,

      Yo en wordpress uso algún plugin para hacerlo. Me alegra que lo hayas solucionado al menos. Saludos!

  8. Alejandro 29/08/2018 a las 20:17 - Responder

    Buena explicación como siempre.

    Me gustaría saber si en wordpress.com es factible colocar este tipo de imágenes (sin abusar, solo 2 o tal vez 3) en base a su política. ¿Sabes algo de esto? Hablamos de banners que redirijan a sitios de terceros claro está y para wordpress.com, no wordpress.org que evidentemente al ser auto-administrado lo permite.

    Muchas gracias de antemano.

    • Ignacio Santiago 30/10/2018 a las 16:22 - Responder

      Hola Alejandro,

      Si claro que es posible en el .com. A través de diversos plugins. Saludos!

  9. Pablo 28/07/2018 a las 16:25 - Responder

    Hola, cómo hago para que un banner creado por mi sea responsive en wordpress? Existe algún código para esto?

    • Ignacio Santiago 30/07/2018 a las 10:55 - Responder

      Hola Pablo,

      Me encantaría ayudarte pero lo desconozco, si tu sitio web es responsive tendrás que buscar banner adecuados para tu web en función de tus espacios que se acoplen a cualquier dispositivo. Saludos!

  10. Lelina 28/04/2018 a las 01:54 - Responder

    Hola,

    ¡Tu explicación está genial! ¡Gracias por compartir tus conocimientos! ¿Es necesario crear un tema-hijo para añadir el código del banner en la cabecera?

    • Ignacio Santiago 07/11/2018 a las 17:11 - Responder

      Hola Lelina,

      Siempre recomiendo instalar un child theme, pero si sólo vas a añadir un banner, no es necesario.

      Saludos

  11. Juan Jose Sánchez 28/03/2018 a las 10:16 - Responder

    Buenos días!
    Estimado Señor.
    Desearía saber, si éste tutorial de como colocar un banner en Wordepress, se puede descargar en pdf., me interesa mucho, pues; no soy webmaster. Solo un profesor de música.
    Muchas Gracias.
    Cordiales saludos.
    Juan Jose Sánchez

    • Ignacio Santiago 02/04/2018 a las 19:12 - Responder

      Hola Juan José,

      Gracias por tu comentario. Me alegra que el contenido sea de tu interés. Puedes imprimirlo y en lugar de imprimirlo como tal hay una opción de guardar en pdf. Saludos!

  12. Elia 01/10/2017 a las 05:20 - Responder

    Donde puedo encontrar imágenes para una pagina web, apenas la voy a construir

  13. Marc Oliveras 19/09/2017 a las 19:44 - Responder

    Muchas gracias muy bien explicado, lo he hecho como decías pero no me parecen los anuncios solo un espacio en blanco supongo que tendré que esperar un tiempo a que aparezcan no?

    • Ignacio Santiago 04/10/2017 a las 12:35 - Responder

      Hola Marc,

      Gracias por tu comentario. Los anuncios tardan un poco en salir, no obstante debes revisar que has hecho todo bien porque a veces no salen si no sigues todos los pasos al detalle.

      Saludos.

  14. Dan 15/08/2017 a las 18:34 - Responder

    Muchas gracias! Muy util tu aportacion

  15. salvador 03/08/2017 a las 19:01 - Responder

    Hola, quiero hacer una página web en donde los usuarios puedan incribirse y publicar anuncios como segundamano.com y tambien poder agregar estos tipos de banner en la pagina, se puede hacer este tipo de páginas en wordpress y como se llaman?

    • Ignacio Santiago 08/08/2017 a las 12:35 - Responder

      Hola Salvador,

      Gracias por tu comentario. Tendrás que buscar un plugin que te permita que los usuario puedan subir su propio contenido en formato anuncio. Saludos!

  16. XAVIER 28/07/2017 a las 14:37 - Responder

    Creo que es una pagina muy clara de entender, necesitamos paginas así.

  17. josefa 06/07/2017 a las 03:11 - Responder

    Hola. Tengo una consulta, tengo un diseñador que construyo una pagina en WordPress con una barra con 6 secciones, quiero agregar publicidad de distinto tamaños y ubicaciones en el sitio y me dice que solo se puede agregar publicidad en la pagina del Home, en las secciones no es posible. Es cierto esto?

    • Ignacio Santiago 10/07/2017 a las 09:46 - Responder

      Hola Josefa,

      Gracias por tu comentario. No, o es cierto. Puedes colocar publicidad en las páginas que desees de tu web, tanto en la principal como en el resto. O al contrario si lo prefieres solo en algunas. También puedes colocar publicidad en el blog en las diferentes entradas. Saludos!

  18. Javier 13/03/2016 a las 00:54 - Responder

    Hola,

    Muchas gracias me sirvió tu guía para colocar mi banner en mi Wordpress.

    • Ignacio Santiago 18/04/2016 a las 13:23 - Responder

      Hola Javier,

      Me alegro que te haya ayudado. Muchas gracias por tu comentario, pero verte por aquí de vez en cuando.

  19. Constantino 12/03/2016 a las 15:18 - Responder

    Hola,

    ¿En qué parte debo agregar exactamente el código para centrar el banner en la cabecera? Ya lo inserte, pero me sale a la izquierda y lo quiero centrado.

    • Ignacio Santiago 18/04/2016 a las 13:45 - Responder

      Hola,

      Gracia por tu comentario. Usa el código que te dejo debajo.

      Código html del banner

      Saludos

  20. Leslie 10/03/2016 a las 22:37 - Responder

    Hola,

    Muchas gracias. La verdad es que lo necesitaba, ahora sólo falta ver que tal me irá, que nervios.

  21. Javier 26/01/2016 a las 19:54 - Responder

    Hola,

    Buen post, pero tengo una duda: Quiero insertar un banner al principio de las entradas, pero que cambien dependiendo de la categoría. ¿Es posible?

    • Ignacio Santiago 22/02/2016 a las 01:17 - Responder

      Hola Javier,

      Por poderse se puede hacer lo que quieras. Otra cosa es que estés dispuesto a pagar para que te lo hagan o hacerlo tu mismo.

  22. Roni 01/12/2015 a las 13:13 - Responder

    Hola,

    ¿Cómo puedo poner un banner si tengo la versión no descargable de wordpress? Es decir, mi blog es de wordpress.com , copio y pego el código del banner en el post pero aparece el enlace pero no la imagen

    • Ignacio Santiago 16/01/2016 a las 11:03 - Responder

      Hola,

      Entiendo que el banner lo quieres insertar dentro de un post ¿Verdad? Bastaría con añadir la imagen y poner un enlace.

  23. Manoletto 24/07/2015 a las 20:27 - Responder

    Hola,

    No puedo encontrar single.php o page.php en mi tema de wordpress y no he podido insertar un banner publicitario.

  24. Jose 22/07/2015 a las 20:07 - Responder

    Hola Ignacio,

    Añado justo el código de Adsense después de la línea en el fichero single.php. El theme que estoy usando es el de orbit. Después de ver tu post también estoy viendo la manera de hacer que los banner sean responsive. Hacerlo de tal manera, que para unas determinadas medidas se visualice para móviles o para pc.

    • Ignacio Santiago 05/08/2015 a las 13:31 - Responder

      Hola Jose,

      ¿Después de qué línea? Para hacer responsive los banner, estos también tienen que ser responsive o «adpatables». Comprueba qué lo tienes bien configurado en Google Adsense.

  25. Jose 17/07/2015 a las 13:18 - Responder

    Si realizo la inserción del código en el header si se visualiza en el blog. Sin embargo, si incluyo el código en single.php, no se ve la visualización del banner.

    • Ignacio Santiago 21/07/2015 a las 20:24 - Responder

      Hola Jose,

      Dime exactamente cómo estás haciendo la implementación del banner por favor,

  26. Ramiro 13/05/2015 a las 20:19 - Responder

    Muy buen artículo. Espero tener suerte ya que en los últimos tiempos Google ha complicado las cosas, sobre todo para los comenzamos desde cero. Muchísimas gracias, me sirvió bastante.

    Saludos

Suscríbete y estate al día en marketing digital

Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.

Vale, me apunto
servicios marketing digital diseño web wordpress seo fondo
servicios marketing digital diseño web wordpress seo fondo
Suscríbete y estate al día en marketing digital

Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.

Vale, me apunto