El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

WordPress: Trucos semanales

Crear una smart bar de notificación

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
WordPress como herramienta de gestión y creación se ha convertido por méritos propios es una completa solución de desarrollo de proyectos digitales que puedes adaptar a prácticamente todo tipo de necesidades. En esta serie semanal, dedicada por completo al desarrollo de proyectos digitales empleando WordPress, verás un amplio surtido de trucos, técnicas y plugins variados con los que podrás añadir nuevas posibilidades a todos nuestros proyectos orientados al mundo web. De esta forma conseguirás ahorrar tiempo y los esfuerzo necesarios para dar con ellos, aportándonos nuevos conocimientos de aplicación directa desde el primer momento.
05:14
  Añadir a marcadores

Transcripción

Una práctica manera de informar a nuestros visitantes de un acontecimiento o evento importante relacionado con nuestro proyecto, es mediante el uso de una Smart Bar. Tras este nombre que puede sonar un poco extraño de inicio, no hay nada más simple que una barra horizontal de notificaciones. Seguro que estamos acostumbrados a ver, en más de una ocasión, la típica barra flotante que nos avisa del uso de cookies en la página web. Sería hacer algo similar, pero teniendo en mente el hecho de poder usar este espacio relevante para lo que nosotros necesitáramos: informar de un descuento en nuestro e-commerce, la puesta en marcha de un concurso, informar de una parada de mantenimiento, etcétera. En función de los conocimientos técnicos de los que dispongamos, podremos crear esta Smart Bar de manera totalmente autónoma, mediante un poco de código, o echar mano a alguno de los múltiples plugins y soluciones disponibles en la actualidad. Seamos prácticos y veamos a continuación una de las formas más rápidas para poder crear una barra de notificaciones para nuestros proyectos. Siempre intento ser práctico con estos pequeños trucos o consejos que estamos viendo de WordPress y si nos encontramos ante la necesidad de añadir una Top Bar, una barra de notificaciones o una Smart Bar, como queramos llamarla, hay muchas opciones, podemos hacerlo mediante código JavaScript, podemos utilizar plugins como SumoMe en caso de que ya los tengamos instalados, pero hay plugins también mucho más sencillos que se dedican exclusivamente y de manera específica a permitirnos la creación y configuración de este tipo de contenidos dentro de nuestra instalación. Así que, por ser los más prácticos posibles, voy a dirigirme a la sección del directorio de plugins y voy a buscar por Top Bar y voy a escoger una de las soluciones que más acogida está teniendo actualmente. Como podemos ver, hay muchísimas opciones disponibles, con lo cual, si alguna de las que instalemos en un primer momento no nos funciona, bastaría con probar otra. Yo, en este caso, voy a escoger la primera opción que me ofrece WordPress, voy a instalarla; tiene unas cuantas instalaciones activas, no tiene una mala valoración precisamente. Bastaría con activarlo para poder empezar a trabajar y configurar nuetra barra superior. Tengo aquí una nueva zona dentro del panel de administración para poder configurar mi barra de notificaciones superior. Lo primero que tengo que mostrar es la barra en sí, con lo cual, tendría que activarla. Quiero mostrarla siempre visible, es decir, que se quede fijada en la parte superior a medida que vaya haciendo scroll. Bueno, pues vamos a ponerle que sí. Y aquí es donde yo escribiría el mensaje que quiero incluir en mi barra. Puedo darle a la posibilidad de incluir un botón, que tenga un mensaje en concreto, que enlace a una sección en concreto de mi página. o a un enlace externo, si quiero también puedo cambiar el color de la barra. Bastaría con guardar los cambios para poder incluir la barra en mi página web. Vamos a dirigirnos a la parte pública a ver si funciona correctamente. Aquí es donde aparecería mi barra superior. De momento ya se está mostrando. Habría que mirar si el contenido se ve de manera correcta. Aquí tenemos todos los elementos, vamos a ver si todo se ha configurado correctamente. Vamos a escribir, por ejemplo, el mensaje, porque esto es un placeholder evidentemente. Vamos a poner "Mi primera barra de notificación"; "Ver enlace". Vamos a guardar los cambios. Vamos a recargar a ver si todo ha funcionado bien. Y aquí ya lo tenemos. Evidentemente, me había confundido en este primer momento realmente es necesario que escribamos evidentemente un texto y no dejemos sólo los placeholder. Puedo cambiar el color en cualquier momento, y con esto bueno, ya, así de sencillo, ya tendría una barra de notificaciones que además me acompaña al hacer scroll, con lo cual, esto es ideal si tenemos algún anuncio importante, si queremos informar de un sorteo, de algún tipo de parada de mantenimiento dento de nuestro WordPress. Podemos quitarle el botón y simplemente que sea una notificación de tipo texto. Vamos a quitar el botón y vamos a decirle que no se active y se mantenga a medida que hacemos scroll. La guardamos. Vamos a poder mostrarlo. Aquí la tenemos sin botón y, además, desaparece cuando nosotros hacemos scroll. Con lo cual, yo creo que con esto ya tenemos cubierto el truco de esta ocasión que consistía en poder crear una Smart Bar de notificaciones. Yo creo que con este plugin además es supersencillo, con lo cual, no necesitaríamos nada más que poder instalarlo y configurarlo a nuestro gusto dentro de nuestro proyecto.