Come aggiungere la modalità oscura al tuo sito Web WordPress con questi 4 semplici passaggi

Pubblicato: 2022-06-16

Quando Instagram e un paio di altri importanti siti Web e app hanno aggiunto la modalità oscura nell'ottobre 2019, abbiamo assistito a un forte aumento dell'interesse delle persone per questa funzione.

How to Add Dark Mode to Your WordPress Website with These 4 Simple Steps

Tuttavia, anche se abbiamo escluso il valore anomalo dell'adozione da parte di Instagram della modalità oscura, nota anche come notte , il grafico sopra indica chiaramente la crescita della popolarità della funzionalità negli ultimi anni.

Insieme a Instagram, molte altre grandi aziende sono passate all'era della modalità notturna e dovresti considerare di passare anche tu. Non solo perché è di tendenza, ma per i suoi numerosi vantaggi per i tuoi utenti, inclusi, a titolo esemplificativo ma non esaustivo, la riduzione dell'affaticamento degli occhi per i tuoi utenti, una maggiore durata della batteria per i dispositivi utilizzati per visitare il tuo sito e il fatto che sembra molto più fresco.

OK, l'ultimo potrebbe essere un po' soggettivo, ma ci atteniamo.

Per fortuna, aggiungere una modalità oscura al tuo sito Web WordPress è piuttosto semplice. Non solo puoi impostare il modo in cui il tuo sito Web viene visualizzato a ciascun utente, ma puoi anche aggiungere la funzione alla dashboard dell'amministratore e dare una pausa ai tuoi occhi.

Se stai pensando di aggiungere una modalità oscura al tuo sito, ci sono alcuni modi per farlo, ma usare un plugin è di gran lunga il più semplice, come puoi immaginare.

In questo post, introdurremo un plug-in consigliato dalla maggior parte delle società di progettazione di siti Web di Los Angeles, WP Dark Mode, e rivedremo tutti i passaggi necessari per aggiungere e personalizzare questa funzionalità in modo che si adatti al tuo sito Web e al tema WordPress.

Ma prima, diamo un'occhiata a cos'è la modalità oscura e ai suoi vantaggi più notevoli. Continuare a leggere!

Che cos'è la modalità oscura e perché è utile?

Conosciuta anche come modalità notturna, la modalità oscura è un semplice interruttore di visualizzazione che cambia la combinazione di colori di un sito Web da chiaro a scuro.

Su un tipico sito Web con lettere nere su sfondo bianco, di solito sembra che i colori siano stati semplicemente invertiti, ma, come spiegheremo di seguito, c'è qualcosa in più.

Questa semplice modifica riduce significativamente la luce bianca che esce dallo schermo, riducendo l'affaticamento degli occhi, soprattutto se un utente visita il sito Web di sera.

L'opzione per abilitare la modalità oscura è disponibile sulla maggior parte dei moderni sistemi operativi e browser web.

I vantaggi più notevoli della modalità oscura

Abbiamo già menzionato alcuni dei vantaggi di questa funzione in questo post, ma abbiamo pensato di delinearli tutti qui in un bell'elenco puntato per tua comodità.

Quindi, i vantaggi della modalità oscura includono quanto segue:

  • Meno affaticamento degli occhi
  • Consumo energetico ridotto e maggiore durata della batteria
  • Meno luce bianca dagli schermi
  • Più tempo speso sulla tua pagina

Come già sai, i browser e i sistemi operativi moderni offrono già la modalità oscura come opzione, ma se desideri che il tuo sito Web venga visualizzato con la giusta combinazione di colori per gli utenti che lo preferiscono, dovrai aggiungerlo da solo.

Per fortuna, l'installazione del plug-in WP Dark Mode può semplificare questo processo, oltre a darti tutti i tipi di controllo sull'aspetto della modalità oscura del tuo sito web.

Modalità oscura contro modalità notturna

Prima di andare avanti, vorremmo affrontare un potenziale problema con cui i lettori attenti potrebbero avere un problema. Vale a dire, abbiamo utilizzato e continueremo a utilizzare i termini "modalità oscura" e "modalità notturna" in modo intercambiabile in tutto questo articolo, sebbene possano tecnicamente descrivere due diverse funzionalità.

Il termine "modalità notturna" viene spesso utilizzato per una funzione disponibile sulla maggior parte degli smartphone moderni, che rimuove completamente o parzialmente la luce blu dallo schermo al calar della notte per ridurre l'impatto del tempo trascorso sullo schermo sul ciclo del sonno.

Tuttavia, come abbiamo spiegato in precedenza, i due termini possono essere usati in modo intercambiabile, che è l'approccio che abbiamo scelto di adottare in questo post.

Ora che l'abbiamo tolto di mezzo, diamo un'occhiata a come puoi aggiungere la modalità oscura (o notturna) ai tuoi siti Web WordPress.

​Come aggiungere la modalità oscura al tuo sito Web WordPress utilizzando il plug-in WP Dark Mode

Ora che conosci tutti i motivi per cui potresti voler aggiungere la modalità oscura al tuo sito WordPress, ti mostreremo come farlo attraverso quattro semplici passaggi.

I nostri amici di una società di web design di Miami ci hanno aiutato a creare questa guida passo passo che si basa su un plugin specializzato chiamato WP Dark Mode.

1. Installa il plug-in

Sebbene esistano diversi plug-in WordPress in modalità oscura, abbiamo riscontrato che WP Dark Mode è la più intuitiva e affidabile.

