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