Tryb ciemny WordPress bez wtyczki – czy to możliwe?

Opublikowany: 2022-10-18

Spis treści

Informacje o trybie ciemnym WordPress bez wtyczki

Prawdopodobnie przeciążasz oczy, spędzając dużo czasu przed ekranem. Dlatego ważne jest, aby je uspokoić podczas korzystania z komputerów. Jednym z najskuteczniejszych sposobów na wytchnienie oczu jest zmiana ustawienia wyświetlania ekranu na tryb ciemny.

Właściciele witryn powinni i mogą dodać do swoich witryn tryb ciemny, aby poprawić wrażenia wizualne. Jeśli używasz WordPressa w swojej witrynie, dodanie trybu ciemnego powinno być łatwe. Możesz to zrobić zarówno ręcznie, jak i instalując wtyczkę.

Zgadzamy się, że wtyczka jest najlepszym rozwiązaniem do stworzenia ciemnej wersji witryny WordPress. Ale mamy też odpowiedzi dla tych, którzy uważają, że nie da się włączyć trybu ciemnego WordPress bez wtyczki! Tak, to możliwe.

Tutaj porozmawiamy o dodaniu trybu ciemnego z użyciem wtyczki i bez niej. A także przedyskutuj, który z nich jest najlepszy, gdzie. W dalszej części artykułu poznasz również jedną z naszych ulubionych wtyczek o nazwie QS Dark Mode.

Bądźcie na bieżąco!

Korzyści z używania trybu ciemnego w WordPress

Dlaczego powinieneś używać trybu ciemnego w WordPressie? Jest za tym kilka dobrych powodów. Osobiście zdajesz sobie z tego sprawę, przeglądając komputer w nocy ze zmęczonymi oczami.

Będąc właścicielem witryny, możesz przynieść użytkownikom wiele korzyści, dodając ten tryb do swojej witryny. Powinno to również zwiększyć wartość Twojej firmy.

Jest więcej zalet; poznajmy niektóre z nich poniżej.

  • Znacznie minimalizuje białe światło pochodzące z ekranu komputera
  • Zmniejsza zmęczenie oczu
  • Oszczędza energię i wydłuża żywotność baterii
  • Wydłuża czas spędzony na stronie, poprawiając wrażenia użytkownika
  • Zapewnia estetyczną aurę

Tak, to są powody, dla których tryb ciemny jest świetną opcją dla Twojej witryny WordPress.

Tryb ciemny WordPress bez wtyczki – czy to możliwe?

Teraz zaczyna się zabawa. Tutaj zobaczymy, jak możesz wyłączyć oświetlenie swojej witryny WordPress bez instalowania żadnej wtyczki.

Możesz to zrobić na dwa sposoby —

  1. Dodawanie trybu ciemnego za pomocą HTML, CSS i JQuery
  2. Korzystanie z gotowych motywów z włączonym trybem ciemnym

Przyjrzyjmy się szczegółowo obu tym metodom poniżej.

1) Dodaj tryb ciemny za pomocą HTML, CSS i JQuery

Jeśli jesteś programistą motywów, powinieneś preferować tę ręczną metodę, aby włączyć przełącznik trybu ciemnego do swojej witryny WordPress. W tej metodzie musisz przejść przez trochę kodowania związanego z HTML, CSS i JQuery.

Nie martw się, jeśli kodowanie jest dla Ciebie trudne, ponieważ możesz tutaj uzyskać łatwo dostępne fragmenty kodu. Możesz więc po prostu skopiować i wkleić je w odpowiednie miejsce, aby włączyć tryb ciemny.

Nie wahaj się używać tych fragmentów, ponieważ są one otwarte i bezpłatne.

  • Dodaj fragment kodu HTML

Najpierw dodaj fragment kodu HTML, aby utworzyć przycisk przełączania trybu ciemnego. Wszystko, co musisz zrobić, to skopiować i wkleić następujący fragment kodu w nagłówku lub stopce motywu.

<div class=”przycisk-wpnm”>

<div class=”wpnm-button-inner-left”></div>

<div class=”wpnm-button-inner”></div>

</div>

  • Styl z CSS

Teraz musisz nadać styl przyciskowi lub przełącznikowi trybu ciemnego za pomocą poniższego fragmentu kodu CSS.

/* Przełącznik trybu ciemnego */

przycisk .wpnm {

rozmiar czcionki: 16px

}

.wpnm-przycisk-wewnętrzny-lewy: pusty {

margines lewy: -0,625em

}

.wpnm-przycisk-wewnętrzny-lewy:przed, .wpnm-przycisk-wewnętrzny-lewy:po {

rozmiar pudełka: obramowanie-pudełko;

margines: 0;

wypełnienie: 0;

/*przemiana*/

-przejście na webkit: 0.4s easy-in-out;

-moz-transition: 0.4s easy-in-out;

-o-przejście: 0.4s złagodzenia;

przejście: 0.4 s easy-in-out;

zarys: brak

}

.wpnm-przycisk .wpnm-przycisk-wewnętrzny, .wpnm-przycisk .wpnm-przycisk-wewnętrzny-lewy {

wyświetlacz: inline-block;

rozmiar czcionki: 0,875em;

pozycja: względna;

wypełnienie: 0em;

wysokość linii: 1em;

kursor: wskaźnik;

kolor: rgba(149, 149, 149, 0,51);

grubość czcionki: normalna

}

.wpnm-przycisk .wpnm-przycisk-wewnętrzny-lewy:przed {

zawartość: ";

Blok wyświetlacza;

pozycja: bezwzględna;

indeks z: 1;

wysokość linii: 2.125em;

wcięcie tekstu: 2.5em;

wysokość: 1m;

szerokość: 1em;

marża: 0,25em;

/*promień-granicy*/

-webkit-border-radius: 100%;

-moz-border-promień: 100%;

promień graniczny: 100%;

prawy: 1,625em;

dół: 0em;

tło: #FFB200;

przekształć: obróć (-45 stopni);

cień do pudełka: 0 0 0.625m biały

}

.wpnm-przycisk .wpnm-przycisk-wewnętrzny-lewy:po {

zawartość: "";

wyświetlacz: inline-block;

szerokość: 2,5em;

wysokość: 1,5em;

-webkit-border-radius: 1em;

-moz-border-promień: 1em;

promień graniczny: 1em;

tło: rgba(255, 255, 255, 0,15);

wyrównanie w pionie: środek;

marża: 0 0,625em;

obramowanie: stałe 0,125em #FFB200

}

.wpnm-przycisk.aktywny .wpnm-przycisk-wewnętrzny-lewy:przed {

prawy: 1.0625em;

cień skrzynki: 0.3125em 0.3125em 0 0 #eee;

tło: przezroczyste

}

.wpnm-przycisk.aktywny .wpnm-przycisk-wewnętrzny-lewy:po {

tło: rgba (0, 0, 0, 0,15);

obramowanie: 0.125em stałe białe

}

.wpnm-przycisk .wpnm-przycisk-wewnętrzny-lewy {

kolor: rgba (250, 250, 250, 0,51);

grubość czcionki: pogrubiona

}

.wpnm-przycisk.aktywny .wpnm-przycisk-wewnętrzny-lewy {

kolor: rgba(149, 149, 149, 0,51);

grubość czcionki: normalna

}

.wpnm-przycisk.aktywny .wpnm-przycisk-wewnętrzny-lewy + .wpnm-przycisk-wewnętrzny {

kolor: rgba (250, 250, 250, 0,51);

grubość czcionki: pogrubiona

}

Ten fragment pochodzi z wtyczki, której autorem jest Marko Arula.

  • Dodaj klasę CSS Dark Mode do tagu Body

Teraz musisz dodać tę konkretną klasę do tagu body, ponieważ pozwoli to później dostosować układ.

Zróbmy to.

