Modo oscuro de WordPress sin complemento: ¿es posible?

Publicado: 2022-10-18

Tabla de contenido

Acerca del modo oscuro de WordPress sin complemento

Probablemente has estado sobrecargando tus ojos al pasar mucho tiempo frente a la pantalla. Por lo tanto, es importante que los tranquilice mientras usa las computadoras. Una de las formas más efectivas de darle un descanso a sus ojos es cambiar la configuración de visualización de la pantalla al modo oscuro.

Los propietarios de sitios web deben y pueden agregar un modo oscuro a sus sitios web para mejorar su experiencia visual. Si está utilizando WordPress para su sitio, agregar el modo oscuro debería ser fácil. Puede hacerlo manualmente o instalando un complemento.

Estamos de acuerdo en que el complemento es la mejor solución para crear una versión oscura para su sitio web de WordPress. ¡Pero también tenemos respuestas para aquellos que piensan que es imposible habilitar el modo oscuro de WordPress sin un complemento! Sí, es posible.

Aquí, hablaremos sobre agregar un modo oscuro con y sin usar un complemento. Y también discuta cuál sobresale dónde. Más adelante en el artículo, también conocerá uno de nuestros complementos favoritos llamado QS Dark Mode.

¡Así que estad atentos!

Beneficios de usar el Modo Oscuro en WordPress

¿Por qué debería usar el modo oscuro en WordPress? Hay algunas buenas razones detrás de esto. Te das cuenta personalmente de su necesidad mientras navegas en tu PC por la noche con ojos cansados.

Al ser propietario de un sitio web, puede brindar muchos beneficios a los usuarios al agregar este modo a su sitio web. Y también debe agregar valor a su negocio.

Hay más en sus beneficios; vamos a averiguar algunos de estos a continuación.

  • Minimiza significativamente la luz blanca que proviene de la pantalla de la computadora
  • Reduce la fatiga visual
  • Ahorra energía y aumenta la duración de la batería.
  • Aumenta el tiempo en la página al mejorar la experiencia del usuario
  • Proporciona un aura estética.

Así que sí, estas son básicamente las razones por las que el modo oscuro es una gran opción para tu sitio de WordPress.

Modo oscuro de WordPress sin complemento: ¿es posible?

Ahora viene la parte divertida. Aquí veremos cómo puede apagar las luces de su sitio de WordPress sin instalar ningún complemento.

Hay dos maneras de hacer esto -

  1. Agregar modo oscuro usando HTML, CSS y JQuery
  2. Uso de temas listos para usar con el modo oscuro habilitado

Echemos un vistazo a estos dos métodos en detalle a continuación.

1) Agregue el modo oscuro usando HTML, CSS y JQuery

Si es un desarrollador de temas, debería preferir este método manual para incluir un modo oscuro en su sitio de WordPress. En este método, debe pasar por un poco de codificación relacionada con HTML, CSS y JQuery.

No se preocupe si la codificación le resulta difícil, ya que puede obtener fragmentos de código fácilmente disponibles aquí. Entonces puede simplemente copiarlos y pegarlos en el lugar apropiado para habilitar el modo oscuro.

No dude en utilizar estos fragmentos, ya que son de código abierto y de uso gratuito.

  • Agregue el fragmento de código HTML

Primero, agregue el fragmento de HTML para crear un botón de alternar el modo oscuro. Todo lo que necesita hacer es copiar y pegar el siguiente fragmento en el encabezado o pie de página de su tema.

<div class=”wpnm-button”>

<div class=”wpnm-button-inner-left”></div>

<div class=”wpnm-button-inner”></div>

</div>

  • Estilo con CSS

Ahora debe diseñar su botón o conmutador de modo oscuro con el siguiente fragmento de CSS.

/* Conmutador de modo oscuro */

.wpnm-botón {

tamaño de fuente: 16px

}

.wpnm-button-inner-left:vacío {

margen izquierdo: -0.625em

}

.wpnm-button-inner-left:antes, .wpnm-button-inner-left:después {

tamaño de caja: caja de borde;

margen: 0;

relleno: 0;

/*transición*/

-webkit-transition: 0,4 s de entrada y salida;

-moz-transición: 0,4 s facilidad de entrada y salida;

-o-transición: 0,4 s facilidad de entrada y salida;

transición: 0,4 s de entrada y salida;

contorno: ninguno

}

