Coraz więcej aplikacji pozwala nam używać trybu nocnego. Chodzi tu przede wszystkim o komfort korzystania z narzędzia, gdy za oknem ciemna i głucha noc. Nasz wzrok potrzebuje wówczas mniej światła, dzięki czemu mniej się męczy, np. gdy czytamy artykuł.

Coraz częściej ta funkcjonalność pojawia się także na stronach internetowych. Nie jest to coś co można by określić mianem bardzo popularnego trendu, co poniekąd wynika z faktu, że wdrożenie takiego mechanizmu nie koniecznie będzie łatwe. Może się wręcz okazać, że zamiast zrobić sobie i odwiedzającym dobrze, tylko utrudnimy im kontakt z naszymi publikacjami.

Częściej widzimy taką możliwość w backendzie, np. motyw Blocksy oferuje tryb nocny, UiPress (dawniej Admin 2020) pozwala taki tryb ustawić dla całego kokpitu WordPress. Część motywów pozwala od ręki wdrożyć taką funkcjonalność na froncie, np. motyw Bimber – fajna nazwa swoją drogą zwłaszcza, że to polski motyw 🙂 Jakiś czas temu postawiłem na nim jedną ze swoich stron https://bloa.pl i zmiana trybu z jasnego na ciemny i odwrotnie działa bez najmniejszych problemów. Gdy pojawił się WordPress 5.6, razem z motywem Twenty Twenty-One zawitał także tryb ciemny.

Uczestniczysz w moich kursach na PoznajWP? Tam również możesz zmienić tryb wyświetlania lekcji kursów.

Mimo wszystko wdrażanie trybu nocnego na stronach idzie trochę jak po grudzie. Być może doczekamy się jego w moich ulubionych motywach, o których przeczytasz na stronie: “Najlepsze darmowe szablony WordPress“. Ale kiedy? Nie mam pojęcia.

Co jeśli Twój motyw nie ma takiej funkcji, a chciałbyś w miarę szybko dodać ją do swojej strony WordPress?

Wtyczka WP Dark Mode

Jak czegoś nie ma, to w przypadku WordPressa jest duża szansa, że istnieje dodatek, który ten brak wypełni. Tak też jest w przypadku trybu ciemnego. Wystarczy sięgnąć po wtyczkę WP Dark Mode i po chwili klikania tryb nocny jest na Twojej stronie.

Testuję ją oczywiście na Jak Zrobić Stronę i na razie wydaje się nie sprawiać trudności. Wtyczka dostępna jest w repozytorium WordPress, ale ja wybrałem jej wersję PRO zwłaszcza, że twórcy tej wtyczki mają aktualnie akcję promocyjną, więc zdecydowałem się z niej skorzystać i sprawdzić w boju na co pozwala ten dodatek.

Na stronie projektu WP Dark Mode na liście w pełni kompatybilnych motywów i dodatków jest: Astra, OceanWP, a także buildery w tym Elementor i Oxygen (z obu korzystam), a także DIVI, Beaver Builder i WP Backery. Na liście nie było jednak motywu, który wykorzystuję najczęściej, a mianowicie Kadence. Stwierdziłem jednak, że sprawdzę, bo to, że go nie wymieniono nie musi oznaczać, że będą problemy. Sprawdziłem.

Możliwości wtyczki

Dosyć spore, ale muszą takie być jeśli wtyczka ma pozwalać na pracę w różnie skonfigurowanych środowiskach WordPress. Panel zarządzania ustawieniami wtyczki wygląda w taki sposób:

WP Dark Mode ustawienia wtyczki

Jest tu sporo możliwości związanych z konfiguracją, co pozwala zarówno dostosować sposób działania trybu ciemnego, jak również wyeliminować ewentualne problemy z wyświetlaniem się niektórych elementów na stronie w trybie nocnym.

Nie będę omawiał wszystkich zakładek, ale te najistotniejsze.

Ustawienia ogólne

