Jak dodać tryb ciemny do swojej witryny WordPress za pomocą tych 4 prostych kroków?

Kiedy Instagram i kilka innych głównych witryn i aplikacji dodało tryb ciemny w październiku 2019 r., byliśmy świadkami znacznego wzrostu zainteresowania tą funkcją.

Jednak nawet jeśli wykluczymy odstający element, jakim jest przyjęcie przez Instagram ciemnego, czyli trybu nocnego , powyższy wykres wyraźnie wskazuje na wzrost popularności tej funkcji w ciągu ostatnich kilku lat.

Wraz z Instagramem wiele innych dużych firm przeszło w erę trybu nocnego i również powinieneś rozważyć zmianę. Nie tylko dlatego, że jest modny, ale także ze względu na wiele korzyści dla użytkowników, w tym między innymi zmniejszenie zmęczenia oczu użytkowników, dłuższą żywotność baterii urządzeń używanych do odwiedzania witryny i fakt, że po prostu wygląda znacznie fajniej.

OK, ten ostatni może być nieco subiektywny, ale trzymamy się go.

Na szczęście dodanie trybu ciemnego do witryny WordPress jest dość proste. Możesz nie tylko skonfigurować sposób wyświetlania swojej witryny dla każdego użytkownika, ale także dodać tę funkcję do panelu administratora i dać sobie spokój.

Jeśli myślisz o dodaniu trybu ciemnego do swojej witryny, możesz to zrobić na kilka sposobów, ale użycie wtyczki jest zdecydowanie najprostsze, jak możesz sobie wyobrazić.

W tym poście przedstawimy wtyczkę zalecaną przez większość firm zajmujących się projektowaniem stron internetowych w Los Angeles — WP Dark Mode — i przejrzymy wszystkie kroki, które należy wykonać, aby dodać i dostosować tę funkcję, aby pasowała do Twojej witryny i motywu WordPress.

Ale najpierw przyjrzyjmy się, czym jest tryb ciemny i jego najważniejszymi zaletami. Czytaj!

Co to jest tryb ciemny i dlaczego jest przydatny?

Tryb ciemny, znany również jako tryb nocny, to prosty przełącznik wyświetlania, który zmienia schemat kolorów witryny z jasnego na ciemny.

Na typowej stronie z czarnymi literami na białym tle zwykle wygląda to tak, jakby kolory zostały po prostu odwrócone, ale jak wyjaśnimy poniżej, jest w tym coś więcej.

Ta prosta modyfikacja znacząco ogranicza białe światło wychodzące z ekranu, zmniejszając zmęczenie oczu, zwłaszcza jeśli użytkownik odwiedza witrynę wieczorem.

Opcja włączenia trybu ciemnego jest dostępna w większości nowoczesnych systemów operacyjnych i przeglądarek internetowych.

​Najbardziej znaczące zalety trybu ciemnego

Wspomnieliśmy już o niektórych zaletach tej funkcji w tym poście, ale pomyśleliśmy, że opiszemy je wszystkie tutaj w ładnej, wypunktowanej liście dla Twojej wygody.

Tak więc zalety trybu ciemnego obejmują:

• Mniejsze zmęczenie oczu
• Zmniejszone zużycie energii i dłuższa żywotność baterii
• Mniej białego światła z ekranów
• Więcej czasu spędzonego na Twojej stronie

Jak już wiesz, nowoczesne przeglądarki i systemy operacyjne oferują już tryb ciemny jako opcję, ale jeśli chcesz, aby Twoja witryna wyświetlała się we właściwym schemacie kolorów użytkownikom, którzy ją wolą, musisz ją dodać samodzielnie.

Na szczęście zainstalowanie wtyczki WP Dark Mode może uprościć ten proces, a także zapewnić wszelkiego rodzaju kontrolę nad wyglądem trybu ciemnego witryny.

Tryb ciemny a tryb nocny

Zanim przejdziemy dalej, chcielibyśmy omówić potencjalny problem, z którym czytelnicy o orlim wzroku mogą mieć problem. Mianowicie, używaliśmy i nadal będziemy używać terminów „tryb ciemny” i „tryb nocny” zamiennie w tym artykule, chociaż technicznie mogą one opisywać dwie różne funkcje.

Termin „tryb nocny” jest często używany w odniesieniu do funkcji dostępnej w większości nowoczesnych smartfonów, która całkowicie lub częściowo usuwa niebieskie światło z ekranu wraz z nadejściem nocy, aby zmniejszyć wpływ czasu korzystania z ekranu na cykl snu.

Jednak, jak wyjaśniliśmy wcześniej, te dwa terminy mogą być używane zamiennie, co jest podejściem, które wybraliśmy w tym poście.

Teraz, gdy już to usunęliśmy, spójrzmy, jak dodać tryb ciemny (lub nocny) do swoich witryn WordPress.

Jak dodać tryb ciemny do swojej witryny WordPress za pomocą wtyczki WP Dark Mode?

Teraz, gdy znasz już wszystkie powody, dla których możesz chcieć dodać tryb ciemny do swojej witryny WordPress, pokażemy Ci, jak to zrobić, wykonując cztery proste kroki.

Nasi przyjaciele z firmy zajmującej się projektowaniem stron internetowych w Miami pomogli nam stworzyć ten przewodnik krok po kroku, który opiera się na wyspecjalizowanej wtyczce o nazwie WP Dark Mode.

1. Zainstaluj wtyczkę

Chociaż istnieje kilka wtyczek WordPress w trybie ciemnym, uznaliśmy, że WP Dark Mode jest najbardziej przyjazny dla użytkownika i niezawodny.

Jest to wtyczka, która pozwala szybko i bez wysiłku zbudować ciemną wersję witryny, bez konieczności zajmowania się skomplikowanymi ustawieniami lub kodem.