.wpnm-button .wpnm-button-inner, .wpnm-button .wpnm-button-inner-left {

pantalla: bloque en línea;

tamaño de fuente: 0.875em;

posición: relativa;

relleno: 0em;

altura de línea: 1em;

cursor: puntero;

color: rgba (149, 149, 149, 0,51);

peso de fuente: normal

}

.wpnm-button .wpnm-button-inner-left:before {

contenido: ";

bloqueo de pantalla;

posición: absoluta;

índice z: 1;

altura de línea: 2.125em;

sangría de texto: 2,5 em;

altura: 1em;

ancho: 1em;

margen: 0,25em;

/*borde-radio*/

-webkit-border-radio: 100%;

-moz-border-radius: 100%;

borde-radio: 100%;

derecha: 1.625em;

inferior: 0em;

fondo: #FFB200;

transformar: rotar (-45 grados);

caja-sombra: 0 0 0.625em blanco

}

.wpnm-button .wpnm-button-inner-left:después de {

contenido: "";

pantalla: bloque en línea;

ancho: 2,5 em;

altura: 1,5 em;

-webkit-border-radio: 1em;

-moz-border-radio: 1em;

borde-radio: 1em;

fondo: rgba(255, 255, 255, 0.15);

alineación vertical: medio;

margen: 0 0.625em;

borde: 0.125em sólido #FFB200

}

.wpnm-button.active .wpnm-button-inner-left:before {

derecha: 1.0625em;

sombra de cuadro: 0.3125em 0.3125em 0 0 #eee;

fondo: transparente

}

.wpnm-button.active .wpnm-button-inner-left:después de {

fondo: rgba(0, 0, 0, 0.15);

borde: 0.125em blanco sólido

}

.wpnm-button .wpnm-button-inner-left {

color: rgba (250, 250, 250, 0,51);

peso de fuente: negrita

}

.wpnm-button.active .wpnm-button-inner-left {

color: rgba (149, 149, 149, 0,51);

peso de fuente: normal

}

.wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {

color: rgba (250, 250, 250, 0,51);

peso de fuente: negrita

}

Este fragmento es de un complemento, y el crédito es para el autor del complemento, Marko Arula.

  • Agregue la clase CSS de modo oscuro a la etiqueta del cuerpo

Ahora debe agregar esta clase en particular a la etiqueta del cuerpo, ya que esto le permitirá personalizar el diseño más adelante.

Vamos a hacer eso.

jQuery(función($) {

/*Haga clic en el icono de modo oscuro. Agregue clases y contenedores de modo oscuro.

Almacenar la preferencia del usuario a través de sesiones*/

$('.wpnm-button').click(función() {

//Mostrar la luna o el sol

$('.botón wpnm').toggleClass('activo');

//Si se selecciona el modo oscuro

if ($('.wpnm-button').hasClass('active')) {

//Añadir clase de modo oscuro al cuerpo

$('cuerpo').addClass('modo oscuro');

//Guardar la preferencia del usuario en Storage

localStorage.setItem('modo oscuro', verdadero);

} más {

$('cuerpo').removeClass('modo oscuro');

localStorage.removeItem('modo oscuro');

}

})

//Comprobar almacenamiento. Mostrar preferencia del usuario

if (localStorage.getItem(“modooscuro”)) {

$('cuerpo').addClass('modo oscuro');

$('.wpnm-button').addClass('activo');

}

})

Ahora puede inspeccionar y probar si la clase CSS de "modo oscuro" se agrega como una clase de cuerpo. A continuación, agregue un fondo oscuro para ver si funciona bien.

cuerpo.modo-oscuro * {

fondo: #333;

}

Como lo estamos haciendo en el navegador o en el lado del cliente y el servidor no sabe nada, verá que el modo oscuro se carga después de cargar el modo claro. Aquí, el cuerpo se representa sin el modo oscuro en acción, y JS espera a que se cargue el DOM antes de agregar la clase.

Entonces no es una solución perfecta para los usuarios; debería haber una mejor manera de mejorar la experiencia. Averigüemos qué.

  • Usar cookies para almacenar las preferencias del usuario a través de las sesiones

Entonces, veamos cómo puede agregar la clase de cuerpo al servidor para que se cargue antes de servir. La mejor manera de hacerlo es utilizar cookies para almacenar las preferencias del usuario. De esta manera, debe crear una cookie para la preferencia de modo oscuro del usuario y agregar la clase de cuerpo de modo oscuro en consecuencia.

