Szybkie sposoby tworzenia niestandardowego paska przewijania w WordPress

Można śmiało powiedzieć, że z jakiegokolwiek powodu chcesz, aby Twoja witryna się wyróżniała. Posiadanie takiej platformy zapewni, że to, co robisz, pozostanie dłużej w umyśle odwiedzającego, a to prawie wyłącznie dobra rzecz. Oprócz treści na Twojej stronie, innym sposobem na zwrócenie uwagi na Twój produkt jest aspekt wizualny. To bynajmniej nie jest nowa wiedza. Nie bez powodu McDonald's jest czerwony i żółty, a Facebook niebieski. Jednak tutaj porozmawiamy o małej części doświadczenia, jakie oferuje Twoja witryna. Jest to część, która może nie wydawać się zbyt ważna, ale wierzymy, że nadal ma swoją wartość – pasek przewijania. W kilku następnych wierszach dowiesz się, jak szybko utworzyć niestandardowy pasek przewijania w WordPressie.

Proste sposoby tworzenia niestandardowego paska przewijania w WordPress

Tworzenie niestandardowego paska przewijania jest niezbędnym krokiem w tworzeniu niestandardowego motywu dla Twojej witryny. Jeśli więc interesuje Cię, aby Twoja witryna wyróżniała się pod każdym względem , pozwól, że przedstawimy Ci pierwszy sposób na sprawienie, by ten pasek przewijania był wyjątkowy.

Dodaj niestandardowy pasek przewijania w WordPress z wtyczką

Podobnie jak w przypadku większości rzeczy, które chcesz robić w WordPress, korzystanie z wtyczki jako sposobu na utworzenie zgrabnego paska przewijania jest dobrą drogą. Powodem, dla którego ta metoda jest wysoce zalecana dla większości użytkowników, jest jej prostota. Za pomocą kilku prostych kliknięć zobaczysz pasek przewijania, który pasuje do Twojego stylu. Mimo to warto wspomnieć o jednej drobnej wadzie związanej z tą metodą. Mianowicie ta wtyczka nie obsługuje przeglądarek mobilnych. Jeśli jednak nie wydaje się to dużą stratą, kontynuuj czytanie.

Przede wszystkim musisz zainstalować i aktywować wtyczkę Advanced Scrollbar . Ta akcja jest dość prosta:

1. Odwiedź wtyczki, a następnie przejdź do strony Dodaj nowy w obszarze administracyjnym WordPress. Wpisz nazwę wspomnianej wtyczki w pasku wyszukiwania i naciśnij Enter.
2. Po zlokalizowaniu wtyczki kliknij przycisk „Zainstaluj teraz”. WordPress następnie pobierze i zainstaluje wtyczkę. Po tym będziesz mógł zauważyć, że przycisk „Zainstaluj teraz” zmienił się w przycisk „Aktywuj”.
3. Kliknij przycisk „Aktywuj” i gotowe.

Teraz, gdy już zainstalowałeś i aktywowałeś niezbędną wtyczkę, będziesz musiał ją skonfigurować. Chociaż to słowo może brzmieć onieśmielająco, proces jest bardzo łatwy. Po prostu przejdź do Ustawienia> Ustawienia niestandardowego paska przewijania kolorów. Tam będziesz mógł zmienić kolor paska przewijania, a także kolory tła szyny. Następnie możesz wybrać krok przewijania myszy, który będzie szybkością przewijania kółka myszy. Świetne w tej wtyczce jest również to, że pozwala wybrać, czy chcesz automatycznie ukrywać pasek przewijania, czy zawsze go wyświetlać.

Masz również możliwość wybrania opcji „Tylko kursor”, która wyświetli pasek przewijania bez przycisku. Poniżej znajdziesz opcje ustawiania szybkości przewijania, zmiany wyrównania szyn (w lewo lub w prawo) oraz włączania zachowania dotykowego.

Po przejrzeniu wszystkich opcji, zabawie kolorami i znalezieniu kombinacji najlepiej odpowiadającej Twojemu stylowi i preferencjom, nie zapomnij kliknąć przycisku „zapisz zmiany”, aby zapisać całą tę pracę. Po wykonaniu tej czynności możesz odwiedzić swoją witrynę, aby zobaczyć te wspaniałe niestandardowe kolory paska przewijania w akcji.

Dodaj niestandardowe kolory paska przewijania w WordPress za pomocą CSS

Jak możesz wywnioskować z podtytułu, ta metoda używa CSS do stylizacji paska przewijania. Ta metoda sprawdziła się szybciej niż ta, w której używasz jQuery. Należy jednak wspomnieć, że działa tylko w przeglądarkach komputerowych korzystających z silników renderujących WebKit, takich jak Google Chrome, Safari i Opera. Niestety nie będzie to miało żadnego wpływu na przeglądarki mobilne ani Firefox i Edge na komputerach stacjonarnych. Mając to na uwadze, jeśli jest to opcja, którą chcesz wybrać, oto sposób, aby to zrobić.

Zacznij od przejścia do Motywy > Strona niestandardowa. Ta czynność uruchomi interfejs dostosowywania motywów WordPress. Będziesz mógł zobaczyć podgląd na żywo swojej witryny z wieloma opcjami na lewej płaszczyźnie ekranu . Kontynuuj, klikając kartę Dodatkowe CSS w lewym okienku. Zakładka będzie pokazywać proste pole, w którym będziesz mógł dodać niestandardowy kod CSS. Jak tylko dodasz prawidłową regułę CSS, zobaczysz, że została ona zastosowana w okienku podglądu na żywo w Twojej witrynie. Jeśli chodzi o tę poprawną regułę CSS, oto, co powinieneś dodać, aby pasek przewijania był podatny na zmiany:

::-webkit-scrollbar {

-Wygląd webkita: brak ;

}

::-webkit-scrollbar {

szerokość : 10px ;

}

::-webkit-scrollbar-track {

tło: #ffb400 ;

borger : 1px stałe #ccc ;

}

::-webkit-scrollbar-kciuk {

tło: #cc00ff ;

borger : 1px stałe #eee ;

wysokość : 100px ;

promień obramowania: 5px ;

}

::-webkit-scrollbar-thumb:hover {

tło: niebieskie ;

Pamiętaj, że każdy niestandardowy kod CSS, który dodajesz za pomocą dostosowywania motywu, jest dostępny tylko z tym konkretnym motywem. Jeśli zdarzy ci się zmienić motyw, ale chcesz zachować niestandardowy pasek przewijania, będziesz musiał skopiować i wkleić tę regułę CSS do nowego motywu przy użyciu tej samej metody.

Chociaż jest to świetny sposób na wyróżnienie Twojej witryny, musimy wspomnieć o jednym minusie tworzenia niestandardowego paska przewijania w WordPress. Mianowicie, domyślnie CSS nie zawiera zestawu reguł, który pozwalałby na zmianę właściwości paska przewijania. Istnieje kilka propozycji dodania tej opcji, ale obecnie nie są one obsługiwane przez większość przeglądarek. Aby rozwiązać ten problem, projektanci i programiści używają specyficznych dla przeglądarki pseudoelementów lub skryptu JavaScrip w celu zastąpienia domyślnego wyglądu paska przewijania. To są techniki, które wam opisaliśmy. Musisz jednak pamiętać, że musisz przetestować swoją witrynę z różnymi przeglądarkami i urządzeniami, aby upewnić się, że działa zgodnie z oczekiwaniami we wszystkich przeglądarkach. Gdy już to zrobisz, można śmiało powiedzieć, że wiesz, jak utworzyć niestandardowy pasek przewijania w WordPress.