Agregar una barra de notificaciones por código

Crear una barra de notificaciones por código en nuestro WordPress

Esta semana vamos a ver cómo podemos crear una barra de notificaciones por código para nuestra web. Hace algún tiempo hemos visto cómo crear una barra de notificaciones mediante un plugin, pero en esta ocasión lo haremos por código y así podremos ahorrarnos un plugin y no sobrecargaremos nuestro WordPress.

Cosas que necesitamos para crear nuestra barra de notificaciones

En primer lugar, necesitamos pegar una línea de código en el archivo header.php de nuestro tema activo o de nuestro Child Theme.

Ya que vamos a mostrar la barra de notificaciones en la parte superior de nuestra web, debemos pegarla justo después de la etiqueta </head> del archivo header.php.

El código que debemos pegar es el siguiente:

<div id="barra-notificacion">Visita <a href="https://www.josegonzalezbueno.com/">mi blog</a> con artículos sobre WordPress.</div>

Nota:
También puedes pegar este código justo después de la etiqueta <body>.

Pegar el código para insertar la barra de notificación
Pegar el código para insertar la barra de notificación

Una vez que has pegado el código, puedes ir a la parte frontal de tu web para ver que ya se está viendo el aviso. Podrás darte cuenta de que no se ve como nosotros queremos, y para eso, vamos a aplicarle un poco de CSS y hacer que la barra de notificación sea más bonita, o por lo menos, intentar que se integre mejor con nuestra imagen corporativa y con los colores de la web.

Crear los estilos CSS para hacer más atractiva nuestra barra de notificaciones

Como acabamos de ver, ya tenemos nuestra barra de notificaciones por código instalada, pero ahora es el momento de hacer que se integre de una forma más visual en nuestra web.

Para hacerlo tenemos que usar código CSS. Yo he preparado este código, pero tú puedes utilizar el tuyo propio o cambiar el que te dejo a continuación.

#barra-notificacion
{
background: #2c3644;
color: #ffffff;
font-size: 16px;
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;
}
#barra-notificacion a
{
color: #ffffff;
border-bottom: 2px solid;
}

Este código puedes pegarlo en el Personalizador de tu tema activo, para hacerlo vamos al menú Apariencia, Personalizar y lo pegamos en el apartado CSS Adicional. Guardamos y vamos a la parte pública para ver el resultado.

Agregar una barra de notificaciones por código
Agregar una barra de notificaciones por código

Si te das cuenta, la barra se queda fija en la parte superior de la pantalla (sticky), pero si quieres que no moleste demasiado y que se desplace junto con el contenido de la página, en el anterior código solo debes borrar estas dos líneas:

position: fixed;
z-index: 1;

Esto es todo por hoy, ahora ya puedes crear una barra de notificaciones por código, cada vez que tengas algo importante que mostrar a tus visitantes. Te invito a que juegues un poco con el código CSS y que cambies los colores y tamaños a las necesidades de tu web.


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 1 - Promedio: 1]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *