Modul întunecat WordPress fără plugin - Este posibil?
Publicat: 2022-10-18Cuprins
Despre modul întunecat WordPress fără plugin
Probabil că ți-ai suprasolicitat ochii petrecând mult timp în fața ecranului. Prin urmare, este important să-i liniștiți în timp ce utilizați computerele. Una dintre cele mai eficiente moduri de a oferi ochilor tăi o pauză este schimbarea setării de afișare a ecranului în modul întunecat.
Proprietarii de site-uri web ar trebui și pot adăuga un mod întunecat site-urilor lor pentru a-și îmbunătăți experiența vizuală. Dacă utilizați WordPress pentru site-ul dvs., adăugarea modului întunecat ar trebui să fie ușor. O puteți face atât manual, cât și instalând un plugin.
Suntem de acord că pluginul este cea mai bună soluție pentru a crea o versiune întunecată pentru site-ul dvs. WordPress. Dar avem și răspunsuri pentru cei care cred că este imposibil să activezi modul întunecat WordPress fără un plugin! Da, e posibil.
Aici, vom vorbi despre adăugarea unui mod întunecat cu și fără utilizarea unui plugin. Și, de asemenea, discutați care dintre ele excelează unde. Mai târziu în articol, veți cunoaște și unul dintre pluginurile noastre preferate numite QS Dark Mode.
Așa că rămâneți pe fază!
Beneficiile utilizării modului întunecat în WordPress
De ce ar trebui să utilizați modul întunecat în WordPress? Există câteva motive întemeiate în spatele ei. Îți dai seama personal de necesitatea acestuia în timp ce navighezi pe computer noaptea cu ochii obosiți.
Fiind proprietarul unui site web, puteți aduce multe beneficii utilizatorilor prin adăugarea acestui mod pe site-ul dvs. Și ar trebui, de asemenea, să adauge valoare afacerii tale.
Beneficiile sale sunt mai multe; haideți să aflăm câteva dintre acestea mai jos.
- Minimizează semnificativ lumina albă care vine de pe ecranul computerului
- Reduce oboseala ochilor
- Economisește energie și crește durata de viață a bateriei
- Mărește timpul pe pagină prin îmbunătățirea experienței utilizatorului
- Oferă o aură estetică
Deci, da, acestea sunt destul de multe motive pentru care Dark Mode este o opțiune excelentă pentru site-ul dvs. WordPress.
Modul întunecat WordPress fără plugin - Este posibil?
Acum vine partea distractivă. Aici vom vedea cum puteți stinge luminile pentru site-ul dvs. WordPress fără a instala niciun plugin.
Există două moduri prin care poți face asta -
- Adăugarea modului întunecat utilizând HTML, CSS și JQuery
- Folosind teme gata făcute cu modul întunecat activat
Să aruncăm o privire la ambele metode în detaliu mai jos.
1) Adăugați modul întunecat utilizând HTML, CSS și JQuery
Dacă sunteți un dezvoltator de teme, ar trebui să preferați ca această metodă manuală să includă o comutare în modul întunecat pe site-ul dvs. WordPress. În această metodă, trebuie să treceți printr-un pic de codificare legat de HTML, CSS și JQuery.
Nu vă faceți griji dacă codarea vă este dificilă, deoarece puteți obține fragmente de cod disponibile aici. Deci, puteți doar să le copiați și să le lipiți în locul potrivit pentru a activa modul întunecat.
Nu ezitați să utilizați aceste fragmente, deoarece sunt open source și sunt gratuite.
Adăugați fragmentul de cod HTML
Mai întâi, adăugați fragmentul HTML pentru a crea un buton de comutare în modul întunecat. Tot ce trebuie să faceți este să copiați și să lipiți următorul fragment în antetul sau subsolul temei.
<div class="wpnm-button">
<div class="wpnm-button-inner-left"></div>
<div class="wpnm-button-inner”></div>
</div>
Stil cu CSS
Acum trebuie să stilați butonul sau comutatorul de mod întunecat cu următorul fragment CSS.
/* Comutator mod întunecat */
.wpnm-button {
dimensiunea fontului: 16px
}
.wpnm-button-inner-left:empty {
marja-stânga: -0,625em
}
.wpnm-button-inner-left:înainte, .wpnm-button-inner-left:după {
dimensionare cutie: chenar-cutie;
marja: 0;
umplutură: 0;
/*tranziție*/
-webkit-tranziție: 0.4s ease-in-out;
-moz-tranziție: 0.4s ease-in-out;
-o-tranziție: 0.4s ease-in-out;
tranziție: 0.4s ease-in-out;
contur: niciunul
}
.wpnm-button .wpnm-button-interior, .wpnm-button .wpnm-button-inner-left {
display: inline-block;
dimensiunea fontului: 0.875em;
poziție: relativă;
umplutură: 0em;
înălțimea liniei: 1em;
cursor: pointer;
culoare: rgba(149, 149, 149, 0,51);
greutate font: normal
}
.wpnm-button .wpnm-button-inner-left:înainte de {
continut: ”;
afisare: bloc;
poziție: absolută;
indicele z: 1;
înălțimea liniei: 2.125em;
text-indent: 2,5 em;
inaltime: 1em;
latime: 1em;
marja: 0,25em;
/*raza-chenar*/
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
chenar-rază: 100%;
dreapta: 1.625em;
jos: 0em;
fundal: #FFB200;
transformare: rotire(-45deg);
box-shadow: 0 0 0.625em alb
}
.wpnm-button .wpnm-button-inner-left:după {
conținut: „”;
display: inline-block;
latime: 2.5em;
inaltime: 1.5em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
chenar-raza: 1em;
fundal: rgba(255, 255, 255, 0,15);
vertical-align: mijloc;
marja: 0 0,625em;
chenar: 0,125em solid #FFB200
}
.wpnm-button.active .wpnm-button-inner-left:inainte de {
dreapta: 1,0625em;
box-shadow: 0,3125em 0,3125em 0 0 #eee;
fundal: transparent
}
.wpnm-button.active .wpnm-button-inner-left:după {
fundal: rgba(0, 0, 0, 0,15);
chenar: 0,125em alb solid
}
.wpnm-button .wpnm-button-inner-left {
culoare: rgba(250, 250, 250, 0,51);
greutate font: bold
}
.wpnm-button.active .wpnm-button-inner-left {
culoare: rgba(149, 149, 149, 0,51);
greutate font: normal
}
.wpnm-button.activ .wpnm-button-interior-stânga + .wpnm-button-inner {
culoare: rgba(250, 250, 250, 0,51);
greutate font: bold
}
Acest fragment este de la un plugin, iar meritul revine autorului pluginului, Marko Arula.
Adăugați clasa CSS în mod întunecat la eticheta Body
Acum trebuie să adăugați această clasă specială la eticheta body, deoarece aceasta vă va permite să personalizați aspectul mai târziu.
Hai să facem asta.
jQuery(funcție($) {
/*Clic pe pictograma modului întunecat. Adăugați clase și wrapper-uri în modul întunecat.
Stocați preferințele utilizatorului prin sesiuni*/
$('.wpnm-button').click(function() {
//Arată fie luna, fie soarele
$('.wpnm-button').toggleClass('activ');
//Dacă este selectat modul întunecat
dacă ($('.wpnm-button').hasClass('activ')) {
//Adăugați clasa modului întunecat în corp
$('body').addClass('dark-mode');
//Salvați preferința utilizatorului în Stocare
localStorage.setItem('darkMode', true);
} altfel {
$('body').removeClass('dark-mode');
localStorage.removeItem('darkMode');
}
})
//Verificați stocarea. Afișează preferințele utilizatorului
dacă (localStorage.getItem(„darkMode”)) {
$('body').addClass('dark-mode');
$('.wpnm-button').addClass('activ');
}
})
Acum puteți inspecta și testa dacă clasa CSS „mod întunecat” este adăugată ca clasă de corp. Apoi, adăugați un fundal întunecat pentru a vedea dacă funcționează bine.
body.dark-mode * {
fundal: #333;
}
Deoarece o facem în browser sau pe partea clientului și serverul nu știe nimic, veți vedea că modul întunecat este încărcat după ce este încărcat modul light. Aici corpul este redat fără modul întunecat în acțiune, iar JS așteaptă ca DOM-ul să se încarce înainte de a adăuga clasa.
Deci nu este o soluție perfectă pentru utilizatori; ar trebui să existe o modalitate mai bună de a îmbunătăți experiența. Să aflăm ce.
Utilizați module cookie pentru a stoca preferințele utilizatorului prin sesiuni
Deci, haideți să vedem cum puteți adăuga clasa body la server pentru a o face să se încarce înainte de servire. Cel mai bun mod de a face acest lucru este să utilizați cookie-uri pentru a stoca preferințele utilizatorului. În acest fel, trebuie să creați un cookie pentru preferința utilizatorului pentru modul întunecat și să adăugați clasa de corp în mod întunecat în consecință.
Va activa clasa de corp în modul întunecat pe măsură ce se redă html. Deci, trebuie să rescrieți codul JS în felul următor.
jQuery(funcție($) {
//Creează obiectul cookie
var cookieStorage = {
setCookie: funcția setCookie(cheie, valoare, timp, cale) {
var expires = new Date();
expires.setTime(expires.getTime() + oră);
var pathValue = ”;
if (tip de cale !== 'nedefinit') {
pathValue = 'cale=' + cale + ';';
}
document.cookie = cheie + '=' + valoare + ';' + pathValue + 'expires=' + expires.toUTCString();
},
getCookie: function getCookie(key) {
var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
return keyValue ? keyValue[2] : nul;
},
removeCookie: function removeCookie(key) {
document.cookie = cheie + '=; Max-Vârsta=0; cale=/';
}
};
//Clic pe pictograma modului întunecat. Adăugați clase și wrapper-uri în modul întunecat. Stocați preferințele utilizatorului prin sesiuni
$('.wpnm-button').click(function() {
//Arată fie luna, fie soarele
$('.wpnm-button').toggleClass('activ');
//Dacă este selectat modul întunecat
dacă ($('.wpnm-button').hasClass('activ')) {
//Adăugați clasa modului întunecat în corp
$('body').addClass('dark-mode');
cookieStorage.setCookie('yonkovNightMode', 'true', 2628000000, '/');
} altfel {
$('body').removeClass('dark-mode');
setTimeout(funcție() {
cookieStorage.removeCookie('yonkovNightMode');
}, 100);
}
})
//Verificați stocarea. Afișează preferințele utilizatorului
dacă (cookieStorage.getCookie('yonkovNightMode')) {
$('body').addClass('dark-mode');
$('.wpnm-button').addClass('activ');
}
})
Adăugați clasa de mod întunecat prin filtrul de clasă corporală
Așa că am configurat un cookie numit „yonkovNightMode”, acesta va fi activat când utilizatorul alege opțiunea modului întunecat. Dar mai întâi trebuie să obțineți acest cookie cu PHP și apoi să îl adăugați la clasa body.
Copiați și inserați următorul fragment în fișierul functions.php din tema copilului.
<?php
/**
* Activați modul temă întunecată
* Bifurcat de la https://wordpress.org/plugins/wp-night-mode/
*/
function yonkov_dark_mode($classes) {
$yonkov_night_mode = isset($_COOKIE['yonkovNightMode']) ? $_COOKIE['yonkovNightMode'] : ”;
//dacă cookie-ul este stocat..
if ($yonkov_night_mode !== ”) {
// Adăugați clasa de corp „mod întunecat”.
return array_merge($clase, array('dark-mode'));
}
returnează $clase;
}
add_filter('body_class', 'yonkov_dark_mode');
Ai terminat
Deci, ați creat de fapt un prototip complet funcțional al unui aspect în mod întunecat. Fragmentele au fost preluate din pluginurile WordPress open-source. Așa că îl puteți folosi pe oricare dintre site-urile dvs. WordPress pentru a adăuga opțiunea modului întunecat pentru o experiență mai bună a utilizatorului.
2. Utilizați teme WordPress gata făcute cu opțiunea Dark Mode
Ce zici să alegi o temă WordPress gata făcută care are deja instalat un buton de comutare în modul întunecat. În acest fel, puteți utiliza modul întunecat pe site-ul dvs. WordPress fără a utiliza un plugin. De asemenea, vă va ajuta să evitați personalizarea, deoarece majoritatea temelor trebuie personalizate cu pluginul Night Mode sau codurile CSS personalizate.
Deci, care sunt unele teme WordPress care acceptă modul întunecat împreună cu modul luminos? Aici, v-am adus câteva teme populare WordPress cu un aspect în mod întunecat. Să aflăm.
- Twenty Twenty One: Aceasta este tema WordPress implicită care vine cu un aspect în mod întunecat. În mod implicit, este dezactivat și trebuie să îl activați din Opțiunile temei.
- Estera: Este o temă WordPress populară pentru site-urile WooCommerce. Vine cu un buton de comutare a modului întunecat care permite utilizatorilor să comute între modul deschis și cel întunecat.
- HIghStarter: Această temă WordPress ușoară este populară pentru site-urile din portofoliu. Are un comutator de mod întunecat fără un plugin instalat separat. Și asta permite utilizatorului să comute între modul de lumină și întuneric.
- Mate: Este o temă WordPress frumos proiectată, care permite selectarea între modul deschis sau întunecat direct din antetul site-ului.
Manual sau plugin Ce metodă să utilizați pentru activarea în modul întunecat?
Am discutat deja despre cum puteți activa manual modul întunecat pe site-ul dvs. WP. Și știm că mulți dintre voi veți găsi că permiterea modului întunecat să fie o problemă, în special cu partea de codare.
Așa că vă recomandăm să o luați ca a doua opțiune. Pentru că atunci când vine vorba de alegerea între metodele manuale sau plugin, preferăm să optăm pentru opțiunea de plugin, deoarece poate adăuga rapid și convenabil un buton de comutare în modul întunecat pe site.
Vorbind despre un plugin perfect, îl avem pe cel preferat de recomandat aici: pluginul QS Dark Mode. Este un plugin care aduce o schemă întunecată superbă site-ului dvs. și vă permite să faceți față tendinței „întuneric”.
Să vedem de ce ar trebui să instalați un plugin pentru modul întunecat - în special pluginul pentru modul întunecat QS și să nu mergeți cu metoda manuală.
Plugin QS Dark Mode: Soluția perfectă pentru modul întunecat
Există destul de multe motive pentru care pluginul QS Dark Mode poate fi o soluție perfectă pentru modul întunecat pentru site-ul dvs. Unele dintre acestea includ:
- Este gratis
- Suport CSS personalizat
- Diferite stiluri de comutare întunecată, inclusiv diferite animații și texte CTA
- Oferă modul întunecat bazat pe timp
- Opțiune de optimizare a locației butonului
- Gamă largă de scheme de culori închise
- Suport pentru imagine și dimensiunea fontului bazat pe modul întunecat
- Compatibil cu WooCommerce
În ceea ce privește instalarea pluginului, este la fel ca și instalarea oricărui alt plugin pe site-ul tău WordPress. Dar dacă încă sunteți într-o remediere, vă putem ajuta cu câteva instrucțiuni aici. Să verificăm.
- Descărcați pluginul QS Mode și încărcați fișierele în directorul în cauză, care este în general directorul /wp-content/plugins/plugin-name
- Pentru a instala pluginul direct din ecranul de pluginuri WordPress. Faceți clic pe Plugins > Add New din tabloul de bord WP, apoi căutați pluginul în bara de căutare și faceți clic pe Instalare.
- Activați pluginul QS Dark Mode din ecranul „Plugins”.
- Odată activat, modul întunecat ar trebui să fie activat.
- Puteți trece la modul întunecat făcând clic pe comutatorul de pe ecran
- Faceți clic din nou pe comutator pentru a activa modul de lumină
- Pentru a personaliza, puteți verifica toate setările din bara laterală WP Admin Dark Mode a pluginului
Pot folosi schema de culori când modul întunecat este activ?
Modul întunecat pare să reducă cantitatea de culoare albă sau de lumină albastră care vine de pe ecran. Nu înseamnă că trebuie să devii negru tot timpul. Puteți alege în continuare între scheme de culori chiar și atunci când modul întunecat este activat, cum ar fi ceea ce puteți face cu pluginul QS Dark Mode.
Dar culorile sunt alese astfel încât conținutul să fie afișat în contrast ridicat cu culorile deschise în prim-plan și întunecate.
Concluzie
Deci, este posibil să adăugați modul întunecat pe site-ul WordPress fără un plugin. Dar dacă nu sunteți un dezvoltator de teme sau un programator, nu veți prefera să optați pentru această metodă manuală de a face asta.
În schimb, ar fi mai înțelept și mai ușor să adăugați un plugin pentru modul întunecat. Am menționat pluginul nostru preferat, pluginul QS Dark Mode, pe care îl puteți lua în considerare pentru a vă face site-ul mai prezentabil și mai liniștitor.
Amintiți-vă, întunecarea nu se referă doar la sănătatea ochilor, ci și la aspectul estetic al site-ului dvs. Procedând astfel, puteți adăuga o aură experienței vizuale generale, îmbunătățind și implicarea utilizatorilor.
Astra Pro vs Elementor Pro - Comparație cap la cap