Jak można się spodziewać, katalog wtyczek WordPress to miejsce, w którym możesz znaleźć to narzędzie.

Zakładamy, że już wcześniej dodałeś wtyczki do swojej witryny, ale na wszelki wypadek wystarczy przejść do panelu administracyjnego i wybrać opcję Dodaj nowe z zakładki Wtyczki .

Stamtąd możesz znaleźć WP Dark Mode i kliknąć Zainstaluj teraz i aktywuj .

2. Włącz żądane ustawienia

Możesz włączać i wyłączać tryb ciemny na karcie Ustawienia ogólne . Po otwarciu tej karty zobaczysz, że dwie opcje są już domyślnie włączone.

Są to Włącz tryb ciemny frontendu i Włącz tryb ciemny zgodny z systemem operacyjnym .

Pierwsza opcja włącza tryb ciemny w Twojej witrynie, a druga oznacza, że ​​funkcja zostanie aktywowana automatycznie, jeśli system operacyjny lub przeglądarka użytkownika są ustawione na tryb ciemny.

Inną opcją jest ustawienie trybu ciemnego jako domyślnego . Ten jest dość oczywisty — jeśli go włączysz, wszyscy użytkownicy zobaczą ciemną wersję Twojej witryny, niezależnie od ich preferencji.

3. Włącz i dostosuj pływający przełącznik

Jeśli chcesz dać użytkownikom możliwość przełączania się między trybami ciemnym i jasnym w dowolnym momencie, możesz również włączyć opcję Pokaż opcję pływającego przełącznika .

Ta opcja zrobi dokładnie to, co jest napisane na puszce — umieść przełącznik z przodu witryny, umożliwiając użytkownikom włączanie lub wyłączanie trybu ciemnego według własnego uznania.

Możesz zadzierać z rozmieszczeniem i stylem ikony w sekcji Ustawienia wyświetlania. Twoje opcje pod względem stylu są nieco ograniczone w darmowej wersji wtyczki, ale kluczowa funkcjonalność (włączanie lub wyłączanie trybu ciemnego) jest tam.

4. Eksperymentuj z różnymi schematami kolorów trybu ciemnego

W tym momencie Twoja witryna WordPress ma w pełni działający tryb ciemny, a jeśli to wszystko, czego szukasz, możesz pominąć ten krok.

Jeśli jednak nie chcesz, aby Twoja witryna wyglądała ogólnie, zdecydowanie zalecamy dostosowanie kolorów trybu ciemnego. Wszystkie potrzebne opcje znajdziesz w sekcji Ustawienia stylu .

Ten ekran oferuje paletę kolorów, które pasują do identyfikacji wizualnej Twojej witryny.

Jak możesz sobie wyobrazić, darmowa wersja wtyczki WP Dark Mode oferuje tutaj nieco ograniczone opcje, ale powinieneś być w stanie znaleźć odpowiednie rozwiązanie.

Jeśli chcesz jeszcze bardziej dostosować kolory, wersja premium zapewnia szerszy zakres wstępnie ustawionych palet kolorów i umożliwia tworzenie własnego schematu.

​Bonus — włączenie trybu ciemnego w panelu administratora WordPress

Jeśli zamierzasz oferować swoim klientom i potencjalnym klientom wszystkie korzyści płynące z trybu ciemnego w interfejsie witryny WordPress, dlaczego nie rozszerzyć tej samej uprzejmości na siebie i dodać ten tryb również do pulpitu administracyjnego?

Jeśli domyślny schemat kolorów WordPress jest zbyt jasny jak na Twój gust, wtyczka WP Dark Mode ma rozwiązanie. Oto jak to zrobić:

1. Zainstaluj wtyczkę WP Dark Mode — nie ma tu wiele do wyjaśnienia. Spójrz na powyższą sekcję, aby uzyskać instrukcje, jak wykonać ten krok.
2. Włącz tryb ciemny backendu — ta opcja znajduje się na tej samej karcie, co inne podstawowe ustawienia, o których mówiliśmy wcześniej ( Ustawienia ogólne ). Musisz przejść do tej sekcji i przełączyć przełącznik zatytułowany Włącz Backend Darkmode. Nie zapomnij przewinąć w dół i kliknąć Zapisz ustawienia , aby zastosować zmianę.
3. Przełącz tryb ciemny w panelu administratora — panel administratora będzie teraz miał przełącznik u góry, umożliwiający włączenie trybu ciemnego. Jest to szczególnie przydatne w przypadku witryn z wieloma administratorami, ponieważ każda osoba może niezależnie włączać i wyłączać tryb ciemny.
4. (Opcjonalnie) Dostosuj schemat kolorów panelu administracyjnego — przy włączonym trybie ciemnym możesz zmienić niektóre kolory, aby wszystko wyglądało ładniej. Aby to zrobić, przejdź do Użytkownicy > Profil i wybierz preferowaną paletę. Po ustawieniu kolorów kliknij Aktualizuj profil , aby zastosować nowe ustawienia.

I to wszystko. Mamy nadzieję, że ten przewodnik pomógł Ci zaimplementować tryb ciemny w witrynie WordPress, a także w panelu administratora.

To uaktualnienie jest prawie zbyt proste, aby je zignorować za pomocą wtyczki WP Dark Mode, więc zachęcamy do dodania tej doskonałej funkcjonalności do swojej witryny.

Biografia autora: Christopher jest specjalistą ds. marketingu cyfrowego w Digital Strategy One i niezależnym blogerem. Koncentruje się na nowych trendach w technologiach internetowych i cyfrowej dystrybucji głosu w różnych kanałach. W wolnym czasie Christopher gra na perkusji i Magic: the Gathering.