jQuery(funkcja($) {

/*Kliknij ikonę trybu ciemnego. Dodaj klasy i opakowania trybu ciemnego.

Przechowuj preferencje użytkownika poprzez sesje*/

$('.wpnm-button').kliknij(funkcja() {

//Pokaż księżyc lub słońce

$('.wpnm-button').toggleClass('active');

//Jeśli wybrany jest tryb ciemny

if ($('.wpnm-button').hasClass('active')) {

//Dodaj klasę trybu ciemnego do ciała

$('ciało').addClass('tryb ciemny');

//Zapisz preferencje użytkownika w pamięci

localStorage.setItem('darkMode', true);

} w przeciwnym razie {

$('ciało').removeClass('tryb ciemny');

localStorage.removeItem('darkMode');

}

})

//Sprawdź pamięć. Wyświetl preferencje użytkownika

if (localStorage.getItem(„DarkMode”)) {

$('ciało').addClass('tryb ciemny');

$('.wpnm-button').addClass('active');

}

})

Możesz teraz sprawdzać i testować, czy klasa CSS „w trybie ciemnym” została dodana jako klasa treści. Następnie dodaj ciemne tło, aby sprawdzić, czy działa dobrze.

body.dark-mode * {

tło: #333;

}

Ponieważ robimy to w przeglądarce lub po stronie klienta, a serwer nic nie wie, zobaczysz, że tryb ciemny jest ładowany po załadowaniu trybu jasnego. Tutaj ciało jest renderowane bez działania trybu ciemnego, a JS czeka na załadowanie DOM przed dodaniem klasy.

Nie jest to więc idealne rozwiązanie dla użytkowników; powinien istnieć lepszy sposób na poprawę doświadczenia. Dowiedzmy się co.

  • Używaj plików cookie do przechowywania preferencji użytkownika przez sesje

Zobaczmy więc, jak dodać klasę treści do serwera, aby załadować ją przed wyświetleniem. Najlepszym sposobem na to jest używanie plików cookie do przechowywania preferencji użytkownika. W ten sposób musisz utworzyć plik cookie dla preferencji użytkownika trybu ciemnego i odpowiednio dodać klasę treści trybu ciemnego.

Włączy klasę treści w trybie ciemnym podczas renderowania html. Musisz więc przepisać kod JS w następujący sposób.

jQuery(funkcja($) {

//Utwórz obiekt cookie

var cookiePrzechowywanie = {

setCookie: function setCookie(klucz, wartość, czas, ścieżka) {

var wygasa = new Date();

wygasa.setTime(wygasa.getTime() + czas);

var ścieżkaWartość = ”;

if (typ ścieżki !== 'niezdefiniowany') {

pathValue = 'ścieżka=' + ścieżka + ';';

}

document.cookie = klucz + '=' + wartość + ';' + pathValue + 'expires=' + wygasa.toUTCString();

},

getCookie: function getCookie(klucz) {

var keyValue = document.cookie.match('(^|;) ?' + klucz + '=([^;]*)(;|$)');

zwrócić kluczową wartość ? kluczWartość[2] : null;

},

removeCookie: function removeCookie(klucz) {

document.cookie = klucz + '=; Maksymalny wiek=0; ścieżka=/';

}

};

//Kliknij ikonę trybu ciemnego. Dodaj klasy i opakowania trybu ciemnego. Przechowuj preferencje użytkownika poprzez sesje

$('.wpnm-button').kliknij(funkcja() {

//Pokaż księżyc lub słońce

$('.wpnm-button').toggleClass('active');

//Jeśli wybrany jest tryb ciemny

if ($('.wpnm-button').hasClass('active')) {

//Dodaj klasę trybu ciemnego do ciała

$('ciało').addClass('tryb ciemny');

cookieStorage.setCookie('yonkovNightMode', 'prawda', 2628000000, '/');

} w przeciwnym razie {

$('ciało').removeClass('tryb ciemny');

setTimeout(funkcja() {

cookieStorage.removeCookie('yonkovNightMode');

}, 100);

}

})

//Sprawdź pamięć. Wyświetl preferencje użytkownika

if (cookieStorage.getCookie('yonkovNightMode')) {

$('ciało').addClass('tryb ciemny');

$('.wpnm-button').addClass('active');

}

})

  • Dodaj klasę trybu ciemnego za pomocą filtra klasy ciała

