Como convertir el widget «barra superior» de GeneratePress en una ventana de notificaciones

Una barra de notificaciones es un recurso muy útil si deseas mostrar un mensaje en todo el sitio web, ya que podrás notificar a tu audiencia sobre ciertas noticias o una promoción que ofreces en tu tienda on-line.

Existen muchos plugins en el repositorio de WordPress pero el theme GeneratePress tiene un widget de barra superior que se puede activar desde el Personalizador, así que, ¿por qué no aprovechar lo que ya tenemos disponible y así de paso ahorramos algunos recursos y solicitudes HTTP ?

En este tutorial aprenderás a transformar el widget «barra superior» de GeneratePress en una ventana de notificaciones.

Paso 1: Activar el widget desde el personalizador

Desde Apariencia-> Personalizar-> Widgets-> Barra superior, se pueden agregar widgets personalizados como menús personalizados, íconos a redes sociales, información de inicio de sesión, etc. pero no le da al usuario la opción de poder cerrarla con el uso de un botón cerrar (X)?

Área del widget de la barra superior de GeneratePress en el Personalizador

Lo primero que tienes que hacer es agregar un widget HTML personalizado al área de widgets de la barra superior.
Desde Apariencia-> Personalizar-> Widgets-> Barra superior y luego haga clic en el botón Agregar un widget para agregar un widget HTML personalizado.

Usé el siguiente código HTML para agregar un párrafo y un ícono de Font Awesome dentro del área del widget HTML personalizado de contenido:


<p>USA EL CÓDIGO: COD20 Y TENDRÁS UN 20% DE DESCUENTO</p>
<i class="top-close-button">X</i>

En Apariencia-> Personalizar-> Diseño-> Barra superior, configura «Ancho de barra superior» en Completo y «Alineación de barra superior» en Centro.

Ahora Elige el color de la barra y el texto desde Apariencia-> Personalizar-> Colores-> Barra superior

Paso 2: A continuación, necesitamos añadir Snippets de código CSS y JavaScript para convertir el widget «barra superior» de GeneratePress en una ventana de notificaciones al uso

Añade el siguiente fragmento al fichero style.css de nuestro child theme o si trabajas con GeneratePress desde Personalizar , CSS adicional :

Este contenido está únicamente disponible para los suscriptores, para tener acceso a esta sección, y a todos los tutoriales y snippets de Código GP. Puedes identificarte en este enlace o si todavía no tienes un plan de pago puedes suscribirte aquí.

El siguiente paso sería crear una sub carpeta llamada js dentro de la carpeta de tu childtheme. Y ahora dentro de la sub carpeta que acabas de crear crea un nuevo archivo top-bar.js con el siguiente código:

Este contenido está únicamente disponible para los suscriptores, para tener acceso a esta sección, y a todos los tutoriales y snippets de Código GP. Puedes identificarte en este enlace o si todavía no tienes un plan de pago puedes suscribirte aquí.

Ahora tenemos que hacer que el archivo javascript que hemos creado en el paso anterior cargue en todas las página, así que añade el siguiente fragmento de código PHP al fichero functions.php de nuestro child theme o en tu plugin de funcionalidades :

Este contenido está únicamente disponible para los suscriptores, para tener acceso a esta sección, y a todos los tutoriales y snippets de Código GP. Puedes identificarte en este enlace o si todavía no tienes un plan de pago puedes suscribirte aquí.

Conclusión

Con este tutorial, ahora ya sabes cómo convertir el widget «barra superior» de GeneratePress en una ventana de notificaciones.

Así de fácil!!! ¿ Qué te parece ?

¿Tienes alguna pregunta o quieres mandarme una sugerencia para próximos tutoriales ó snippets?

Déjala en el formulario de soporte de la intranet.

Recuerda solo si estás suscrito, si no estás suscrito no ?

Acceder