Jak aktywować tryb nocny w WordPressie

Od pewnego czasu systemy operacyjne i aplikacje zawierają wersje swoich interfejsów graficznych, w których białe tło zastąpiono czarnym, aby zmniejszyć emisję światła w godzinach nocnych, a tym samym mniej uszkadzać oczy. Nazywa się to trybem nocnym .

Czy to moda, czy to, że naprawdę działa, tryb nocny jest coraz bardziej popularny. Są tacy, którzy zapewniają, że tryby nocne są korzystne dla środowiska, ponieważ czarne ekrany zużywają mniej energii niż białe. Ale są też przeciwnicy tego rodzaju ciemnych trybów.

Tak czy inaczej, może to być funkcja, którą chcesz mieć również na swojej stronie internetowej, a do tego dzisiaj porozmawiamy o trybie nocnym w WordPress.

WordPress nie zawiera jeszcze domyślnie trybu nocnego, ale istnieją opcje dodania trybu nocnego zarówno na pulpicie nawigacyjnym WordPress, jak i na interfejsie. Jak zwykle wtyczki są rozwiązaniem rozszerzającym WordPress o tę ciekawą wizualną funkcjonalność.

Jak aktywować tryb nocny na pulpicie nawigacyjnym WordPress?

Zaczynamy od wtyczki Dark Mode do WordPressa, która umożliwia aktywację trybu nocnego na pulpicie nawigacyjnym WordPressa. Jest łatwy w użyciu i bezpłatny.

Pierwszą rzeczą jest zainstalowanie i aktywacja wtyczki. Możemy go znaleźć bezpośrednio w katalogu wtyczek WordPress, bezpośrednio w panelu WordPressa za pośrednictwem menu wtyczek , jak widać na powyższym zrzucie ekranu.

Po zainstalowaniu wtyczki Dark Mode każdy użytkownik twojego WordPressa będzie miał w swoim profilu opcję aktywacji go na swoim pulpicie nawigacyjnym:

Dobrą rzeczą w tej wtyczce jest to, że to każdy użytkownik wybiera, jak chce widzieć pulpit nawigacyjny WordPress, w trybie ciemnym lub w trybie normalnym. W ten sposób, jeśli jest ktoś, kto chce nadal korzystać z pulpitu WordPress, jak zawsze, z białym tłem, nie ma z tym problemu.

Na poprzednim zrzucie ekranu możesz zobaczyć wynik włączenia trybu ciemnego. I wygląda świetnie! Bardzo podobał mi się efekt czarnego tła również w centralnej części strony, a nie tylko w bocznym menu.

Niestety, istnieje problem dotyczący wtyczki WordPress Dark Mode: zapewnienie zgodności z edytorem bloków Gutenberga. Na poniższym zrzucie ekranu widać, że nie jest jeszcze w stanie zastosować ciemnego tła do Gutenberga:

Myślę, że jeśli wtyczka odniesie wystarczający sukces i użytkownicy o nią poproszą, jej twórcy dostosują ją tak, aby edytor bloków pojawiał się również w trybie nocnym. W każdym razie szalone tempo rozwoju Gutenberga i jego „częste” aktualizacje stylów czynią adaptację nieco skomplikowaną.

Jak aktywować tryb nocny dla odwiedzających WordPress

Wtyczka Dark Mode dodaje tylko tryb nocny na pulpicie nawigacyjnym WordPress. Reszta Twojej witryny, tj. frontend, który widzą odwiedzający, będzie nadal wyglądać tak samo, bez żadnych zmian.

Jeśli chcesz, aby odwiedzający mieli możliwość aktywacji trybu nocnego w Twojej witrynie, używając ciemnego tła zamiast jasnego tła, musisz zainstalować wtyczkę WP Night Mode.

Ta wtyczka, podobnie jak tryb ciemny, jest całkowicie darmowa i dostępna w katalogu wtyczek WordPress.

Po zainstalowaniu nie zobaczysz niczego w Ustawieniach ani w żadnym dodatkowym menu. Musisz tylko przejść do menu Wygląd i tam edytować swoje menu. W swoim menu głównym musisz dodać niestandardowy link bez konkretnego adresu URL. Ta nowa pozycja menu pomoże nam dodać przełącznik, aby aktywować i dezaktywować tryb nocny.

W samym interfejsie zarządzania menu musisz otworzyć opcje ekranu, które znajdziesz w prawym górnym rogu, aby aktywować opcję dodawania klas CSS, jak widać na poniższym zrzucie ekranu:

Gdy to zrobisz, gdy będziesz edytować element menu, który dodaliśmy, zobaczysz dodatkowe pole, w którym możesz dodać klasy CSS. Tutaj musisz dołączyć klasę CSS wp-night-mode . Ta klasa jest tą, której tryb nocny WP musi zidentyfikować, jaki przedmiot powinien być używany jako przełącznik trybu nocnego.

Domyślnie WP Night Mode to wtyczka, która nie dodaje ciemnych kolorów do twojego interfejsu. Musisz być tym, który wybiera ciemne kolory, które chcesz pokazać zarówno dla tła, tekstu, jak i linków. Aby zdefiniować te kolory, musisz przejść do menu Wygląd i tam otworzyć menu Dostosuj .

Otworzy się konfigurator WordPress i znajdziesz tam opcję Tryb nocny . Jeśli go wybierzesz, zobaczysz, że masz opcje, aby domyślnie aktywować tryb nocny i utworzyć kilka stylów. W każdym stylu definiujesz kolor tła, kolor tekstu i kolor linków.

Dobrą rzeczą w konfiguratorze jest to, że możesz zobaczyć prawdziwy podgląd tego, jak Twoja witryna będzie wyglądać z wybranymi kolorami:

Niestety wynik nie jest doskonały: niektóre elementy nadal mają jasne tło, które w trybie nocnym wygląda dziwnie. Ale nie martw się, możemy to naprawić. Z poziomu samego dostosowania możesz dodać dodatkowe reguły CSS, aby naprawić te małe problemy.

Wróć do dostosowywania, a zobaczysz opcję Dodatkowy CSS . Jeśli ją wybierzesz, masz możliwość pisania reguł CSS właśnie tam. Te reguły mogą być następującego typu:

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

Pamiętaj, że to, co naprawdę robi wtyczka, to zastosowanie klasy CSS wp-night-mode-on w tagu body Twojej witryny. Dlatego, jeśli chcesz poprawić tło elementu HTML i uczynić je ciemnym, wszystko, co musisz zrobić, to znaleźć selektor dla tego elementu i zastosować poprawkę, gdy tag body ma klasę wp-night-mode-on .

W poniższym porównaniu możesz zobaczyć podstawowe porównanie trybu normalnego i trybu nocnego z zastosowanymi przez nas kolorami:

Dodanie trybu nocnego do WordPressa jest bardzo łatwe dzięki kilku wtyczkom. Dzisiaj sprawdziliśmy wtyczki, które pomagają nam aktywować tryb nocny na pulpicie nawigacyjnym WordPress i we frontendzie.

Czy regularnie korzystasz z trybów nocnych w swoich aplikacjach? Pamiętaj, aby skomentować poniżej swoją opinię!

Polecane zdjęcie Priscilli Du Preez na Unsplash.