Habilitará la clase de cuerpo del modo oscuro a medida que se procesa el html. Por lo tanto, debe volver a escribir el código JS de la siguiente manera.

jQuery(función($) {

//Crear el objeto de la cookie

var almacenamiento de cookies = {

setCookie: function setCookie(clave, valor, hora, ruta) {

var expira = nueva fecha ();

expira.setTime(expires.getTime() + tiempo);

var rutaValor = ”;

if (tipo de ruta !== 'indefinido') {

rutaValor = 'ruta=' + ruta + ';';

}

documento.cookie = clave + '=' + valor + ';' + pathValue + 'expires=' + expires.toUTCString();

},

getCookie: función getCookie(clave) {

var keyValue = document.cookie.match('(^|;) ?' + clave + '=([^;]*)(;|$)');

devolver valor clave? valorclave[2]: nulo;

},

removeCookie: function removeCookie(clave) {

documento.cookie = clave + '=; Max-Edad=0; ruta=/';

}

};

//Haga clic en el icono de modo oscuro. Agregue clases y contenedores de modo oscuro. Almacenar la preferencia del usuario a través de sesiones

$('.wpnm-button').click(función() {

//Mostrar la luna o el sol

$('.botón wpnm').toggleClass('activo');

//Si se selecciona el modo oscuro

if ($('.wpnm-button').hasClass('active')) {

//Añadir clase de modo oscuro al cuerpo

$('cuerpo').addClass('modo oscuro');

cookieStorage.setCookie('yonkovNightMode', 'true', 2628000000, '/');

} más {

$('cuerpo').removeClass('modo oscuro');

establecerTiempo de espera (función () {

cookieStorage.removeCookie('yonkovNightMode');

}, 100);

}

})

//Comprobar almacenamiento. Mostrar preferencia del usuario

if (cookieStorage.getCookie('yonkovNightMode')) {

$('cuerpo').addClass('modo oscuro');

$('.wpnm-button').addClass('activo');

}

})

  • Agregar clase de modo oscuro a través del filtro de clase de cuerpo

Así que configuramos una cookie llamada "yonkovNightMode". Se activará cuando el usuario elija la opción de modo oscuro. Pero primero debe obtener esta cookie con PHP y luego agregarla a la clase de cuerpo.

Copie y pegue el siguiente fragmento en el archivo functions.php en su tema hijo.

<?php

/**

* Habilitar el modo de tema oscuro

* Bifurcado de https://wordpress.org/plugins/wp-night-mode/

*/

function yonkov_dark_mode($clases) {

$yonkov_night_mode = isset($_COOKIE['yonkovNightMode']) ? $_COOKIE['yonkovNightMode'] : ”;

//si la cookie está almacenada..

if ($yonkov_night_mode!== ”) {

// Agregar clase de cuerpo 'modo oscuro'

return array_merge($clases, array('modo oscuro'));

}

devolver $clases;

}

add_filter('clase_cuerpo', 'modo_oscuro_yonkov');

ya terminaste

Entonces, en realidad ha creado un prototipo completamente funcional de un diseño de modo oscuro. Los fragmentos se tomaron de los complementos de WordPress de código abierto. Entonces puede usarlo en cualquiera de sus sitios web de WordPress para agregar la opción de modo oscuro para una mejor experiencia de usuario.

2. Use temas de WordPress listos para usar que tengan la opción de modo oscuro

¿Qué tal si elige un tema de WordPress listo para usar que ya tiene instalado un botón de alternancia de modo oscuro? De esta manera, puede usar el modo oscuro en su sitio de WordPress sin usar un complemento. También lo ayudará a evitar la personalización, ya que la mayoría de los temas deben personalizarse con el complemento de modo nocturno o códigos CSS personalizados.

Entonces, ¿cuáles son algunos temas de WordPress que admiten el modo oscuro junto con el modo claro? Aquí, le traemos algunos temas populares de WordPress con un diseño de modo oscuro. Vamos a averiguar.

  • Twenty Twenty One: este es el tema predeterminado de WordPress que viene con un diseño de modo oscuro. De forma predeterminada, está deshabilitado y debe habilitarlo desde las Opciones de tema.
  • Estera: es un tema popular de WordPress para sitios de WooCommerce. Viene con un botón para alternar el modo oscuro que permite a los usuarios cambiar entre el modo claro y el oscuro.
  • HIghStarter: este tema ligero de WordPress es popular para los sitios de cartera. Tiene un interruptor de modo oscuro sin un complemento instalado por separado. Y eso permite al usuario alternar entre el modo claro y oscuro.
  • Mate: es un tema de WordPress bellamente diseñado que permite seleccionar entre el modo claro u oscuro directamente desde el encabezado del sitio.

