Tutorial de Banners en WordPress

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. En este tutorial te mostraremos cómo agregar banners a diferentes partes de tu web de WordPress. La mayoría de las web que ofrecen las banners te proporcionarán todo el código del banner por lo que todo lo que tienes que hacer es decidir dónde quieres colocar el banner y seguir las instrucciones a continuación.

Añadir banner a la barra lateral es algo muy común. Hay dos maneras de hacer esto: 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, ve a Apariencia/ Appearance -> 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 (opcional, puedes dejarlo vacío si no quieres tener un título por encima del banner) y 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 que tendrás que añadir el código del banner directamente en el sidebar.php. Puedes editar este archivo desde Apariencia/Appearance -> Editor parte de tu página de administrador de WordPress.

Cómo añadir 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 de este 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 banners encima o debajo de todos los post o páginas

Para añadir banners encima 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 que manejan diferentes partes de tu web: los posts (single.php) y las páginas (page.php). Puedes editar esos archivos, accediendo a tu área de administración de WordPress y yendo a Apariencia / Appearance -> Editor.

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

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

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

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

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

Por otro lado, si tu tema no tiene áreas para widgets añadidos en las zonas de pie de página / encabezado, es necesario añadir tu banners manualmente. Para ello inicia sesión en tu página de administración de WordPress y ve a Apariencia/ Appearance -> Editor. A los efectos de este tutorial, vamos a añadir un banner personalizado de SiteGround a la cabecera. Para añadir el banner en la cabecera de la página, selecciona header.php de la lista de archivos disponibles para su edición. Ten en cuenta que el código de este archivo será diferente en función de tu tema. Necesita conocimientos de HTML muy básicos para añadir este banner.

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

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

Justo después añade este 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 de su 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 quieras.

Ten en cuenta que envolvimos el banner en un elemento div. Hicimos 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:

.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 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 banners en tu web

Si deseas mostrar más de un banner en una página, hacer seguimiento de los anuncios y funciones más avanzadas, es aconsejable el uso de uno de los plugins de WordPress disponibles para la gestión de banners.

Ya que depende de la estructura del sitio en particular y sus necesidades, te 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, se puede instalar como cualquier otro plugin de WordPress siguiendo las instrucciones de nuestro tutorial sobre cómo instalar plugins de WordPress.