Widać je powyżej. Możesz aktywować tryb nocny dla frontu swojej strony, a także dla backendu czyli panelu administracyjnego WordPress. Trzecia opcja, którą tu widzisz, to możliwość automatycznego wykrycia trybu ciemnego w ustawieniach systemu operacyjnego odwiedzającego stronę, co poskutkuje zmianą trybu. Ciekawe, bo jeśli ktoś ma skonfigurowany tryb nocny na komputerze, to nie zrobił tego bez powodu, po prostu preferuje taki sposób pracy. Twoja strona wykryje to i dostosuje się do tych preferencji.

Nie szukałem badań na ten temat, ale nie wykluczone, że mogłoby to mieć pozytywny wpływ na konwersję 🙂 Jeśli zostanie to potwierdzone, każdy będzie chciał udostępnić odwiedzającym stronę, bloga lub sklep internetowy możliwość przełączenia się na tryb nocny.

Ustawienia zaawansowane

Kolejna zakładka w panelu wtyczki, to ustawienia zaawansowane. Nie wiem dlaczego oddzielili te dwie opcje od ustawień ogólnych, ale nie wnikajmy. Najwyraźniej był jakiś powód.

Ustawienia zaawansowane

W tym miejscu możesz aktywować domyślnie tryb nocny. Bez względu czy będzie dzień czy noc, tryb ciemny będzie domyślnie aktywny. W niektórych sytuacjach może to być pomocne, ale w praktyce nie sądzę, aby dużo osób z aktywacji tego ustawienia czerpało korzyści.

Natomiast druga opcja pozwala na wprowadzenie godziny o której tryb ciemny ma się automatycznie aktywować i o której ma powrócić do trybu dziennego. W naszym przykładzie tryb nocny aktywuje się o godzinie 20:00 a wyłączy się o godzinie 6 rano. Możesz to dowolnie zmienić lub w ogóle nie korzystać z tej funkcji.

Ustawienia kolorów

Tryb ciemny to kolory, a więc ta zakładka jest ważna. To tu decydujesz o kolorystyce. Czy to będzie głęboka czerń tła, czy może wybierzesz inny ciemny kolor, także dla czcionek i linków. To możesz ustawić wedle własnego uznania, a jeśli nie masz pomysłu, to do dyspozycji jest tu 13 presetów. Wystarczy kliknięcie, zapisanie zmian i możesz przyjrzeć się czy efekt Cię satysfakcjonuje 🙂

Zarządzanie kolorami trybu ciemnego

Przełącznik

Możesz we wcześniejszych krokach konfiguracji zdecydować o tym czy tryb nocny będzie aktywowany automatycznie lub nie. Jeśli automat jest wyłączony, to warto dać każdemu odwiedzającemu Twoją stronę możliwość ręcznej zmiany trybu. Właśnie do tego służy kolejna zakładka związana z konfiguracją wyglądu i położenia przełącznika.

przyciski

Powyżej widzisz opcje związaną z aktywacją pływającego przełącznika, który może być przyklejony np. w prawym dolnym rogu strony. W momencie gdy testuję tę wtyczkę, znajdziesz przełącznik zarówno w tym artykule jak i pozostałych tekstach na JZS. Możesz od razu sprawdzić jak działa.

Jeśli go nie widzisz to znaczy, że albo zmieniłem konfigurację, albo jestem po testach i ostatecznie uznałem, że z tej wtyczki na tej konkretnej stronie korzystać nie będę.

Oprócz pływającego przełącznika możesz także dodać go jako ostatni element menu Twojej strony, a także możesz załadować własną grafikę wizualizacji przełącznika. Wygodnie dostosujesz ten element do własnych potrzeb i upodobań. Mi nie chciało się bawić w grafiki więc wybrałem gotowca.

Uwzględnij lub wyklucz

Niezwykle ważna sekcja ustawień wtyczki. Gdyby jej nie było miałbym pod górkę z adaptacją trybu nocnego do mojego motywu.

wykluczenia

Możesz dołączyć lub wykluczyć poszczególne obiekty swojej strony poprzez wprowadzenie w odpowiednim polu identyfikatora lub nazwy klasy CSS. To funkcjonalność, która jak mniemam pozwoli wykorzystać wtyczkę WP Dark Mode na wielu rozmaitych motywach. Z Kadence jak się okazało żadnych problemów nie ma.

