Cómo activar el modo nocturno en WordPress

Durante algún tiempo, los sistemas operativos y las aplicaciones incluyen versiones de sus interfaces gráficas en las que los fondos blancos se reemplazan con fondos negros para reducir la emisión de la luz durante las horas nocturnas y, por lo tanto, dañan menos sus ojos. Se conoce como el modo nocturno. Ya sea después de la moda o porque realmente funciona, el modo nocturno es cada vez más popular. Hay quienes se aseguran de que los modos nocturnos tengan beneficios para el medio ambiente, porque las pantallas negras consumen menos energía que las blancas. Pero también hay detractores de este tipo de modos oscuros.
De todos modos, esta puede ser una funcionalidad que le interese en su sitio, y para esto hoy hablaremos sobre WordPress Night. WordPress aún no incluye un modo nocturno de forma predeterminada, pero hay opciones para agregar el modo nocturno tanto en WordPress como en el front-end. Como de costumbre, los complementos son la solución para expandir WordPress con esta curiosa funcionalidad visual. Cómo activar el modo nocturno en el tablero de WordPress Comience con el complemento de modo oscuro para WordPress, que le permite activar la noche en el tablero de WordPress. Es fácil de usar y gratis.

Instale y active el complemento de modo oscuro para WordPress si desea activar el modo nocturno en el tablero de WordPress. Lo primero es instalar y activar el complemento. Podemos encontrarlo directamente en el directorio de complementos de WordPress, directamente en el tablero de WordPress a través del menú de complementos, como puede ver en la captura de pantalla anterior. Una vez que se instale el complemento del modo oscuro, cada usuario de su WordPress tendrá en su perfil la opción de activar en el tablero: cada usuario de su WordPress elija si quiere ver el tablero en el modo nocturno o en el módulo normal cuando usted Active el complemento del modo oscuro. Lo bueno en este complemento es que cada usuario elige la forma en que WordPress Dashboard quiere ver de manera oscura o de manera normal. De esta manera, si hay alguien que quiere continuar usando el tablero de WordPress como siempre, con un fondo blanco, entonces no hay ningún problema para hacerlo.

Con el complemento de modo oscuro para WordPress, podemos activar el modo nocturno en el tablero de WordPress. En la captura de pantalla anterior, puede ver el resultado de la activación del modo oscuro. ¡Y se ve genial! Realmente me gustó el resultado de tener un color de fondo negro y en la parte central de la página y no solo en el menú lateral. Desafortunadamente, hay un problema esperando el complemento de modo oscuro de WordPress: para proporcionar compatibilidad con el editor de bloques de Gutenberg. En la siguiente captura de pantalla, puede ver que aún no puede aplicar el fondo oscuro de Gutenberg:

El complemento del modo oscuro para activar el modo nocturno en el tablero de WordPress aún no se entiende con Gutenberg. Sospecho que si el complemento tiene éxito y los usuarios preguntarán, sus desarrolladores terminarán adaptándolo para que el editor de bloques aparezca en la noche. En cualquier caso, el ritmo frenético de desarrollo de Gutenberg y sus actualizaciones “frecuentes” en sus estilos hacen que la adaptación algo compleja. Cómo activar el modo nocturno para sus visitantes. WordPress Plugin Dark Mode agrega el modo nocturno en el tablero de WordPress. El resto de su sitio, es decir, la interfaz que ven los visitantes, continuará pareciendo igual, sin cambiar. Si desea que sus visitantes tengan la opción de activar el modo nocturno en su sitio, utilizando fondos oscuros en lugar de fondos abiertos, debe instalar el complemento de modo NIGHT WP.

El complemento de modo NIGHT WP le permite agregar el modo nocturno a WordPress para que los visitantes puedan elegir si quieren activarlo o no. Este complemento, como el modo oscuro, es completamente gratuito y también lo tiene disponible en el directorio de complementos de WordPress.
Una vez instalado, no verá nada en la configuración o en ningún menú adicional. Lo que debe hacer es ir al menú de aspecto y allí para editar sus menús. En el menú principal, debe agregar un enlace personalizado sin ninguna URL. Este nuevo elemento de menú nos ayudará a agregar el interruptor para activar y desactivar el modo nocturno.

Debe agregar una conexión personalizada a su menú para que el complemento del complemento de modo NIGHT WP agregue el elemento de conmutación para cambiar entre el modo normal y nocturno. En la interfaz de administración del menú, debe abrir las opciones de pantalla que encontrará en la esquina superior derecha para activar la opción de agregar clases de CSS, como puede ver en la siguiente captura de pantalla: habilitar la opción de pantalla para agregar clases CSS en los menús para agregar La clase de complemento de modo Noche WP. Después de haber hecho esto, cuando edite el elemento del menú que he agregado antes, verá un campo adicional donde puede agregar clases CSS. Aquí debe incluir la clase CSS WP-Night-Mode. Esta clase es la que necesita el modo NIGHT WP para identificar qué elemento debe usarse como un interruptor de modo nocturno.
Agregue la clase WP-Night-Mode al elemento del menú que creé para hacerse cargo del estilo de un cambio entre el modo nocturno y el modo normal. Por defecto, el modo NIGHT WP es un complemento que no agrega colores oscuros a su interfaz. Para definir estos colores, debe ir al menú de aspecto y allí para abrir el menú de personalización.

El personalizador de WordPress se abrirá y encontrará la opción de modo nocturno. Si lo selecciona, verá que tiene las opciones para activar el modo nocturno de forma predeterminada y crear más estilos. En cada estilo, defina el color de fondo, el color del texto y el color de los enlaces. Lo bueno de la personalización es que puede ver una vista previa real de cómo se verá su sitio web con los colores elegidos: en Customizer podemos definir el fondo y los colores para el texto y los enlaces del modo nocturno si usamos el complemento del modo NIGHT WP para WordPress. Desafortunadamente, el resultado no es perfecto: algunos elementos todavía tienen fondos abiertos que se ven raros en la noche. Pero no te preocupes, podemos resolver eso. De la personalización en sí, puede agregar reglas CSS adicionales para remediar estos pequeños problemas.


Regrese a la personalización y verá la opción CSS adicional. Si lo selecciona, puede escribir reglas CSS allí mismo. Estas reglas pueden ser del siguiente tipo: Body.wp-Night-Mode-on .class-o-the-element-to-fix {color: # 000; } Tenga en cuenta que lo que realmente hace el complemento es aplicar el CSS WP-Night-Mode-On a la etiqueta del cuerpo de su sitio, por lo tanto, si desea remediar los antecedentes de un elemento HTML, todo lo que necesita hacer es Para encontrar un selector para ese elemento y aplicar el remedio cuando la etiqueta del cuerpo tiene la clase WP-Night-Mode-On.

En la siguiente comparación, puede ver una comparación básica entre el modo normal y el modo nocturno con los colores que aplicamos:
El modo nocturno cambia el aspecto de su sitio para los visitantes.Ellos son los que pueden seleccionar si quieren ver la noche o el modo normal.Haga clic en el separador de imagen y deslice el mouse para ver cómo cambiar la vista en el modo nocturno y en el modo normal.Agregar el modo nocturno a WordPress es muy fácil debido a algunos complementos.Hoy revisamos los complementos que nos ayudan a activar el modo nocturno en WordPress y Frontand.¡No olvides comentar a continuación con tu opinión!Imagen presentada por Priscilla du Preez en Unsplash.