Se avete intenzione di aggiungere un’opzione di modalità scura al vostro sito WordPress, questo post spiegherà tutto ciò che vi serve sapere.
Innanzitutto, parleremo di alcuni dei vantaggi che la modalità scura può apportare al vostro sito, tra cui migliorarne l’accessibilità, creare un’esperienza più sana per i visitatori, ridurre il consumo energetico e, in generale, soddisfare alcune preferenze degli utenti.
Poi vedremo esattamente come aggiungere la modalità scura a WordPress utilizzando plugin senza codice o soluzioni personalizzate.
Alla fine del post, saprete perché e come impostare la modalità scura di WordPress. Cominciamo!
Cos’è la modalità scura di WordPress?
La modalità scura di WordPress consiste nel dare ai visitatori del vostro sito web la possibilità di scegliere tra un tema in stile “chiaro” e uno in stile “scuro”.
Probabilmente conoscete già questo concetto grazie al sistema operativo del vostro computer o del vostro smartphone. La maggior parte dei sistemi operativi permette di scegliere tra modalità chiare e scure per l’interfaccia, e alcuni permettono anche di passare automaticamente dalla modalità chiara a quella scura in base all’ora del giorno.
L’idea di base è la stessa per la modalità scura di WordPress. I visitatori possono utilizzare un pulsante o un altro elemento dell’interfaccia per passare facilmente dalla modalità chiara a quella scura. Il contenuto sarà esattamente lo stesso in entrambi i casi: l’unica differenza è la combinazione di colori.
Ecco un esempio del nostro sito WordPress di prova nella sua modalità “chiara” predefinita:
Poi, ecco lo stesso sito in modalità “scura”:
Il nostro sito di prova sceglierà automaticamente quale versione visualizzare in base alle preferenze del sistema operativo di ciascun visitatore. Inoltre, gli utenti possono anche regolare manualmente la loro esperienza utilizzando il widget nell’angolo in basso a destra.
Perché offrire la modalità scura su WordPress?
Ci sono molti motivi per cui vale la pena prendere in considerazione la possibilità di offrire la modalità scura su un sito web. Si va dalle semplici preferenze degli utenti al rendere il sito più accessibile e creare un’esperienza più sana per i visitatori.
Vediamo quali sono.
La modalità scura rende un sito web più accessibile
Un grande vantaggio dell’offerta della modalità scura è che può contribuire a rendere il sito web più accessibile.
A volte abbreviato in a11y, con il termine accessibilità ci si riferisce alla pratica di rendere un sito web utilizzabile dal maggior numero di persone possibile, comprese le persone con disabilità.
Un esempio di accessibilità è garantire che le persone che navigano sul vostro sito con lettori di schermo assistiti possano comunque avere una buona esperienza.
Oltre a essere una buona cosa in generale per rendere più facile a tutti la fruizione del vostro sito web, l’accessibilità è anche un requisito legale in molte giurisdizioni. Ad esempio, esiste l’Americans With Disabilities Act (ADA) e l’European Accessibility Act.
Sebbene l’offerta della modalità scura non rientri direttamente nelle linee guida per l’accessibilità dei contenuti web (WCAG), può comunque migliorare l’accessibilità in altri modi.
Ecco alcune aree importanti in cui la modalità scura può migliorare l’accessibilità:
- Miglioramento del contrasto dei contenuti testuali. La modalità scura di solito presenta un contrasto molto forte tra i colori dello sfondo e quelli del testo. Questo può facilitare la lettura e la fruizione dei contenuti da parte delle persone con problemi di vista. L’alto contrasto fa parte delle WCAG, quindi offrire la modalità scura può aiutarvi indirettamente a rispettare le WCAG.
- Facilità di comprensione per alcuni visitatori. I visitatori che soffrono di dislessia o di altri disturbi dell’elaborazione visiva possono avere difficoltà a interpretare il testo nero su sfondo bianco, quindi la modalità scura può creare un’esperienza migliore per questi visitatori. Questo problema è chiamato sindrome della sensibilità scotopica o sindrome di Irlen.
- Meno problemi per chi soffre di emicrania. Alle persone che soffrono di emicrania viene spesso consigliato di evitare le luci forti. Creando un’esperienza scura, e quindi “buia”, questi visitatori potranno godersi il vostro sito web riducendo al minimo il rischio di aggravare le loro emicranie.
Detto questo, la modalità scura non è l’opzione migliore per l’accessibilità in ogni singola situazione. Ad esempio, le persone che soffrono di astigmatismo possono avere difficoltà a leggere un testo chiaro su uno sfondo scuro perché può causare un effetto sfocato chiamato “alone”. Questo è uno dei motivi per cui può essere utile dare agli utenti la possibilità di scegliere tra la modalità chiara e quella scura.
La modalità scura può essere più salutare per i visitatori
Offrire la modalità scura a un sito web può contribuire a creare un’esperienza più sana per i visitatori in un paio di modi diversi.
Innanzitutto, la modalità scura può aiutare i visitatori a migliorare l’igiene del sonno, soprattutto se navigano in prossimità dell’ora di andare a letto. Gli esperti del sonno raccomandano di evitare le luci forti nelle ore che precedono il sonno.
Più il vostro sito è chiaro e luminoso, peggio è per l’igiene del sonno dei vostri visitatori. Offrendo la modalità scura, permetterete ai vostri visitatori di interagire con il vostro sito WordPress con un impatto minimo sul loro ciclo circadiano.
Molte implementazioni della modalità scura possono anche attivarla automaticamente in base alle preferenze del sistema operativo di ciascun visitatore. Se un visitatore configura il proprio sistema operativo in modo che passi automaticamente alla modalità scura in prossimità dell’ora di andare a dormire, il vostro sito web può seguire questo programma.
La modalità scura può anche essere più confortevole per gli occhi dei visitatori e causare un minore affaticamento visivo. Ad esempio, in uno studio della University of Central Florida (UCF), gli autori hanno scoperto che “l’affaticamento visivo dei partecipanti era significativamente inferiore con la modalità scura rispetto alla modalità chiara”.
Inoltre, i partecipanti avevano un’acutezza visiva maggiore in modalità scura e hanno completato i test dello studio “con un numero significativamente inferiore di errori nella modalità scura rispetto alla modalità chiara”.
La modalità scura può consumare meno energia
Anche se non si tratta di un vantaggio per tutti i visitatori, un altro piccolo vantaggio dell’offerta della modalità scura è che consuma meno energia sugli schermi OLED. Poiché gli schermi OLED sono in grado di spegnere i singoli pixel anziché illuminare l’intero schermo, gli schermi OLED richiedono meno energia per visualizzare i pixel di colore scuro.
L’esatto risparmio energetico dipenderà dalle impostazioni di luminosità dello schermo dell’utente, ma può variare da un modesto 3%-9% a bassa luminosità a un ben più consistente 39%-47% quando la luminosità dello schermo dell’utente è più alta.
Questi dati provengono da uno studio della Purdue University che ha analizzato il consumo energetico dello schermo a diversi livelli di luminosità.
Alcune persone preferiscono la modalità scura
Al di là dei vantaggi specifici di cui sopra, vale la pena notare che alcuni visitatori potrebbero voler utilizzare la modalità scura anche solo come preferenza personale.
Questa preferenza potrebbe essere il risultato di alcuni dei vantaggi elencati, oppure qualcuno potrebbe preferire la modalità scura per motivi esclusivamente personali.
Offrendo la modalità scura come opzione, potete creare un’esperienza d’uso migliore per questi visitatori.
4 modi per implementare la modalità scura su WordPress
Se l’idea di aggiungere la modalità scura a WordPress vi ha convinto, potete farlo in diversi modi.
Di seguito vedremo quattro diverse opzioni:
1. Usare un plugin per la modalità scura di WordPress
Se non volese lavorare sul codice, uno dei modi più semplici per aggiungere la modalità scura al vostro sito web è utilizzare un plugin per la modalità scura di WordPress.
Ciò che rende la maggior parte di questi plugin così facili da utilizzare è che sono essenzialmente plug-and-play. Potete far funzionare la modalità scura in pochi minuti e poi aggiustare le cose se necessario.
Ad esempio, ecco come funziona una delle opzioni più popolari: il plugin WP Dark Mode gratuito di WordPress.org.
Dopo aver attivato il plugin, avrete immediatamente una modalità scura funzionante sul vostro sito web. In effetti, è lo stesso plugin che abbiamo utilizzato per gli screenshot di esempio qui sopra.
Sceglierà automaticamente la versione da utilizzare in base alle preferenze del sistema operativo di ogni visitatore. Gli utenti possono poi passare manualmente da una modalità all’altra utilizzando un widget fluttuante nell’angolo in basso a destra.
Se volete regolare il funzionamento della modalità scura, potete accedere alle impostazioni del plugin. Lì potrete modificare gli stili, selezionare l’esperienza predefinita e molto altro ancora.
Se preferite seguire la strada dei plugin, ecco alcuni plugin gratuiti per la modalità scura tra i più diffusi da prendere in considerazione:
Poiché questi plugin possono avere un grande effetto sul sito frontend, consigliamo di testarli prima di attivarli sul proprio sito web.
Se vi siete affidati all’hosting WordPress gestito di Kinsta, potete utilizzare la funzionalità di staging di Kinsta per testare facilmente questi plugin su una versione sandbox sicura del vostro sito.
2. Scegliere un tema che supporti già la modalità scura
Un altro modo per accedere alla modalità scura senza l’uso di codice è quello di scegliere un tema WordPress con la funzionalità di modalità scura integrata.
Ad esempio, il tema gratuito Kanso di Rich Tabor include la funzionalità di modalità scura integrata, che potete vedere in azione sul sito personale di Rich.
Se avete già realizzato il vostro sito con un altro tema, probabilmente non vale la pena cambiare tema solo per accedere alla modalità scura. Tuttavia, se state ancora lavorando alla costruzione del vostro sito e la modalità scura è importante per voi, potrebbe valere la pena inserirla nella lista delle caratteristiche da considerare per scegliere un tema WordPress.
3. Usare una libreria JavaScript per la modalità scura
Se non avete problemi a lavorare sul codice, esistono anche librerie JavaScript predefinite che potete utilizzare per aggiungere la modalità scura al vostro sito web.
Oppure, se siete developer WordPress, potete usare queste librerie per aggiungere facilmente la modalità scura a un plugin o a un tema che state sviluppando. Infatti, alcuni dei plugin per la modalità scura di WordPress.org sono costruiti sulla base di queste librerie.
Esistono diverse librerie per la modalità scura, ma qui elenchiamo due delle opzioni più popolari:
- darkmode.js
- drkmd.js
Se volete utilizzare una di queste librerie, vi consigliamo di testarle su un sito di staging prima di aggiungere il codice al vostro sito web live. Anche in questo caso, se il vostro sito WordPress è ospitato da Kinsta, potete utilizzare la funzione di staging integrata di Kinsta.
darkmode.js
Darkmode.js utilizza VanillajS e CSS mix-blend-mode per aggiungere la modalità scura senza alcuna configurazione aggiuntiva. Per impostazione predefinita, aggiunge uno switcher fluttuante che i visitatori possono utilizzare per passare dalla modalità scura a quella chiara, ma potete disabilitare questo widget se preferite creare la vostra soluzione personale.
Alla prima visita di un utente, sceglierà la modalità in base alle preferenze del suo sistema operativo; inoltre, supporta la memorizzazione locale in modo che le preferenze dei visitatori vengano salvate per le visite future. potete vederne un’anteprima in azione sulla pagina darkmode.js linkata sopra.
Poiché utilizza mix-blend-mode invece di richiedere l’aggiunta di regole CSS personalizzate, è praticamente plug-and-play.
drkmd.js
Drkmd.js utilizza un approccio leggermente diverso. Invece di utilizzare il CSS mix-blend-mode per creare automaticamente una modalità scura del vostro sito, permette di specificare il CSS che volete utilizzare per la modalità scura. Potete quindi aggiungere queste regole di stile al vostro sito utilizzando le classi theme-light e theme-dark.
Inoltre, permette di aggiungere facilmente un toggle per passare da una modalità all’altra. Per farlo, aggiungete l’attributo data-drkmd-attach al tag script.
Include anche altre utili funzioni, come la possibilità di rilevare automaticamente le preferenze del sistema operativo degli utenti e di salvare le scelte degli utenti nella memoria locale.
4. Usare il proprio codice
Oltre all’utilizzo di una libreria JavaScript, esistono altre soluzioni basate sul codice che potete implementare per aggiungere la modalità scura al vostro sito.
In genere, queste soluzioni funzionano applicando un insieme di regole CSS per la modalità chiara e un altro insieme di regole per la modalità scura.
Un’opzione potrebbe essere quella di utilizzare jQuery, come descritto in questo tutorial. In sostanza, aggiungerete regole CSS sia per la modalità chiara che per quella scura.
Poi, potete aggiungere un pulsante o un qualche tipo di interruttore per attivare la modalità scura. Se l’utente attiva tale interruttore, potete utilizzare JavaScript per cambiare le classi CSS da utilizzare. Il tutorial linkato qui sopra lo realizza con jQuery e i metodi hasClass(), addClass() e removeClass().
Se volete, potete anche renderlo più complesso. Ad esempio, in questo tutorial basato su JavaScript, si spiega come aggiungere due miglioramenti principali alla modalità scura del vostro sito:
- Rilevazione automatica delle modalità preferite dagli utenti in base alle loro preferenze di sistema.
- Memorizzazione delle scelte degli utenti e caricamento automatico della modalità corretta quando tornano sul vostro sito.
In generale, probabilmente è più semplice utilizzare una delle librerie JavaScript per la modalità scura descritte sopra. Ma se non volete farlo, questi metodi offrono un’altra alternativa basata sul codice.
Come attivare la modalità scura della bacheca di WordPress
Finora ci siamo concentrati su come aggiungere la modalità scura al vostro sito WordPress frontend. Tuttavia, potreste anche voler aggiungere la modalità scura alla bacheca di WordPress in modo da poter gestire il vostro sito con un’interfaccia più semplice.
Dopo tutto, perché i visitatori del vostro sito dovrebbero essere gli unici a poter usufruire dei vantaggi di cui abbiamo parlato sopra?
Se volete aggiungere la modalità scura alla vostra dashboard di WordPress, l’opzione più semplice è quella di utilizzare un plugin. Esistono due categorie principali di plugin:
- Plugin che mantengono la stessa interfaccia di amministrazione, ma cambiano solo gli stili per abilitare la modalità scura.
- Plugin che creano un’interfaccia personalizzata per la dashboard e offrono anche la modalità scura.
Se volete mantenere esattamente la stessa dashboard di WordPress ma aggiungere un’opzione di modalità scura, potete prendere in considerazione il plugin Dark Mode for WP Dashboard, che si presenta come nella schermata qui sotto.
Alcuni dei plugin per la modalità scura del frontend sopra citati offrono anche funzioni per attivare la modalità scura nella dashboard di WordPress, come il plugin WP Dark Mode.
Se volete provare un’esperienza completamente nuova della dashboard con un’opzione di modalità scura, potete prendere in considerazione questi plugin:
Riepilogo
L’aggiunta della modalità scura come opzione sul proprio sito web può migliorarne l’accessibilità, offrire un’esperienza più sana ai visitatori, ridurre il consumo di energia su alcuni schermi e, in generale, soddisfare le preferenze personali di alcuni utenti.
Se volete aggiungere la modalità scura a WordPress, esistono molte opzioni. Per le soluzioni “senza codice”, potete utilizzare un plugin per la modalità scura o un tema con modalità scura integrata. Per opzioni un po’ più tecniche, potete utilizzare una libreria JavaScript per la modalità scura o creare una soluzione personalizzata.
Poiché l’aggiunta della modalità scura avrà un grande effetto sull’aspetto del frontend del vostro sito, dovrete assicurarvi di testarla accuratamente prima di aggiungerla al vostro sito WordPress.
Con l’hosting WordPress gestito di Kinsta, potete testare in tutta sicurezza la modalità scura utilizzando la funzione di staging integrata di Kinsta e poi applicare le modifiche una volta sicuri che tutto funzioni correttamente.
Lascia un commento