Cómo añadir Banners a tu web WordPress

Hoy en día la publicidad es parte esencial de la mayoría de los sitios web de Internet. Aquí te mostraremos cómo agregar banners a diferentes partes de tu web de WordPress. La mayoría de las webs que ofrecen los banners te proporcionarán todo el código del banner por lo que todo lo que tienes que hacer es decidir dónde quieres colocarlo y seguir las instrucciones.

Cómo añadir un banner a la barra lateral

Añadir banner a la barra lateral es algo muy sencillo. Hay dos maneras de hacerlo: si tu tema es compatible con los widgets en la barra lateral, puedes agregar un widget de texto con el código del banner en él, o puedes agregar el código directamente en el archivo sidebar.php de tu tema.

Si tu tema es compatible con widgets, entra en Apariencia / Appearance y luego en Widgets. A continuación, arrastra un widget de texto al área del widget correspondiente. En nuestro caso eso sería “Barra Lateral 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 del banner en él, pon un título para el widget (esto es opcional, puedes dejarlo vacío si no quieres tener un título por encima del banner) y a continuación pulsa el botón Guardar / Save.

Esto colocará el banner que desees en la barra lateral de tu web de WordPress.

Si el tema no es compatible con widgets tendrás que añadir el código del banner directamente en el sidebar.php. Puedes editar este archivo desde Apariencia / Appearance en la parte de tu página de administrador de WordPress que dice Editor.

Cómo añadir un banner a un único post o página

Si deseas agregar un banner al cuerpo de tu post o en una página, basta con abrir el editor de WordPress en modo texto y pegar el código del banner.

Esto agregará la imagen entre los dos apartados del post. Puedes utilizar el editor de WordPress WYSIWYG con el fin de cambiar la posición o alinear el banner con el fin de hacer que vaya acorde con tu post o página.

Cómo agregar el banner sobre o debajo de todos los post o páginas

Para añadir banners sobre o debajo de todos tus posts o páginas, es necesario agregar el código del banner dentro de los archivos single.php o page.php de tus temas de WordPress. Ambos archivos tienen un contenido similar, pero anejan diferentes partes de tu web: los posts (single.php) y las páginas (page.php). Puedes editar esos archivos accediendo a tu área de administrador y yendo a Apariencia / Appearance y luego a Editor.

Si deseas agregar el banner sobre tus posts y páginas, busca el código siguiente:

Código

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

Justo después de este código, añade el código de tu banner. Esto agregará tu banner sobre todos los títulos de tus páginas y posts. Claro está que puedes añadir el estilo CSS con el fin de hacer que se vea a tu gusto.

Cómo añadir un banner al encabezado o al pie de página

La adición de banners al pie de página o en el encabezado depende del tema que estés usando. Si tienes un área para widgets añadida al pie de página o en la cabecera, puedes seguir las instrucciones de la primera parte de este tutorial para añadir banners en la barra lateral.

Si tu tema no tiene áreas para widgets añadidos en las zonas de pie de página o en el encabezado, es necesario añadir tu banner manualmente. Para ello inicia sesión en tu página de administrador de WordPress y ve a Apariencia / Appearance en Editor. Vamos a tomar como ejemplo un banner personalizado de Sered Hosting Profesional en el encabezado. Para añadir el banner en el encabezado de la página, selecciona header.php de la lista de archivos disponibles para su edición. Debes tener en cuenta que el código de este archivo será diferente en función de tu tema. Necesitas conocimientos de HTML muy básicos para añadir este banner.

En primer lugar, tienes que encontrar la apertura de la etiqueta del cuerpo. En el tema de WordPress twenty-twelve, por defecto, tiene este aspecto:

Código

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

Justo después añade este código:

Código

<div class=”headerbanner”><a href=”BANNERLINK” target=”_blank”><img src=”LINKTOIMAGE” width=”200″ height=”50″ /></a></div>

Es necesario sustituir BANNERLINK y LINKTOIMAGE por la dirección URL a la que deseas enlazar el banner y el enlace a la imagen del banner. Por último, vuelve a colocar los parámetros de ancho y alto con las dimensiones reales de la imagen del banner.

Este código colocará tu banner en la parte superior del sitio. Ten en cuenta que dependiendo del tema que estés usando, puede que tengas que mover el código a fin de colocarlo donde deseas.

Ten en cuenta que envolvimos el banner en un elemento div. Hemos hecho esto porque le daremos estilo a este banner más tarde. Para ello, selecciona style.css de la columna de la derecha y cuando la página se actualice, añade las siguientes líneas:

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 aspecto mucho mejor. Por supuesto, esto es sólo un ejemplo: se puede usar todo el poder del CSS con el fin de dar estilo que quieras al banner.

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

Usar plugins para mostrar un banner en tu web

Si deseas mostrar más de un banner en una página, deberás utilizar funciones más avanzadas, se aconseja el uso de uno de los plugins de WordPress disponibles para la gestión del banner.

Ya que esta modalidad depende de la estructura del sitio en particular y tus necesidades, sugerimos que busques los plugins de banner en el Directorio de Plugins de WordPress con el fin de encontrar la extensión que se ajuste mejor a tus necesidades. Una vez hecho esto, puedes instalar cualquier otro plugin de WordPress.

¿Te resultó útil este artículo?

Artículos relacionados