Dlatego utworzyliśmy plik cookie o nazwie „yonkovNightMode”, który zostanie aktywowany, gdy użytkownik wybierze opcję trybu ciemnego. Ale najpierw musisz pobrać to ciasteczko za pomocą PHP, a następnie dodać je do klasy body.

Skopiuj i wklej następujący fragment kodu w pliku functions.php w motywie podrzędnym.

<?php

/**

* Włącz tryb ciemnego motywu

* Rozwidlony z https://wordpress.org/plugins/wp-night-mode/

*/

funkcja yonkov_dark_mode($klasy) {

$yonkov_night_mode = isset($_COOKIE['yonkovNightMode']) ? $_COOKIE['yonkovNightMode'] : ”;

//jeśli plik cookie jest przechowywany..

if ($yonkov_night_mode !== ”) {

// Dodaj klasę treści „tryb ciemny”

return array_merge($classes, array('tryb ciemny'));

}

zwróć $klasy;

}

add_filter('body_class', 'yonkov_dark_mode');

Jesteś skończony

Stworzyłeś więc w pełni funkcjonalny prototyp układu trybu ciemnego. Fragmenty zostały zaczerpnięte z wtyczek WordPress o otwartym kodzie źródłowym. Możesz więc użyć go na dowolnej ze swoich witryn WordPress, aby dodać opcję trybu ciemnego, aby zapewnić lepsze wrażenia użytkownika.

2. Użyj gotowych motywów WordPress z opcją trybu ciemnego

Co powiesz na wybór gotowego motywu WordPress, który ma już zainstalowany przycisk przełączania trybu ciemnego. W ten sposób możesz korzystać z trybu ciemnego w swojej witrynie WordPress bez korzystania z wtyczki. Pomoże to również uniknąć dostosowywania, ponieważ większość motywów należy dostosować za pomocą wtyczki trybu nocnego lub niestandardowych kodów CSS.

Jakie są więc motywy WordPress, które obsługują tryb ciemny wraz z trybem jasnym? Tutaj przedstawiamy kilka popularnych motywów WordPress z układem trybu ciemnego. Dowiedzmy Się.

  • Twenty Twenty One: Jest to domyślny motyw WordPress, który ma układ trybu ciemnego. Domyślnie jest wyłączony i musisz go włączyć w opcjach motywu.
  • Estera: To popularny motyw WordPress dla witryn WooCommerce. Jest wyposażony w przycisk przełączania trybu ciemnego, który umożliwia użytkownikom przełączanie między trybem jasnym i ciemnym.
  • HighStarter: Ten lekki motyw WordPress jest popularny w witrynach z portfolio. Posiada przełącznik trybu ciemnego bez zainstalowanej osobno wtyczki . A to pozwala użytkownikowi przełączać się między trybem jasnym i ciemnym.
  • Kolega: To pięknie zaprojektowany motyw WordPress, który umożliwia wybór między trybem jasnym i ciemnym bezpośrednio z nagłówka witryny.

Instrukcja lub wtyczka Którą metodę użyć do aktywacji trybu ciemnego?

Omówiliśmy już, jak ręcznie aktywować tryb ciemny na swojej stronie WP. Wiemy, że wielu z was może sprawić, że tryb ciemny będzie kłopotliwy, zwłaszcza jeśli chodzi o kodowanie.

Dlatego zalecamy, aby wziąć to jako drugą opcję. Ponieważ jeśli chodzi o wybór między metodami ręcznymi lub wtyczkowymi, wolimy korzystać z opcji wtyczki, ponieważ może ona szybko i wygodnie dodać przycisk przełączania trybu ciemnego do witryny.

