Modalità oscura di WordPress: come abilitarla sul tuo sito (Guida per principianti)

In questi giorni, gli utenti stanno iniziando a vedere una modalità oscura di WordPress come una necessità. Dopotutto, passare da un'interfaccia luminosa tende ad essere più facile per gli occhi. Tuttavia, potresti non sapere come aggiungere questa funzione al tuo sito.

Fortunatamente, il processo può essere molto semplice. Con l'aiuto del plug-in WP Dark Mode gratuito, puoi aggiungere una modalità oscura dedicata per i tuoi utenti front-end e i tuoi amministratori back-end.

In questo articolo, ti mostreremo come abilitare la modalità oscura sul frontend del tuo sito. Quindi, ti mostreremo come fare lo stesso sul back -end. Ecco un esempio di come può apparire la tua dashboard di back-end alla fine di questo tutorial:

Iniziamo!

Come abilitare la modalità oscura sul frontend del tuo sito

Iniziamo con la modifica del display per il tuo frontend. Per fornire un'opzione per la modalità oscura di WordPress ai tuoi utenti, segui questo metodo.

Passaggio 1: installa un plug-in in modalità oscura

Sfortunatamente, WordPress non offre una funzione integrata per abilitare la modalità oscura sul tuo sito. Tuttavia, ciò non significa che sia impossibile! Grazie alla vasta libreria di plugin, puoi trovare diversi strumenti per aiutarti.

Consigliamo WP Dark Mode. Questo plug-in intuitivo ti offre un sacco di opzioni: puoi modificare elementi come la tavolozza dei colori, il design dei pulsanti e le animazioni. È anche compatibile con la maggior parte dei migliori temi WordPress, il che significa che la maggior parte delle persone sarà in grado di usarlo.

Tuttavia, ci sono molte altre opzioni là fuori, quindi sentiti libero di sfogliarle se stai cercando una vestibilità migliore. Una volta deciso un plugin, installalo e attivalo prima di passare al passaggio successivo.

Passaggio 2: abilita la modalità oscura

Una volta installato il plugin, è il momento di attivare le funzionalità principali. Se stai utilizzando WP Dark Mode, inizia andando su WP Dark Mode → Impostazioni . Vedrai molte impostazioni diverse, ma per ora ci concentreremo sulle basi in Impostazioni generali :

Quindi, assicurati che l'interruttore Enable Frontend Darkmode sia in posizione on. Il plug-in ora mostrerà la versione più debole della tua interfaccia per impostazione predefinita.

Un'altra opzione da considerare è Abilita la modalità oscura con riconoscimento del sistema operativo . Se attivi questa opzione, agli utenti con le preferenze del dispositivo impostate sulla modalità oscura verrà automaticamente servita la modalità oscura del tuo sito, che può migliorare l'esperienza utente del tuo sito.

Una volta che sei soddisfatto delle tue scelte, vai avanti e fai clic su Salva impostazioni . Quindi, vai al passaggio successivo per alcune funzionalità più avanzate.

Passaggio 3: attivare l'interruttore a galleggiante

Successivamente, hai la possibilità di dare ai tuoi utenti un po' più di controllo sulle opzioni della modalità oscura di WordPress. Non tutti i tuoi utenti apprezzeranno la navigazione in modalità oscura. Inoltre, alcuni utenti potrebbero voler modificare le proprie preferenze a seconda dell'ora del giorno o di altre condizioni di navigazione.

Fortunatamente, puoi fornire loro un interruttore per fare esattamente questo. Ci sono due parti principali qui: attivare la funzione, quindi personalizzarla. Iniziamo con il primo andando su WP Dark Mode → Impostazioni → Cambia impostazioni :

Assicurati che l' interruttore Mostra interruttore mobile sia in posizione on. Quindi, salva le modifiche. È così semplice: i tuoi utenti ora avranno l'opzione sullo schermo per passare dalla modalità chiara a quella scura.

Puoi anche entrare negli elementi di stile qui. Ad esempio, valuta la possibilità di modificare il design del pulsante in Stile interruttore mobile .

Altre opzioni di personalizzazione includono l'aggiunta di animazioni o il posizionamento in una determinata parte dello schermo. Puoi sbloccare ancora più opzioni con la versione premium di questo plugin. Salva le modifiche apportate e vai al passaggio finale.

Passaggio 4: personalizza la tua modalità oscura

Il potenziale di personalizzazione non si esaurisce con il passaggio. Esistono altri modi per personalizzare la modalità oscura di WordPress. Diamo prima un'occhiata alla modifica della combinazione di colori.

Vai a WP Dark Mode → Impostazioni → Impostazioni colore :

