Modalità oscura di WordPress senza plug-in: è possibile?
Pubblicato: 2022-10-18Sommario
Informazioni sulla modalità oscura di WordPress senza plug-in
Probabilmente hai sovraccaricato i tuoi occhi trascorrendo molto tempo davanti allo schermo. Quindi è importante calmarli mentre usi i computer. Uno dei modi più efficaci per dare una pausa ai tuoi occhi è cambiare l'impostazione di visualizzazione dello schermo in modalità scura.
I proprietari di siti Web dovrebbero e possono aggiungere una modalità oscura ai loro siti Web per migliorare la loro esperienza visiva. Se stai utilizzando WordPress per il tuo sito, aggiungere la modalità oscura dovrebbe essere facile. Puoi farlo sia manualmente che installando un plugin.
Siamo d'accordo sul fatto che il plug-in sia la soluzione migliore per creare una versione oscura per il tuo sito Web WordPress. Ma abbiamo anche risposte per coloro che pensano che sia impossibile abilitare la modalità oscura di WordPress senza un plug-in! Sì, è possibile.
Qui parleremo dell'aggiunta di una modalità oscura con e senza l'utilizzo di un plug-in. E discuti anche quale eccelle dove. Più avanti nell'articolo, conoscerai anche uno dei nostri plugin preferiti chiamato QS Dark Mode.
Quindi resta sintonizzato!
Vantaggi dell'utilizzo della modalità oscura in WordPress
Perché dovresti usare la Dark Mode in WordPress? Ci sono delle buone ragioni dietro. Te ne rendi conto personalmente mentre navighi sul tuo PC di notte con gli occhi stanchi.
Essendo un proprietario di un sito web, puoi portare molti vantaggi agli utenti aggiungendo questa modalità al tuo sito web. E dovrebbe anche aggiungere valore alla tua attività.
C'è di più per i suoi vantaggi; scopriamone alcuni di seguito.
- Riduce notevolmente la luce bianca proveniente dallo schermo del computer
- Riduce l'affaticamento degli occhi
- Risparmia energia e aumenta la durata della batteria
- Aumenta il tempo sulla pagina migliorando l'esperienza dell'utente
- Fornisce un'aura estetica
Quindi sì, questi sono praticamente i motivi per cui la modalità oscura è un'ottima opzione per il tuo sito WordPress.
Modalità oscura di WordPress senza plug-in: è possibile?
Ora arriva la parte divertente. Qui vedremo come puoi spegnere le luci del tuo sito WordPress senza installare alcun plugin.
Ci sono due modi per farlo:
- Aggiunta della modalità oscura utilizzando HTML, CSS e JQuery
- Utilizzo di temi già pronti con la modalità oscura abilitata
Diamo un'occhiata a entrambi questi metodi in dettaglio di seguito.
1) Aggiungi la modalità oscura utilizzando HTML, CSS e JQuery
Se sei uno sviluppatore di temi, dovresti preferire questo metodo manuale per includere un interruttore in modalità oscura sul tuo sito WordPress. In questo metodo, è necessario eseguire un po' di codifica relativa a HTML, CSS e JQuery.
Non preoccuparti se trovi la codifica difficile perché qui puoi ottenere frammenti di codice prontamente disponibili. Quindi puoi semplicemente copiarli e incollarli nel posto appropriato per abilitare la modalità oscura.
Non esitare a utilizzare questi frammenti in quanto sono open source e gratuiti.
Aggiungi lo snippet di codice HTML
Innanzitutto, aggiungi lo snippet HTML per creare un pulsante di attivazione/disattivazione della modalità oscura. Tutto quello che devi fare è copiare e incollare il seguente snippet nell'intestazione o nel piè di pagina del tuo tema.
<classe div="pulsante wpnm">
<div class="wpnm-button-inner-left"></div>
<div class="wpnm-button-inner"></div>
</div>
Stile con CSS
Ora devi dare uno stile al tuo pulsante o selettore della modalità oscura con il seguente snippet CSS.
/* Commutatore modalità oscura */
Pulsante .wpnm {
dimensione del carattere: 16px
}
.wpnm-pulsante-interno-sinistra:vuoto {
margine sinistro: -0,625 em
}
.wpnm-pulsante-interno-sinistra:prima, .wpnm-pulsante-interno-sinistra:dopo {
formato scatola: bordo-scatola;
margine: 0;
imbottitura: 0;
/*transizione*/
-transizione webkit: 0,4 s di facilità in entrata e uscita;
-transizione moz: 0,4 s di facilità in entrata e uscita;
-o-transizione: 0,4 s di allentamento in entrata;
transizione: 0,4 secondi di allentamento;
contorno: nessuno
}
.wpnm-pulsante .wpnm-pulsante-interno, .wpnm-pulsante .wpnm-pulsante-interno-sinistra {
display: blocco in linea;
dimensione del carattere: 0,875 em;
posizione: relativa;
imbottitura: 0em;
altezza della linea: 1em;
cursore: puntatore;
colore: rgba(149, 149, 149, 0,51);
font-weight: normale
}
.wpnm-button .wpnm-button-inner-left:prima di {
contenuto: ";
blocco di visualizzazione;
posizione: assoluta;
indice z: 1;
altezza della linea: 2.125 em;
rientro del testo: 2,5 em;
altezza: 1 em;
larghezza: 1em;
margine: 0,25 em;
/*raggio-bordo*/
-webkit-raggio-bordo: 100%;
-moz-raggio-bordo: 100%;
raggio di confine: 100%;
a destra: 1.625em;
in basso: 0em;
sfondo: #FFB200;
trasformare: ruotare (-45 gradi);
box-shadow: 0 0 0.625em bianco
}
.wpnm-button .wpnm-button-inner-left:after {
contenuto: "";
display: blocco in linea;
larghezza: 2,5 em;
altezza: 1,5 em;
-webkit-border-radius: 1em;
-moz-raggio-bordo: 1em;
raggio di confine: 1em;
sfondo: rgba(255, 255, 255, 0,15);
vertical-align: medio;
margine: 0 0,625 em;
bordo: 0,125em solido #FFB200
}
.wpnm-button.active .wpnm-button-inner-left:prima di {
a destra: 1.0625em;
box-shadow: 0,3125em 0,3125em 0 0 #eee;
sfondo: trasparente
}
.wpnm-button.active .wpnm-button-inner-left:after {
sfondo: rgba(0, 0, 0, 0,15);
bordo: 0,125 em bianco solido
}
.wpnm-pulsante .wpnm-pulsante-interno-sinistra {
colore: rgba(250, 250, 250, 0,51);
font-weight: grassetto
}
.wpnm-button.active .wpnm-button-inner-left {
colore: rgba(149, 149, 149, 0,51);
font-weight: normale
}
.wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {
colore: rgba(250, 250, 250, 0,51);
font-weight: grassetto
}
Questo frammento proviene da un plug-in e il merito va all'autore del plug-in, Marko Arula.
Aggiungi la classe CSS in modalità oscura al tag corpo
Ora devi aggiungere questa particolare classe al tag body in quanto ciò ti consentirà di personalizzare il layout in un secondo momento.
Facciamolo.
jQuery(funzione($) {
/*Fai clic sull'icona della modalità oscura. Aggiungi classi e wrapper in modalità oscura.
Memorizza le preferenze dell'utente attraverso le sessioni*/
$('.wpnm-button').click(funzione() {
//Mostra la luna o il sole
$('.wpnm-button').toggleClass('active');
//Se è selezionata la modalità oscura
if ($('.wpnm-button').hasClass('active')) {
//Aggiungi la classe in modalità oscura al corpo
$('body').addClass('dark-mode');
//Salva le preferenze dell'utente in Archiviazione
localStorage.setItem('darkMode', true);
} altro {
$('body').removeClass('dark-mode');
localStorage.removeItem('darkMode');
}
})
//Controlla Archiviazione. Visualizza le preferenze dell'utente
if (localStorage.getItem(“darkMode”)) {
$('body').addClass('dark-mode');
$('.wpnm-button').addClass('active');
}
})
Ora puoi ispezionare e testare se la classe CSS "modalità oscura" viene aggiunta come classe body. Quindi, aggiungi uno sfondo scuro per vedere se funziona correttamente.
body.dark-mode * {
sfondo: #333;
}
Poiché lo stiamo facendo nel browser o sul lato client e il server non sa nulla, vedrai che la modalità oscura viene caricata dopo che la modalità luce è stata caricata. Qui il corpo viene visualizzato senza la modalità oscura in azione e JS attende il caricamento del DOM prima di aggiungere la classe.
Quindi non è una soluzione perfetta per gli utenti; ci dovrebbe essere un modo migliore per migliorare l'esperienza. Scopriamo cosa.
Usa i cookie per memorizzare le preferenze dell'utente attraverso le sessioni
Quindi vediamo come puoi aggiungere la classe body al server per caricarla prima di servire. Il modo migliore per farlo è utilizzare i cookie per memorizzare le preferenze dell'utente. In questo modo, devi creare un cookie per la preferenza della modalità oscura dell'utente e aggiungere di conseguenza la classe del corpo della modalità oscura.
Abiliterà la classe del corpo in modalità oscura durante il rendering dell'html. Quindi è necessario riscrivere il codice JS nel modo seguente.
jQuery(funzione($) {
//Crea l'oggetto cookie
var cookieStorage = {
setCookie: funzione setCookie(chiave, valore, ora, percorso) {
var scade = new Date();
scade.setTime(expires.getTime() + ora);
var valorepercorso = ”;
if (tipo di percorso !== 'non definito') {
valorepercorso = 'percorso=' + percorso + ';';
}
document.cookie = chiave + '=' + valore + ';' + pathValue + 'expires=' + scade.toUTCString();
},
getCookie: funzione getCookie(chiave) {
var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
restituire keyValue ? valorechiave[2] : nullo;
},
removeCookie: funzione removeCookie(chiave) {
documento.cookie = chiave + '=; Età massima=0; percorso=/';
}
};
//Fai clic sull'icona della modalità oscura. Aggiungi classi e wrapper in modalità oscura. Memorizza le preferenze dell'utente attraverso le sessioni
$('.wpnm-button').click(funzione() {
//Mostra la luna o il sole
$('.wpnm-button').toggleClass('active');
//Se è selezionata la modalità oscura
if ($('.wpnm-button').hasClass('active')) {
//Aggiungi la classe in modalità oscura al corpo
$('body').addClass('dark-mode');
cookieStorage.setCookie('yonkovNightMode', 'true', 2628000000, '/');
} altro {
$('body').removeClass('dark-mode');
setTimeout(funzione() {
cookieStorage.removeCookie('yonkovNightMode');
}, 100);
}
})
//Controlla Archiviazione. Visualizza le preferenze dell'utente
if (cookieStorage.getCookie('yonkovNightMode')) {
$('body').addClass('dark-mode');
$('.wpnm-button').addClass('active');
}
})
Aggiungi la classe in modalità oscura tramite il filtro della classe del corpo
Quindi abbiamo impostato un cookie chiamato "yonkovNightMode", verrà attivato quando l'utente sceglie l'opzione della modalità oscura. Ma devi prima ottenere questo cookie con PHP e poi aggiungerlo alla classe body.
Copia e incolla il seguente snippet nel file functions.php nel tuo tema figlio.
<?php
/**
* Abilita la modalità tema scuro
* Biforcato da https://wordpress.org/plugins/wp-night-mode/
*/
funzione yonkov_dark_mode($ classi) {
$yonkov_night_mode = isset($_COOKIE['yonkovNightMode']) ? $_COOKIE['yonkovNightMode'] : ”;
//se il cookie è memorizzato..
se ($yonkov_night_mode !== ”) {
// Aggiungi la classe del corpo 'modalità oscura'
return array_merge($classes, array('dark-mode'));
}
restituire $ classi;
}
add_filter('body_class', 'yonkov_dark_mode');
Hai finito
Quindi hai effettivamente creato un prototipo completamente funzionale di un layout in modalità oscura. Gli snippet sono stati presi dai plugin open source di WordPress. Quindi puoi usarlo su qualsiasi tuo sito Web WordPress per aggiungere l'opzione della modalità oscura per una migliore esperienza utente.
2. Usa temi WordPress già pronti con l'opzione Dark Mode
Che ne dici di scegliere un tema WordPress già pronto che abbia già installato un pulsante di attivazione/disattivazione della modalità oscura. In questo modo, puoi utilizzare la modalità oscura nel tuo sito WordPress senza utilizzare un plug-in. Ti aiuterà anche a evitare la personalizzazione poiché la maggior parte dei temi deve essere personalizzata con il plug-in Modalità notturna o codici CSS personalizzati.
Quindi quali sono alcuni temi WordPress che supportano la modalità oscura insieme alla modalità luce? Qui, ti abbiamo portato alcuni temi WordPress popolari con un layout in modalità oscura. Scopriamolo.
- Twenty Twenty One: questo è il tema WordPress predefinito che viene fornito con un layout in modalità oscura. Per impostazione predefinita, è disabilitato e devi abilitarlo dalle Opzioni del tema.
- Estera: è un popolare tema WordPress per i siti WooCommerce. Viene fornito con un pulsante di commutazione della modalità oscura che consente agli utenti di passare dalla modalità chiara a quella oscura.
- HighStarter: questo tema WordPress leggero è popolare per i siti portfolio. Ha un interruttore della modalità oscura senza un plug-in installato separatamente. E ciò consente all'utente di passare dalla modalità chiara a quella scura.
- Mate: è un tema WordPress dal design accattivante che consente di selezionare tra la modalità chiara o scura direttamente dall'intestazione del sito.
Manuale o plug-in Quale metodo utilizzare per l'attivazione della modalità oscura?
Abbiamo già discusso di come attivare manualmente la modalità oscura sul tuo sito Web WP. E sappiamo che molti di voi troveranno che abilitare la modalità oscura è una seccatura, specialmente con la parte di codifica.
Quindi ti consigliamo di prenderlo come seconda opzione. Perché quando si tratta di scegliere tra metodi manuali o plug-in, preferiamo scegliere l'opzione plug-in in quanto può aggiungere rapidamente e comodamente un pulsante di attivazione/disattivazione della modalità oscura al sito.
Parlando di un plug-in perfetto, abbiamo il nostro preferito da consigliare qui: il plug-in QS Dark Mode. È un plug-in che porta uno splendido schema oscuro sul tuo sito e ti consente di far fronte alla tendenza del "diventare oscuro".
Diamo un'occhiata al motivo per cui dovresti installare un plug-in in modalità oscura, in particolare il plug-in QS in modalità oscura e non utilizzare il metodo manuale.
Plugin per la modalità oscura QS: la soluzione perfetta per la modalità oscura
Ci sono diversi motivi per cui QS Dark Mode Plugin può essere una soluzione perfetta per la modalità oscura per il tuo sito web. Alcuni di questi includono:
- È gratis
- Supporto CSS personalizzato
- Diversi stili di switch scuri, incluse diverse animazioni e testi CTA
- Offre la modalità oscura basata sul tempo
- Opzione per ottimizzare la posizione del pulsante
- Ampia gamma di combinazioni di colori scuri
- Supporto per la dimensione dell'immagine e del carattere basata sulla modalità scura
- WooCommerce supportato
Per quanto riguarda l'installazione del plugin, è come installare qualsiasi altro plugin sul tuo sito WordPress. Ma se sei ancora in una soluzione, possiamo aiutarti con alcune istruzioni qui. Diamo un'occhiata.
- Scarica il plug-in QS Mode e carica i file nella directory interessata, che generalmente è la directory /wp-content/plugins/plugin-name
- Per installare il plugin direttamente dalla schermata dei plugin di WordPress. Fai clic su Plugin > Aggiungi nuovo dalla dashboard di WP, quindi cerca il plug-in nella barra di ricerca e fai clic su Installa.
- Attiva il plug-in QS Dark Mode dalla schermata "Plugin".
- Una volta attivata, la tua modalità oscura dovrebbe essere abilitata.
- Puoi passare alla modalità oscura facendo clic sull'interruttore sullo schermo
- Fare nuovamente clic sull'interruttore per attivare la modalità luce
- Per personalizzare, puoi controllare tutte le impostazioni nella barra laterale WP Admin Dark Mode del plugin
Posso usare la combinazione di colori quando la modalità scura è attiva?
La modalità scura cerca di ridurre la quantità di colore bianco o luce blu proveniente dallo schermo. Non significa che devi diventare nero tutto il tempo. Puoi comunque scegliere tra le combinazioni di colori anche quando è attivata la modalità oscura, come puoi fare con QS Dark Mode Plugin.
Ma i colori sono scelti in modo tale che il contenuto venga visualizzato in contrasto elevato con i colori chiari in primo piano e scuri bg.
Conclusione
Quindi è possibile aggiungere la modalità oscura al sito Web di WordPress senza un plug-in. Ma a meno che tu non sia uno sviluppatore di temi o un programmatore, non preferirai utilizzare questo metodo manuale per farlo.
Invece, sarebbe più saggio e più facile aggiungere un plug-in in modalità oscura. Abbiamo menzionato il nostro plug-in preferito, il plug-in QS Dark Mode, che puoi considerare per rendere il tuo sito più presentabile e rilassante per gli occhi.
Ricorda, l'oscurità non riguarda solo la salute dei tuoi occhi, ma anche l'aspetto estetico del tuo sito web. In questo modo, puoi aggiungere un'aura all'esperienza visiva complessiva migliorando anche il coinvolgimento degli utenti.
Astra Pro vs Elementor Pro – Confronto testa a testa