Mówiąc o doskonałej wtyczce, mamy tutaj naszą ulubioną, którą możemy polecić: wtyczkę QS Dark Mode. Jest to wtyczka, która wprowadza na twoją stronę wspaniały ciemny schemat i pozwala poradzić sobie z trendem „going dark”.

Sprawdźmy, dlaczego powinieneś zainstalować wtyczkę trybu ciemnego — w szczególności wtyczkę QS Dark Mode, a nie korzystać z metody ręcznej.

Wtyczka QS Dark Mode: idealne rozwiązanie dla trybu ciemnego

Istnieje wiele powodów, dla których wtyczka QS Dark Mode może być idealnym rozwiązaniem dla trybu ciemnego dla Twojej witryny. Niektóre z nich to:

  • Jest wolne
  • Obsługa niestandardowego CSS
  • Różne style ciemnych przełączników, w tym różne animacje i teksty CTA
  • Oferuje tryb ciemny oparty na czasie
  • Możliwość optymalizacji lokalizacji przycisku
  • Szeroka gama ciemnych schematów kolorystycznych
  • Obsługa obrazu i rozmiaru czcionki w trybie ciemnym
  • Obsługiwane WooCommerce

Jeśli chodzi o instalację wtyczki, to tak samo, jak instalowanie każdej innej wtyczki do witryny WordPress. Ale jeśli nadal masz problem, możemy Ci pomóc, podając tutaj kilka instrukcji. Sprawdźmy.

  • Pobierz wtyczkę QS Mode i prześlij pliki do odpowiedniego katalogu, którym jest ogólnie katalog /wp-content/plugins/nazwa-wtyczki
  • Aby zainstalować wtyczkę bezpośrednio z ekranu wtyczek WordPress. Kliknij Wtyczki> Dodaj nowy z pulpitu nawigacyjnego WP, następnie wyszukaj wtyczkę na pasku wyszukiwania i kliknij zainstaluj.
  • Aktywuj wtyczkę QS Dark Mode z ekranu „Wtyczki”
  • Po aktywacji twój tryb ciemny powinien być włączony.
  • Możesz przejść do trybu ciemnego, klikając przełącznik na ekranie
  • Kliknij przełącznik ponownie, aby aktywować tryb światła
  • Aby dostosować, możesz sprawdzić wszystkie ustawienia na pasku bocznym wtyczki WP Admin Dark Mode

Czy mogę używać schematu kolorów, gdy aktywny jest tryb ciemny?

Tryb ciemny ma na celu zmniejszenie ilości białego lub niebieskiego światła pochodzącego z ekranu. To nie znaczy, że musisz cały czas być czarny. Nadal możesz wybierać między schematami kolorów, nawet gdy włączony jest tryb ciemny, tak jak w przypadku wtyczki QS Dark Mode.

Ale kolory są dobrane w taki sposób, aby treść była wyświetlana w dużym kontraście z jasnymi kolorami pierwszego planu i ciemnymi kolorami tła.

Wniosek

Czy można więc dodać tryb ciemny do witryny WordPress bez wtyczki. Ale jeśli sam nie jesteś programistą motywów lub programistą, nie będziesz preferował tej ręcznej metody robienia tego.

Zamiast tego mądrzej i łatwiej byłoby dodać wtyczkę trybu ciemnego. Wspomnieliśmy o naszej ulubionej wtyczce, wtyczce QS Dark Mode, którą możesz rozważyć, aby Twoja witryna była bardziej reprezentacyjna i kojąca wzrok.

Pamiętaj, że ciemność to nie tylko zdrowie Twoich oczu, ale także estetyczny wygląd Twojej witryny. W ten sposób możesz dodać aurę do ogólnego wrażenia wizualnego, jednocześnie zwiększając zaangażowanie użytkowników.

Astra Pro vs Elementor Pro – bezpośrednie porównanie