Najnowszym trendem w webdesignie stał się dark mode/night mode lub też po polsku tryb ciemny, określany również jako tryb nocny. Jego stosowanie ma sensowne uzasadnienie. Patrzenie na intensywne, jasne światło pobudza nas i na dłuższą metę obciąża nasze oczy. Ciągła ekspozycja słabego światła nie pobudza, wręcz przeciwnie – ułatwia zasypianie. Oczy również się tak nie męczą i jest to dla nich zdrowsze. Motyw o ciemnej kolorystyce sprawia nawet, że ekrany urządzeń zużywają znacznie mniej energii. To są powody, dla których zaczęto stosować tryb nocny. Mimo że technologicznie strony mogły posiadać dwie wersje kolorystyczne już od zawsze, dopiero teraz stosowanie trybu ciemnego stało się popularne. Aktualnie każda strona – jeżeli nie posiada domyślnej ciemnej kolorystycznie wersji, powinna posiadać nocny tryb. Ten poradnik dotyczył będzie implementacji trybu ciemnego włączanego i wyłącznego na przycisk
Taki tryb może zostać zaimplementowany na każdym blogu/stronie opartej o WordPress. Tryb nocny będzie dedykowany pod konkretny motyw – co oznacza, że trzeba go sobie samemu stworzyć. Może wydawać się to przerażające, jednak przy odpowiedniej nawigacji, implementacja ciemnego trybu nie powinna stanowić większych problemów.
Odpowiednio zaimplementowany tryb ciemny / nocny strony będzie działał tak (kliknij poniższy przycisk):
Sposoby na tryb nocny strony opartej o WordPress.
Istnieje kilka sposobów na implementacje motywu nocnego. Najbardziej podstawowym i profesjonalnym jest napisanie całego motywu, z zastosowaniem dwóch odmian kolorystycznych, zmienianych na przycisk. Jednak takie rozwiązanie najczęściej nie wchodzi w grę, ponieważ ogromna ilość motywów WordPress nie posiada zaimplementowanego trybu ciemnego już od początku. Szczególnie gdy weźmiemy pod uwagę motywy sprzed paru lat. Ten poradnik również dedykuję konsumentom motywów – ludziom, którzy wybrali gotowe motywy i chcieliby dalej z nich korzystać i to w nich zaimplementować motyw ciemny strony.
Ciemny tryb można zaimplementować również wtyczką WordPress, która automatycznie odmieni design strony na kolory przeciwne. Jednak automatycznie nie znaczy dobrze, a w darmowej wersji jest ona bardzo ograniczona i pozbawiona opcji modyfikacji trybu nocnego. To rodzi konieczność wykupienia wersji płatnej. Ponadto dochodzi tutaj kwestia obciążenia strony internetowej, co przekłada się na szybkość jej wczytywania. W szczególności, jeśli oprócz owej wtyczki, posiadamy szereg innych. Gdy ją testowałem, bardzo przeszkadzał mi również latający przycisk od trybu nocnego z boku strony, gdyż dopiero w pełnej wersji można go gdzieś zagnieździć.
Zamiast zaprezentowanej wtyczki zaoferuję wtyczkę znacznie prostszą i niemającą praktycznie żadnego wpływu na szybkość wczytywania strony. Waży ona bowiem tylko 90 KB, a potrafi bardzo pomóc, wszystkim mniej doświadczonym posiadaczom blogów/stron w implementacji ciemnego, nocnego motywu w stronach WordPress. Nie jest ona w pełni automatyczna, aczkolwiek nie takie jest też jej założenie. Jej implementacja wiąże się z lekką modyfikacją w arkuszu CSS, odpowiedzialnego za wygląd strony – wszystko opiszę dokładnie. Wtyczka, o której mowa, nazywa się WP Night Mode. Jest ona najlepszym rozwiązaniem, jeśli chcemy stosunkowo szybko, darmowo i najmniej „boleśnie” wprowadzić tryb nocny na stronie WordPress. Nie ma znaczenia również czy nasz motyw sprzed paru lat się „nada”, gdyż zastosujemy dedykowane modyfikacje.
Starałem się wszystko opisać możliwie jak najprościej, jednak przed rozpoczęciem implementacji trybu nocnego na swojej stronie sprawdź, czy wszystkie podpunkty są dla ciebie jasne.
Tryb nocny strony WordPress – instalacja wtyczki
Na początku musimy pobrać i zainstalować wtyczkę WP Night Mode. Zainstalujesz ją w zakładce „wtyczki” panelu WordPress, po wybraniu „dodaj nową” > „wyślij wtyczkę na serwer” > wgraj pliki wtyczki w rozszerzeniu .zip. Możesz również wyszukać ją bezpośrednio w zakładce wtyczki i zainstalować na stronie.
Sama instalacja wtyczki, jeszcze nie zmieni wyglądu strony.
Implementacja przycisków trybu ciemnego na stronie
Wgrana wtyczka oferuje nam pięć rodzajów przycisków, ale o nich później, skupimy się najpierw na ich implementacji. Sposoby są trzy: Przycisk dark mode w menu głównym na stronie (najbardziej zalecany), przycisk ciemnego trybu we wpisie na stronie (skrajnie niezalecany) oraz przycisk trybu nocnego w widżecie, z boku strony lub w jej stopce (zalecany). Nie trzeba ograniczać się tylko do jednego sposobu, można bowiem przycisków zaimplementować tyle, ile chcemy. Będą one wciąż działać.
Aby zaimplementować przycisk trybu nocnego w menu strony WordPress:
2. Następnie, kliknij zakładkę w prawym górnym rogu nazwaną „opcje ekranu„:
I upewnij się, że wśród opcji masz zaznaczoną opcję „Klasy CSS” (Jest to niezbędne do implementacji przycisku):
3. Teraz dodaj własny odnośnik do swojego menu. W jego adresie URL wstaw znak „#„:
4. Po dodaniu nowej pozycji kliknij ją, a w polu Klasy CSS wstaw „wp-night-mode”:
5. Zapisz menu.
Jeżeli wtyczka WP Night Mode, jest uruchomiona, przycisk powinien ukazać się w menu strony (oraz jeżeli edytowałeś odpowiednie Menu).
Implementacja przycisku trybu ciemnego we wpisie:
Zakładka Wpisy > dodaj lub edytuj istniejący. Aby wstawić przycisk trybu nocnego w artykule, należy wstawić „wp-night-mode-button” w nawiasie kwadratowym w wybranym miejscu jego treści. Powstanie przycisk trybu nocnego:
Wstawianie przycisku do widżetu, np. na stopce strony:
1. Kliknij zakładkę w WordPressie Wygląd > Dostosuj. Następnie otworzy Ci się okno personalizacji strony.
2. Znajdź ustawienia widżetów. Ustawienia mogą być różnie rozmieszczone, w zależności od motywu. Najłatwiej znajdziesz je, przytrzymując Shift i klikając myszką na wybrany widżet strony. Wyświetli Ci się okno edycji widżetu po lewej stronie:
3. W oknie edycji kliknij „Dodaj widget” > wpisz „html” > wybierz blok „Własny HTML„
4. W treści bloku wstaw „wp-night-mode-button” w nawiasie kwadratowym []:
5. Opublikuj, aby wszystko zapisać na stronie.
Jeżeli wtyczka WP Night Mode jest włączona, wyświetli się przycisk.
(Opcjonalne) Aby przycisk był na środku widżeta, możesz wstawić taki kod:
<div style="text-align: center;">[wp-night-mode-button]</div>Ustawianie trybu nocnego w WordPressie
Wtyczka, mimo że włączona umożliwia wyświetlanie przycisków, to po ich naciśnięciu ciemny tryb jeszcze się nie włączy. Należy bowiem najpierw ustawić kolory, jakie strona powinna przełączyć po naciśnięciu przycisku ciemnego trybu.
Aby ustawić kolory ciemnego trybu strony, wejdź do zakładki „Wygląd”> kliknij „Dostosuj”. Uruchomi Ci się okno personalizacji strony. Teraz kliknij po lewej stronie zakładkę „Night Mode”. Jest to prawdopodobnie ostatnia zakładka.
Otworzy Ci się okno ustawień kolorów trybu ciemnego. Możesz ustawić w nim: domyślnie włączony ciemny motyw (Night Mode as Default), wygląd przycisku (Toggle Style) oraz jego rozmiar (Toggle Size).
Wybierz odpowiednie ciemne tło (Body background), kolor tekstu (Text Color), kolor linków (Link Color) oraz kolor linków po najechaniu kursorem (Link Hover Color).
Jak widać powyżej, wtyczka nie oferuje zbyt wielu opcji personalizacji. Dlatego też resztę treści na stronie zmuszeni jesteśmy sami dopisać i nadać im odpowiednie kolory po włączeniu ciemnego trybu, ale to dopiero w pliku CSS strony (później).
Po ustawieniu interesujących kolorów kliknij „Opublikuj„. Następnie sprawdź w nowej karcie, czy wszystko poprawnie się wyświetla po kliknięciu przycisku trybu nocnego (bo w przypadku niektórych motywów wcale nie musi).
Edycja trybu ciemnego – dopisanie innych elementów strony.
Jak wspominałem na początku, wtyczka nie jest w pełni automatyczna i dostosowana do każdego motywu. Niektóre motywy mogą nie wyświetlać poprawnie ciemnego trybu. Najczęstszym zjawiskiem jest nieuwzględnienie body w CSSie przez wtyczkę.
Aby zmienić kolor boków strony, należy wejść do zakładki „Dodatkowy CSS” w opcjach personalizacji strony.
Tam wstawić taki kod:
body.wp-night-mode-on {
background: #1c1c1c /* << tu możesz wpisać własny kolor */;
}Do znalezienia odpowiedniego koloru możesz użyć ColorPickera.
Po wszystkim kliknij „opublikuj”, aby zapisać zmiany.
Podany sposób dotyczy jednak konkretnego przypadku (dosyć popularnego). W innych przypadkach problem mogą stanowić inne części strony. Aby je edytować, trzeba jednak najpierw je zbadać. W tym celu otwórz nową kartę, wejdź na swoją stronę i kliknij F12 – przeglądarka Chrome posiada wbudowane narzędzie deweloperskie, z którego ja skorzystam w ramach przykładu (inne przeglądarki też mogą mieć)
Otworzy się okno po prawej stronie lub u dołu przeglądarki. Okno to posłuży do badania klass i Id strony, które nie zmieniają domyślnie kolorów, gdy włączymy tryb nocny strony.
Aby znaleźć interesujący nas element, musimy rozwijać coraz to nowe divy (bloki, z których składa się strona). Divy mogą być w sobie nawzajem i od siebie zależne. Wśród nich mogą znajdować się inne znaczniki, jednak w tym przypadku skupiamy się na ich artybutach – id=”nazwa” oraz class=”nazwa”.
Tutaj mamy przykład białego kalendarza na boku strony:
Gdy chcesz uwzględnić daną klasę dotyczącą elementów w swoim dark modzie, wpisz taki kod, zmodyfikowany o nazwy elementów twojej strony do dodatkowego CSS:
.wp-night-mode-on .Klasa-Elementu-Do-Uwzględnienia {
color: #111111 ; /* <<< Wybrany kolor czcionki (można usunąć) */
background-color: #000 ; /* <<< Wybrany kolor tła klasy */
}Jeżeli problem stanowi pojedynczy element strony (id), poprzedź go znakiem „#” – tak jak w tym przykładzie:
.wp-night-mode-on #ID-Elementu-Do-Uwzględnienia {
color: #111111 ; /* <<< kolor tekstu (można usunąć jeżeli czcionka jest odpowiednia) */
background-color: #000 ; /*<<< Wybrany kolor tła ID */
}Jednak należy pamiętać, że takie rozwiązanie nie musi działać w przypadku każdej podstrony – elementy ID, w przeciwieństwie do klas pokazują się zazwyczaj tylko raz na stronie. Jeżeli dany element ID korzysta z ustawień klasy – celuj w edycję klasy.
Edycja sekcji komentarzy WordPress w trybie nocnym
Jednym z elementów strony, który w większości przypadków nie będzie kompatybilny z trybem nocnym, będzie sekcja komentarzy.
Aby edytować sekcje komentarzy, wystarczy taki kod zaimplementowany do CSS:
.wp-night-mode-on #comment{
color: #ffffff; /* <<< kolor czcionki sekcji komentarzy w trybie nocnym (można usunąć) */
background-color: #1c1c1c; /* <<< kolor tła sekcji komentarzy w trybie nocnym */
}Stanowi to również dobry przykład odwołania się do elementu ID strony.
Po edycji kodu sekcja komentarzy wygląda następująco:
Warto jednak zaznaczyć, że zmieniona została jedynie sekcja komentarzy widoczna po włączeniu trybu nocnego. Jasna sekcja komentarzy pozostała bez zmian:
Pamiętaj, aby po wszystkim sprawdzić wygląd:
- Strony głównej
- Pojedynczego wpisu (również w odmianie z panelem bocznym – jeśli z nich korzystasz)
- Sekcji komentarzy
- Strony (również z panelem bocznym)
Wybór i ikon do włączania trybu nocnego strony
Wybrać ikony można w konfiguracji wtyczki WP Night Mode, w panelu personalizacji strony WordPress. Do wyboru ma się 5 domyślnych przycisków trybu nocnego.
Domyślne ikony mogą nie pasować do wyglądu strony, zatem idealnym rozwiązaniem wydaje się być edycja plików wtyczki w celu zmiany ikon/przycisków.
Edycja wtyczki WordPress – WP Night Mode
Aby dodać wybrane przyciski włączania trybu ciemnego strony, musimy edytować pliki wtyczki WP Night Mode. Nie będzie to trudne, jeśli mamy gotowy do wstawienia kod – już go przygotowałem.
Wariant drugi przycisku, podmienimy na taki jak na tej stronie.
Jako że będziemy korzystać z ikon przycisków pobieranych z zewnętrznej strony – może mieć to mały, ale zawsze jakiś wpływ na szybkość ładowania naszej strony (odwołanie do innego serwera > jego odpowiedź > załadowanie ikon na stronie).
A więc, w celu edycji – przejdź do zakładki w panelu wordpressa „Wtyczki” > „Edytor wtyczki„:
Wybierz teraz wtyczkę WP Night Mode do edycji, i zatwierdź przyciskiem „Wybierz„.
Następnie wśród plików wtyczki odnajdź plik nazwany „class-wp-night-mode-admin.php„, kliknij go.
Wyświetli ci się okno edycji wtyczki. Odnajdź teraz „case '2′ ” oraz jego zakończenie „break”:
W zaznaczonym miejscu nadpisz kod, przygotowanym tutaj:
case '2':
return '<div class="wpnm-button style-2'.$active_class.'">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
</svg>
</div>';
break;Całość powinna prezentować się następująco:
Pamiętaj, aby wszystko zapisać, przyciskiem „zaktualizuj” poniżej.
Teraz trzeba dopisać kod do dodatkowego CSS strony, aby ikonki zamieniały i działały jak przycisk ciemnego trybu.
/* inny wygląd ikonek dark mode */
.wp-night-mode-on .bi-sun-fill {
display: inline-block;
}
.wp-night-mode-on .bi-moon-fill {
display: none;
}
.bi-moon-fill {
display: inline-block;
cursor: pointer;
}
.bi-sun-fill {
display: none;
cursor: pointer;
}
.wpnm-button.style-2 {
font-size: 0px;
}
Należy jeszcze zmienić wariant przycisku w ustawieniach wtyczki (personalizacja strony > Night Mode) na „Style 2„.
Jeżeli wszystko zrobiłeś/aś poprawnie – powinien zacząć się wyświetlać nowy przycisk trybu nocnego strony. Taki jak tutaj.
Trybu nocny / ciemny implementacja na stronie WordPress – podsumowanie
Jak widać, implementacja ciemnego trybu może zająć chwilę, nawet doświadczonym webmasterom, gdyż każdy motyw jest napisany inaczej i nie musi się wszystko odbywać automatycznie. Jednak sama implementacja nie jest szczególnie trudna, gdy zna się podstawy HTML/CSS. Wszelkie opcje personalizacji trybu, dobrania odpowiednich kolorów itp., mogą sprawiać kłopot, ale jest to jak najbardziej wykonalne.
Pozdrawiam! Tomasz