Todo sobre Apple, Android, Juegos Apks y Sitios de Peliculas

Cómo crear una interfaz de usuario para la notificación de mensajes de emergencia en WordPress

Las situaciones de emergencia pueden afectar a cualquier organización. Ya sea un cierre relacionado con el clima, un cambio repentino en el horario de atención o una tubería con fugas en el sótano, las cosas suceden. Una de las mejores formas de comunicar este tipo de problemas es colocarlos en su sitio.

Esta información es importante y debe destacarse del resto del contenido del sitio. Además, agregar debe tomar el menor esfuerzo posible. Este es especialmente el caso cuando su cliente actualiza el sitio. Idealmente, no debe tomar decisiones de diseño cuando intente compartir un mensaje importante. El tiempo también es crítico.

Hoy le mostramos una solución práctica que utiliza campos personalizados de WordPress. Te permite:

  • Crea un mensaje de emergencia personal.
  • Seleccione un icono de Font Awesome para que aparezca junto a él.
  • Active o desactive el mensaje con un solo clic.
  • Agregue un diseño llamativo a su tema de WordPress.

Listo para comenzar? ¡Hagámoslo!

Lo que necesitas

Esto es bastante fácil de armar. Sin embargo, necesitas algunos ingredientes:

Los dos complementos gratuitos deben estar instalados y activados. También necesita acceso a su tema de WordPress.

Si está utilizando uno de los temas predeterminados que vienen con WordPress o un tema comercial, cree un tema secundario. Esto evitará que los cambios que realice se sobrescriban en una actualización posterior.

Agregar y configurar campos personalizados

La primera tarea es crear un grupo personalizado de campos en WordPress. Primero, vaya a Campos personalizados> Agregar nuevo en el Panel de WordPress.

Puede crear cualquier campo que desee usar. Aquí está nuestro ejemplo:

Alternativamente, puede repetir este ejemplo exactamente obteniendo el siguiente archivo JSON:

Después de descargar el archivo, vaya a Campos personalizados> Herramientas. Luego puede importar el grupo de campos personalizados en su sitio.

La pantalla Importar grupos de campos.

Después de la importación, vaya a Campos personalizados> Grupos de campos. Haga clic en “Notificaciones de emergencia” para abrir la pantalla de edición.

Tenga en cuenta que es posible que desee cambiar algunas configuraciones aquí. En particular, concéntrese en las reglas del sitio para el grupo de campo. Asegúrese de que los campos aparezcan en la (s) página (s) que desea. En nuestro caso, mostramos los campos en el “Sitio web”.

Reglas de colocación de campo personalizadas

Crea el mensaje de emergencia

Ahora es el momento de navegar a la página de inicio donde se asignan los campos de notificación de emergencia.

La apariencia de los campos en el editor de contenido varía. Si utiliza el editor de bloques Gutenberg, el conjunto de campos se oculta en la parte inferior del editor y debajo de todo el contenido existente.

Si usa el editor clásico, los campos en el archivo JSON que proporcionamos están configurados para que aparezcan directamente debajo del título de la página y sobre todo el contenido existente.

En cualquier caso, es fácil agregar el mensaje a nuestro sitio. En el cuadro Mostrar notificación de emergencia, haga clic en Sí. Luego seleccione un símbolo (vea la lista de símbolos disponibles de Font Awesome). Ingrese su mensaje desde allí en el campo WYSIWYG.

Campos de notificación de emergencia en el Editor de contenido de WordPress.

Guarda la página y listo! Bueno, casi …

Agregue su mensaje en la parte frontal y diseñe

Finalmente, peguemos nuestro mensaje de emergencia en nuestro tema de WordPress y agreguemos un estilo CSS.

En este ejemplo, colocamos el mensaje sobre el encabezado del sitio. Aquí se extiende a través del ancho de la pantalla y aparece en la parte superior de la página. Por supuesto, puede agregar este extracto a cualquier área que considere mejor.

Tienes mucha flexibilidad en términos de estilo. Aquí usamos un fondo rojo con texto blanco grande. Nuestro icono de Font Awesome está resaltado con un color amarillo.

¡El resultado final será difícil de perder!

Notificación de emergencia en frente del sitio.

Mantenga a los visitantes actualizados

El sitio web de una organización es uno de los primeros lugares donde las personas buscan información importante. Si bien también es importante publicar este tipo de mensaje en las redes sociales, puede perderse fácilmente en una gran cantidad de contenido.

Esta solución proporciona una manera fácil de agregar un mensaje de emergencia en cualquier momento. Cuando ya no sea necesario, se puede eliminar con solo unos pocos clics.

También hay formas de mejorar la funcionalidad al agregar otros campos personalizados relevantes. ACF tiene muchas opciones integradas y hay una serie de complementos adicionales que pueden hacer aún más.

Casi todos los sitios pueden usar estas características. Configúralo ahora para que no tengas que luchar más tarde.