Wykluczenia część dalsza

To, że możesz wykluczyć klasy CSS to nie wszystko. Możesz także wykluczyć konkretne strony, wpisy, kategorie wpisów, rodzaje zawartości itd… W moim przypadku wykorzystałem tę możliwość eliminując z trybu nocnego kilka stron i wpisów. W zasadzie głównie zależy mi na tym, aby treści bloga i treści bazy wiedzy oraz LTD miały możliwość zmiany trybu.

Z pozostałych ustawień, to także wykluczenia dotyczące sklepu WooCommerce oraz własne style CSS jeśli okaże się, że coś chcemy delikatnie podrasować w trybie nocnym. Jest tu również opcja dotycząca obrazków. Dotyczy to zwłaszcza tych, które udostępniamy w formie przeźroczystego pliku png, co może skutkować tym, że plik w trybie nocnym straci sporo szczegółów i przestanie być użyteczny. Gdyby tak się stało możesz dla dowolnego obrazka dodać jego nocną wersję 🙂

W końcu jest także możliwość analizowania tego jaki procent odwiedzających Twoją stronę korzysta z trybu ciemnego. Pojawia się prosty widget na kokpicie WordPress.

Statystyka trybu ciemnego

Ile kosztuje wtyczka WP Dark Mode

Wspomniałem, że jest wersja bezpłatna, ale przyznaję się, że nie użyłem jej ani razu. Być może to błąd, bo wersja bezpłatna pozwoliłaby mi zrobić to co zrobiłem, ale uznałem że w przypadku takiego narzędzia i moich projektów wolę mieć pełną funkcjonalność i dostęp do wszystkich nowości jakie będą pojawiały się w przyszłości.

Jeśli jednak wolisz wersję bezpłatną zajrzyj do repozytorium pod adresem: https://wordpress.org/plugins/wp-dark-mode/

Natomiast wersję płatną znajdziesz na stronie autorów WPPOOL. Nie wiem na jaką promocję trafisz, ale mi udało się ustrzelić zniżkę na poziomie 83% nie było się więc nad czym zastanawiać 🙂

Podsumowanie

Wtyczka bardzo interesująca i przede wszystkim pozwalająca na uruchomienie trybu nocnego praktycznie na dowolnym motywie z dowolnymi dodatkami. Czasem może to wymagać mniej lub więcej wykluczeń lub uwzględnień klas CSS, ale mimo to niedociągnięcia wizualne możesz szybko wyeliminować.

Tryb nocny to Twój ukłon w stronę osób, które preferują taką formę konsumpcji treści, czyli ciemne tło i jasne litery. Być może to właśnie dzięki tej opcji zyskasz większą ilość powracających Czytelników.

Udostępnij

Zobacz również

WP Rocket 3.9

Co nowego w WP Rocket 3.9.X?

WP Rocket to jedna z tych wtyczek buforujących i optymalizujących strony WordPress, która jest najczęściej wymieniana jako najlepsza wtyczka tego typu. I rzeczywiście jest to

Bezpłatne informacje o nowościach JZS

Zapraszam Cię do grona Subskrybentów! Tysiące Czytelników już subskrybuje wiadomości z JZS.

W każdej chwili możesz zrezygnować z subskrypcji. Twój adres jest tu bezpieczny.

Polecane Oferty LifeTime!

Meta Box Lifetime
Meta Box

Dodawaj własne rodzaje treści, pola i taksonomie do WordPressa.

GetLead.page w ofercie lifetime
GetLead.page

Czat tekstowy, audio i wideo. Zwiększ sprzedaż dzięki lepszym interakcjom...

ADYOUNEED LTD
ADYOUNEED

Tworzenie, zarządzanie i optymalizacja reklamami Google, Facebook, TikTok czy LinkedIn...

Komentarzy: 2

  1. Aleksander pisze:

    Jak zwykle ciekawy materiał, ale tego switcha przenieś do menu, bo na tel dynda jak nie powiem co 😛

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *