Jak dodać niestandardowy pasek przewijania w WordPress

Czy chcesz dodać niestandardowy pasek przewijania w WordPress? Zmiana wyglądu paska przewijania może pomóc Ci wyróżnić się szczególnie podczas tworzenia niestandardowego motywu dla Twojej witryny.

W tym artykule pokażemy, jak łatwo dodać niestandardowy pasek przewijania w WordPress. Pokażemy Ci dwa rozwiązania i możesz wybrać jedno, które działa najlepiej dla ciebie.

Problemy z niestandardowymi kolorami paska przewijania

Domyślnie CSS nie zawiera zestawu reguł, który pozwalałby na zmianę Właściwości paska przewijania. Istnieje kilka propozycji, aby to dodać, ale nie są one obsługiwane przez większość przeglądarek w tej chwili.

Aby temu zaradzić, projektanci i programiści używają specyficznych dla przeglądarki elementów pseduo lub JavaScript, aby zastąpić domyślny wygląd paska przewijania.

Pokażemy Ci obie techniki. Pamiętaj jednak, że musisz przetestować swoją witrynę za pomocą różnych przeglądarek i urządzeń, aby upewnić się, że działa poprawnie we wszystkich przeglądarkach.

Mając to na uwadze, przyjrzyjmy się, jak dodać niestandardowe kolory paska przewijania w WordPress.

Metoda 1. Dodaj niestandardowy pasek przewijania w WordPress z wtyczką

Ta metoda jest łatwiejsza i zalecana dla większości użytkowników. Jednak nie obsługuje przeglądarek mobilnych.

Po pierwsze, co musisz zrobić, to zainstalować i aktywować zaawansowaną wtyczkę Scrollbar. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz udać się do Ustawienia ” Ustawienia Niestandardowego Paska Przewijania Kolorów strona do konfiguracji wtyczki.

W tym miejscu możesz zmienić kolor paska przewijania i kolory tła paska przewijania. Następnie możesz wybrać krok przewijania myszy, który jest prędkością przewijania kółka myszy.

Możesz także wybrać, czy chcesz automatycznie ukrywać pasek przewijania, Czy zawsze go wyświetlać.

Masz opcję Wybierz opcję „Tylko kursor”, która wyświetli szynę paska przewijania, ale nie przycisk.

Poniżej znajdują się opcje pozwalające ustawić prędkość przewijania, zmienić wyrównanie szyny (w lewo lub w prawo) i włączyć zachowanie dotyku.

Nie zapomnij kliknąć przycisku zapisz zmiany, aby zapisać swoje ustawienia.

Możesz teraz odwiedzić swoją witrynę, aby zobaczyć niestandardowe kolory paska przewijania w akcji.

Metoda 2. Dodaj niestandardowe kolory paska przewijania w WordPress za pomocą CSS

Ta metoda używa CSS do stylizacji paska przewijania, co jest szybsze niż użycie jQuery.

Działa jednak tylko w przeglądarkach stacjonarnych z silnikiem renderującym WebKit, takim jak Google Chrome, Safari, Opera i inne.

Nie będzie to miało żadnego wpływu na przeglądarki mobilne lub Firefox i Edge na komputerach stacjonarnych.

Będziesz musiał dodać następujący Niestandardowy CSS do swojego motywu WordPress.

::- webkit-scrollbar {
    - WebKit-wygląd: brak;
}
::- webkit-scrollbar {
  / width = 10px / ;
}

::- webkit-scrollbar-track {
  background: # ffb400; 
	border: 1px solid # ccc;
}

::- webkit-scrollbar-thumb {
  background: # cc00ff; 
	border: 1px solid #eee;
	wysokość: 100px;
	border-radius:5px;
}

::- webkit-scrollbar-thumb:hover {
  tło: niebieski; 
}

Możesz zmieniać kolory i inne właściwości CSS.

Gdy będziesz zadowolony, nie zapomnij zapisać zmian. Następnie możesz wyświetlić podgląd w obsługiwanej przeglądarce.

Tak to wyglądało na naszej stronie demonstracyjnej podczas przeglądania w Google Chrome na komputerze Mac.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać niestandardowy pasek przewijania w WordPress. Możesz również zobaczyć nasz przewodnik, jak łatwo stworzyć niestandardowy motyw WordPress bez pisania kodu.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.