Manual o complemento ¿Qué método usar para la activación del modo oscuro?

Ya hemos discutido cómo puede activar manualmente el modo oscuro en su sitio web de WP. Y sabemos que muchos de ustedes encontrarán que habilitar el modo oscuro es complicado, especialmente con la parte de codificación.

Así que te recomendamos que lo tomes como segunda opción. Porque cuando se trata de elegir entre métodos manuales o de complemento, preferimos optar por la opción de complemento, ya que puede agregar rápida y convenientemente un botón de alternancia de modo oscuro al sitio.

Hablando de un complemento perfecto, tenemos nuestro favorito para recomendar aquí: el complemento QS Dark Mode. Es un complemento que brinda un magnífico esquema oscuro a su sitio y le permite hacer frente a la tendencia de 'oscurecerse'.

Veamos por qué debería instalar un complemento de modo oscuro, particularmente el complemento de modo oscuro QS y no usar el método manual.

Complemento QS Dark Mode: la solución perfecta para el modo oscuro

Hay bastantes razones por las que QS Dark Mode Plugin puede ser una solución de modo oscuro perfecta para su sitio web. Algunos de estos incluyen:

  • Es gratis
  • Compatibilidad con CSS personalizado
  • Diferentes estilos de interruptores oscuros, incluidas diferentes animaciones y textos de CTA
  • Ofrece modo oscuro basado en el tiempo
  • Opción para optimizar la ubicación del botón
  • Amplia gama de esquemas de colores oscuros
  • Compatibilidad con tamaño de fuente e imagen basada en modo oscuro
  • Compatible con WooCommerce

Con respecto a la instalación del complemento, es como instalar cualquier otro complemento en su sitio de WordPress. Pero si todavía tiene problemas, podemos ayudarlo con algunas instrucciones aquí. Echemos un vistazo.

  • Descargue el complemento del modo QS y cargue los archivos en el directorio correspondiente, que generalmente es el directorio /wp-content/plugins/plugin-name
  • Para instalar el complemento directamente desde la pantalla de complementos de WordPress. Haga clic en Complementos> Agregar nuevo desde el panel de WP, luego busque el complemento en la barra de búsqueda y haga clic en instalar.
  • Active el complemento QS Dark Mode desde la pantalla 'Complementos'
  • Una vez activado, su modo oscuro debería estar habilitado.
  • Puede cambiar al modo oscuro haciendo clic en el interruptor en su pantalla
  • Haga clic en el interruptor de nuevo para activar el modo de luz
  • Para personalizar, puede verificar todas las configuraciones en la barra lateral de modo oscuro de WP Admin del complemento

¿Puedo usar el esquema de color cuando el modo oscuro está activo?

El modo oscuro busca reducir la cantidad de color blanco o luz azul que proviene de la pantalla. No significa que tengas que ponerte negro todo el tiempo. Todavía puede elegir entre esquemas de color incluso cuando el modo oscuro está activado, como lo que puede hacer con el complemento de modo oscuro QS.

Pero los colores se eligen de manera que el contenido se muestre en alto contraste con un primer plano claro y colores oscuros de fondo.

Conclusión

Entonces, ¿es posible agregar el modo oscuro al sitio web de WordPress sin un complemento? Pero a menos que usted mismo sea un desarrollador de temas o un codificador, no preferirá optar por este método manual para hacerlo.

En cambio, sería más inteligente y fácil agregar un complemento de modo oscuro. Hemos mencionado nuestro complemento favorito, el complemento QS Dark Mode, que puede considerar para hacer que su sitio sea más presentable y relajante.

Recuerde, oscurecerse no solo tiene que ver con la salud de sus ojos, sino también con el atractivo estético de su sitio web. Al hacerlo, puede agregar un aura a la experiencia visual general y al mismo tiempo mejorar la participación del usuario.

Astra Pro vs Elementor Pro - Comparación cabeza a cabeza