È un plug-in che ti consente di creare una versione oscura del tuo sito in modo rapido e semplice, senza dover gestire impostazioni o codice complicati.

Come puoi aspettarti, la directory dei plug-in di WordPress è dove potrai trovare questo strumento.

Partiamo dal presupposto che tu abbia già aggiunto plug-in al tuo sito, ma per ogni evenienza, tutto ciò che devi fare è accedere alla dashboard di amministrazione e selezionare Aggiungi nuovo dalla scheda Plugin .

Da lì, puoi trovare WP Dark Mode e fare clic su Installa ora e Attiva .

2. Attivare le impostazioni desiderate

Puoi attivare e disattivare la modalità oscura nella scheda Impostazioni generali . Una volta aperta questa scheda, vedrai che due opzioni sono già attive per impostazione predefinita.

Questi sono Abilita modalità oscura frontend e Abilita modalità oscura compatibile con il sistema operativo .

Il primo abilita la modalità oscura sul tuo sito Web, mentre il secondo significa che la funzione verrà attivata automaticamente se il sistema operativo o il browser dell'utente è impostato su Modalità oscura.

Un'altra opzione è impostare la modalità oscura come predefinita . Questo è abbastanza autoesplicativo: se lo attivi, tutti gli utenti vedranno la versione oscura del tuo sito Web indipendentemente dalle loro preferenze.

3. Attivare e personalizzare l'interruttore mobile

Se desideri offrire agli utenti la possibilità di passare dalla modalità scura a quella chiara in qualsiasi momento, puoi abilitare anche l' opzione Mostra interruttore mobile .

Questa opzione farà esattamente quello che dice sulla scatola: posiziona un interruttore sul front-end del tuo sito, consentendo agli utenti di attivare o disattivare la modalità oscura a loro piacimento.

Puoi scherzare con il posizionamento e lo stile dell'icona nella sezione Impostazioni di visualizzazione. Le tue opzioni in termini di stile sono alquanto limitate nella versione gratuita del plugin, ma la funzionalità chiave (attivazione o disattivazione della modalità oscura) è presente.

4. Sperimenta con diverse combinazioni di colori in modalità scura

A questo punto, il tuo sito Web WordPress ha una modalità oscura completamente funzionante e, se è tutto ciò che stavi cercando, puoi saltare questo passaggio.

Tuttavia, se non desideri che il tuo sito appaia generico, ti consigliamo vivamente di personalizzare i colori della modalità scura. Troverai tutte le opzioni di cui hai bisogno nella sezione Impostazioni di stile .

Questa schermata offre una tavolozza di colori che potrebbero funzionare con l'identità visiva del tuo sito.

Come puoi immaginare, la versione gratuita del plug-in WP Dark Mode offre opzioni piuttosto limitate qui, ma dovresti essere in grado di trovare una soluzione adatta.

Se desideri personalizzare ulteriormente i colori, la versione premium offre una gamma più ampia di tavolozze di colori preimpostate e ti consente di creare la tua combinazione.

Bonus: abilitazione della modalità oscura sul dashboard di amministrazione di WordPress

Se hai intenzione di offrire ai tuoi clienti potenziali e potenziali tutti i vantaggi di una modalità oscura sul front-end del tuo sito Web WordPress, perché non estendere la stessa cortesia a te stesso e aggiungere la modalità anche alla dashboard dell'amministratore?

Se la combinazione di colori predefinita di WordPress è troppo brillante per i tuoi gusti, il plug-in WP Dark Mode ha la soluzione. Ecco come farlo:

  1. Installa il plug-in WP Dark Mode : non c'è molto da spiegare qui. Guarda la sezione sopra per le istruzioni su come completare questo passaggio.
  2. Abilita Backend Dark Mode: questa opzione si trova nella stessa scheda delle altre impostazioni essenziali di cui abbiamo parlato prima ( Impostazioni generali ). Dovrai accedere a questa sezione e attivare un interruttore intitolato Abilita Backend Darkmode. Non dimenticare di scorrere verso il basso e fare clic su Salva impostazioni per applicare la modifica.
  3. Attiva/disattiva la modalità oscura sulla dashboard di amministrazione: la dashboard di amministrazione ora avrà un interruttore nella parte superiore, che ti consentirà di attivare la modalità oscura. Ciò è particolarmente utile per i siti Web con più amministratori, poiché ogni persona può attivare o disattivare la modalità oscura in modo indipendente.
  4. (Facoltativo) Regola la combinazione di colori della dashboard di amministrazione : con la modalità oscura attivata, potresti voler cambiare alcuni colori per rendere tutto più carino. Per fare ciò, vai su Utenti > Profilo e seleziona la tavolozza che preferisci. Una volta impostati i colori, fare clic su Aggiorna profilo per applicare le nuove impostazioni.

E questo è tutto ciò che c'è da fare. Ci auguriamo che questa guida ti abbia aiutato a implementare la modalità oscura sul tuo sito WordPress e sulla dashboard di amministrazione.

Questo aggiornamento è quasi troppo semplice per essere ignorato con il plug-in WP Dark Mode, quindi ti invitiamo ad aggiungere questa eccellente funzionalità al tuo sito.

Biografia dell'autore: Christopher è uno specialista di marketing digitale presso Digital Strategy One e un blogger freelance. È concentrato sulle nuove tendenze della tecnologia web e sulla distribuzione della voce digitale su diversi canali. Nel tempo libero, Christopher suona la batteria e Magic: the Gathering.