Cum să activați modul de noapte în WordPress

De ceva timp, sistemele de operare și aplicațiile includ versiuni ale interfețelor lor grafice în care fundalurile albe sunt înlocuite cu fundaluri negre pentru a reduce emisia de lumină în timpul orelor de noapte și, astfel, vă deteriorați mai puțin ochii. Acesta este cunoscut sub numele de modul de noapte .

Fie după modă, fie pentru că funcționează cu adevărat, modul de noapte este din ce în ce mai popular. Există cei care se asigură că modurile de noapte au beneficii pentru mediu, deoarece ecranele negre consumă mai puțină energie decât cele albe. Dar există și detractori ai acestui tip de moduri întunecate.

Oricum ar fi, aceasta poate fi o funcționalitate pe care te interesează să o ai și pe site-ul tău, iar pentru asta astăzi vom vorbi despre modul de noapte din WordPress.

WordPress nu include încă un mod de noapte în mod implicit, dar există opțiuni pentru a adăuga modul de noapte atât pe tabloul de bord WordPress, cât și pe front-end. Ca de obicei, pluginurile sunt soluția pentru a extinde WordPress cu această funcționalitate vizuală curioasă.

Cum să activați modul de noapte pe tabloul de bord WordPress

Începem cu pluginul Dark Mode pentru WordPress, care vă permite să activați modul de noapte pe WordPress Dashboard. Este ușor de utilizat și gratuit.

Primul lucru este să instalați și să activați pluginul. Îl putem găsi direct în WordPress Plugin Directory, direct în tabloul de bord WordPress prin meniul Plugins , așa cum puteți vedea în captura de ecran de mai sus.

Odată ce pluginul Dark Mode este instalat, fiecare utilizator al WordPress-ului tău va avea pe profilul său opțiunea de a-l activa pe tabloul de bord:

Lucrul bun la acest plugin este că fiecare utilizator alege modul în care vrea să vadă WordPress Dashboard, în modul întunecat sau în modul normal. În acest fel, dacă există cineva care dorește să folosească în continuare WordPress Dashboard ca întotdeauna, cu fundal alb, atunci nu este nicio problemă în a face acest lucru.

În captura de ecran anterioară, puteți vedea rezultatul activării modului întunecat. Și arată grozav! Mi-a plăcut foarte mult rezultatul de a avea culoarea de fundal neagră și în partea centrală a paginii și nu doar în meniul lateral.

Din păcate, există o problemă în așteptare pentru pluginul WordPress Dark Mode: să ofere compatibilitate cu editorul de blocuri Gutenberg. În următoarea captură de ecran puteți vedea că nu este încă capabil să aplice fundalul întunecat lui Gutenberg:

Bănuiesc că dacă pluginul are suficient succes și utilizatorii îl vor cere, dezvoltatorii săi vor ajunge să-l adapteze astfel încât editorul de blocuri să apară și în modul de noapte. În orice caz, ritmul frenetic de dezvoltare al lui Gutenberg și actualizările sale „frecvente” în stilurile sale fac adaptarea oarecum complexă.

Cum să activați modul de noapte pentru vizitatorii dvs. WordPress

Pluginul Dark Mode adaugă doar modul de noapte pe tabloul de bord WordPress. Restul site-ului dvs., adică interfața pe care o văd vizitatorii, va continua să arate la fel, fără a suferi modificări.

Dacă doriți ca vizitatorii dvs. să aibă opțiunea de a activa modul de noapte pe site-ul dvs., folosind fundaluri întunecate în loc de fundaluri deschise, trebuie să instalați pluginul WP Night Mode.

Acest plugin, precum Dark Mode, este complet gratuit și îl aveți, de asemenea, disponibil în Directorul de pluginuri WordPress.

Odată instalat, nu veți vedea nimic în Setări sau în orice meniu suplimentar. Ceea ce trebuie să faci este să mergi în meniul Aspect și acolo să-ți editezi meniurile. În meniul principal, trebuie să adăugați un link personalizat fără nicio adresă URL anume. Acest nou element de meniu ne va ajuta să adăugăm comutatorul pentru a activa și dezactiva modul de noapte.

În interfața de gestionare a meniului, trebuie să deschideți opțiunile de ecran pe care le veți găsi în colțul din dreapta sus pentru a activa opțiunea de a adăuga clase CSS, așa cum vedeți în următoarea captură de ecran:

După ce ați făcut acest lucru, când veți edita elementul de meniu pe care l-am adăugat înainte, veți vedea un câmp suplimentar în care puteți adăuga clase CSS. Aici trebuie să includeți clasa CSS wp-night-mode . Această clasă este cea de care WP Night Mode are nevoie pentru a identifica ce element ar trebui utilizat ca comutator pentru modul de noapte.

În mod implicit, WP Night Mode este un plugin care nu adaugă culori închise la interfața dvs. Tu trebuie să fii cel care alege culorile închise pe care vrei să le arăți atât pentru fundal, cât și pentru text și pentru link-uri. Pentru a defini aceste culori trebuie să mergeți la meniul Aspect și acolo să deschideți meniul Personalizare .

Personalizatorul WordPress se va deschide și acolo veți găsi opțiunea Night Mode . Dacă îl selectezi, vei vedea că ai opțiunile de a activa modul de noapte în mod implicit și de a crea mai multe stiluri. În fiecare stil definiți culoarea de fundal, culoarea textului și culoarea linkurilor.

Lucrul bun despre personalizare este că puteți vedea o previzualizare reală a modului în care va arăta site-ul dvs. web cu culorile alese:

Din păcate, rezultatul nu este perfect: unele elemente au încă fundaluri deschise care arată ciudat în modul de noapte. Dar nu vă faceți griji, putem rezolva asta. Din personalizarea în sine, puteți adăuga reguli CSS suplimentare pentru a remedia aceste mici probleme.

Reveniți în personalizare și veți vedea opțiunea CSS suplimentară . Dacă îl selectați, aveți posibilitatea de a scrie reguli CSS chiar acolo. Aceste reguli pot fi de următorul tip:

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

Rețineți că ceea ce face cu adevărat pluginul este să aplice clasa CSS wp-night-mode-on în eticheta body a site-ului dvs. Prin urmare, dacă doriți să remediați fundalul unui element HTML și să îl întunecați, tot ce trebuie să faceți este să găsiți un selector pentru acel element și să aplicați remedierea atunci când eticheta body are clasa wp-night-mode-on .

În următoarea comparație puteți vedea o comparație de bază între modul normal și modul de noapte cu culorile pe care le-am aplicat:

Adăugarea modului de noapte la WordPress este foarte ușoară datorită câtorva plugin-uri. Astăzi am trecut în revistă pluginurile care ne ajută să activăm modul de noapte pe tabloul de bord WordPress și în frontend.

Sunteți un utilizator obișnuit al modurilor de noapte din aplicațiile dvs.? Nu uitați să comentați mai jos cu părerea dvs.!

Imagine prezentată de Priscilla Du Preez pe Unsplash.