Cómo crear una barra de anuncios fija en WordPress manualmente

Muchos sitios web muestra una barra con información en el

El HTML

Lo primero que tenemos que hacer es implementar el HTML de nuestra barra de anuncios fija. Para ello, pega el siguiente código al final de tu documento HTML, es decir, antes de que se cierre el tag .

Si tienes dudas sobre dónde colocar este código, por regla general, el cierre del body suele ubicarse en el archivo footer.php del tema que estés utilizando actualmente.


 En nuestra tienda online puedes disfrutar de un 5% de descuento en todos los artículos de menaje. Promoción válida hasta el día 31/08/2017.

El CSS

Una vez implementado el código HTML, abre el principal fichero .css de tu tema y pega el siguiente código. No olvides cambiar el valor de las propiedades background y color para que se ajusten al diseño de tu tema.

#barra{
 background: #f54d17;
 color: #fff;
 display: block;
 position: fixed;
 bottom: 0;
 width: 100%;
 padding: 10px 0px;
 text-align: center;
}

#barra a{ 
 color: #fff; 
 text-decoration:underline; 
 font-weight: normal; 
}

Como ves no es nada complicado. Simplemente lo que hago es definir que el elemento #barra tenga un ancho del 100% (width:100%) y utilizamos las propiedades position:fixed y bottom:0 para que nuestra barra de anuncios se mantenga fija y se coloque al final de la página, respectivamente.

Si en lugar de en el pie, quieres situarla en la parte superior de la página, sustituye la propiedad bottom:0 por top:0.

Una vez que hemos añadido los estilos básicos a nuestra barra de anuncios, aún tenemos que realizar ciertos “apaños” para que asegurarnos que nuestra barra se va a ver bien. Lo primero que tenemos que tener en cuenta son los dispositivos móviles. Obviamente, no queremos que la barra se muestre en dispositivos pequeños como smartphones y demás, ya que ocuparía un espacio necesario y no se leería muy bien.

En tu archivo CSS, simplemente añade lo siguiente. Si tu web ya utiliza media queries, solo debes añadir el #barra{display:none;} en la parte de las media queries de tu archivo CSS. Si no, pega esto en tu hoja de estilo.

@media only screen and (max-width: 767px) {
 #barra{ 
 display: none;
 }
}

Una última cosa, como hemos ubicado la barra en el pie de página, se pondrá encima de tu actual footer, escondiendo alguna de sus partes. Para solucionar esto, debes buscar el elemento footer en tu hoja de estilos y añadirle un padding, tal que así:

#footer{
 padding-bottom: 25px;
}

¿Cómo mostrar mensajes?

Enhorabuena, si has llegado a este punto debo decirte que tu web ya cuenta con una barra de anuncios fija para mostrar mensajes. Pero, ¿qué tenemos que hacer para mostrar mensajes?

A ver, hay que tener en cuenta que esta solución nos ahorra instalar plugins y sobrecargar la instalación, pero carece de ciertas funcionalidades que, estos plugins, suelen traernos por defecto. Desgraciadamente, no podremos modificar el contenido de nuestra barra dinámicamente desde el propio backoffice de WordPress. Para modificar el contenido de nuestra barra, tendremos que modificar manualmente el contenido del HTML que hemos introducido en el primer paso. Lo que tendremos que modificar es lo que está dentro de

. Por ejemplo:


 ¡No te pierdas ninguno de nuestros posts! Suscríbete a nuestro newsletter.

¿Cómo mostrar el últimos post publicado en la barra de anuncios?

Puedes utilizar la barra de anuncios parsa mostrar el último post publicado. Para ello, reemplaza el código HTML con el siguiente código:


 '1', 'post_status' => 'publish' );
 $posts = wp_get_recent_posts( $args );
 printf( 'Último artículo: %2$s',
 esc_url( get_permalink( $posts[0]['ID'] ) ),
 apply_filters( 'the_title', $posts[0]['post_title'], $posts[0]['ID'] )
 );
 
?>

Y hasta aquí nuestro artículo en el que te enseñábamos cómo crear una barra de anuncios fija en el pie de WordPress manualmente. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El artículo ha sido extráido del original de CatsWhoCode. ¡Nos leemos!

SIGUE LEYENDO…
Ir a la fuente
Author:

Jorge López

Declaración de intenciones de SeoX