Se non vuoi progettare la tua combinazione di colori, puoi anche attivare Vuoi usare le preimpostazioni di colore? per alcune opzioni predefinite:

La maggior parte delle opzioni qui richiederà una versione premium. Questo ti aiuterà a regolare qualsiasi cosa, dalla luminosità generale ai livelli di contrasto. Pertanto, potresti prendere in considerazione l'aggiornamento se la tua combinazione di colori è importante per te.

Come abilitare la modalità oscura nella dashboard di WordPress

I tuoi utenti frontend non sono gli unici che potrebbero trarre vantaggio da uno schermo più scuro. Puoi seguire questi passaggi per attivare l'opzione anche per la tua dashboard.

Passaggio 1: attiva la modalità oscura del back-end

Utilizzeremo lo stesso plug-in WP Dark Mode per questo metodo. Torna a WP Dark Mode → Impostazioni → Impostazioni generali . Tuttavia, questa volta assicurati che l'opzione Abilita Backend Darkmode sia attiva.

Simile a come funziona per i tuoi utenti, la tua dashboard passerà automaticamente alla modalità oscura. Avrai anche un pulsante nella barra degli strumenti in alto per passare da una modalità all'altra.

Come ci si potrebbe aspettare, questo avrà un impatto solo sui tuoi utenti back-end. Se non hai attivato la modalità oscura per il frontend, i tuoi visitatori vedranno il tuo sito normale.

Se non stai cercando altri capi di sartoria, puoi fermarti qui. Tuttavia, se desideri più modi per personalizzare l'interfaccia di amministrazione di WordPress, puoi continuare con il passaggio successivo.

Passaggio 2: cambia la combinazione di colori dell'amministratore

Dopo aver abilitato la modalità oscura, ti invitiamo a esplorare il back-end del tuo sito. Ad esempio, potresti scoprire che i colori predefiniti di WordPress non soddisfano le tue esigenze quando sono più deboli.

La buona notizia è che puoi facilmente modificare la combinazione di colori dell'amministratore in modo che corrisponda alle nuove impostazioni della modalità oscura. Non hai nemmeno bisogno di un plug-in aggiuntivo per questo passaggio: questa funzione è integrata nel sistema WordPress.

Per prima cosa, vai su Utenti → Profilo :

Da qui, puoi scegliere la combinazione di colori che desideri. Quando fai clic su uno, sarai in grado di vedere immediatamente le modifiche. Sentiti libero di passare da uno all'altro e fatti un'idea delle tue opzioni. Quando sei pronto, ricorda di fare clic su Aggiorna profilo in fondo alla pagina.

Inoltre, puoi anche applicare queste modifiche al profilo back-end di qualcun altro. Per iniziare, vai su Utenti → Tutti gli utenti questa volta. Quindi, trova l'utente che desideri modificare e fai clic su Modifica sotto il suo account:

Successivamente, verrai indirizzato a una schermata di modifica simile a prima. È quindi possibile modificare le combinazioni di colori dell'amministratore di altri utenti in modo che corrispondano meglio alle nuove opzioni della modalità oscura.

Passaggio 3: passa dalla modalità normale a quella oscura

Se sei come molte persone, probabilmente non vorrai attenerti sempre alla modalità normale o oscura. Fortunatamente, il processo di commutazione è semplice e intuitivo.

Diciamo che stai iniziando nella modalità luce predefinita. Vai nella parte superiore della barra degli strumenti di amministrazione. Qui vedrai un piccolo interruttore con due opzioni: Chiaro e Scuro :

Tutto quello che devi fare ora è cliccare sulla modalità a cui vuoi passare. Dopo averlo fatto, lo schermo dovrebbe assomigliare a questo:

Ricorda che le impostazioni della modalità oscura nella schermata di amministrazione non influiranno sui tuoi utenti. Pertanto, sentiti libero di passare da una combinazione di colori all'altra, se necessario: se hai seguito anche il primo metodo, i tuoi visitatori saranno in grado di fare lo stesso.

Conclusione

In questo articolo, ti abbiamo mostrato come abilitare e personalizzare la modalità oscura sul frontend del tuo sito in quattro passaggi. Ti abbiamo anche spiegato come fare lo stesso per te e per i tuoi amministratori sul back-end del tuo sito.

Se sei interessato ad altri modi per personalizzare la dashboard del back-end del tuo sito, puoi consultare le nostre guide su come personalizzare il back-end di WordPress e come modificare la barra degli strumenti di WordPress.

Hai domande sull'attivazione della modalità oscura per il tuo sito web? Fatecelo sapere nella sezione commenti qui sotto!