Jak dodać niestandardowy pasek przewijania w WordPress

Czy zauważyłeś, jak niektóre strony internetowe mają te eleganckie, niestandardowe paski przewijania, które idealnie pasują do kolorów ich marki? 🤩

Zauważyliśmy tę funkcję. Wielu naszych użytkowników pytało nas, jak tworzyć te przyciągające wzrok niestandardowe paski przewijania na własnych stronach WordPress.

Dobra wiadomość? Dostosowanie paska przewijania WordPress jest znacznie łatwiejsze, niż mogłoby się wydawać. Niezależnie od tego, czy chcesz dopasować kolory swojej marki, poprawić nawigację, czy dodać profesjonalny akcent do swojej witryny, pokażemy Ci dokładnie, jak to zrobić. Nie wymaga znajomości kodowania!

Co powinieneś wiedzieć przed dodaniem niestandardowego paska przewijania 💡

Interesuje Cię dostosowanie paska przewijania WordPress. Ale zanim zaczniesz, jest kilka ważnych rzeczy, które powinieneś wiedzieć, aby upewnić się, że podejmujesz właściwą decyzję dla swojej witryny WordPress.

Po pierwsze, chociaż niestandardowe paski przewijania mogą wyglądać niesamowicie, nie wszystkie przeglądarki wyświetlają je w ten sam sposób. Nowoczesne przeglądarki, takie jak Chrome, dobrze je obsługują, ale inne mogą wykazywać ograniczone możliwości dostosowania lub żadnych – zwłaszcza na urządzeniach mobilnych.

Kluczem jest subtelne rozpoczęcie. Zawsze zalecamy rozpoczęcie od drobnych korekt pasujących do schematu kolorów Twojej marki, zamiast tworzenia krzykliwych projektów, które mogą odwracać uwagę od Twoich treści. Pamiętaj: pasek przewijania powinien poprawiać wrażenia użytkownika, a nie przyciągać całej uwagi.

Wykonany prawidłowo, ten element projektowania WordPress może nadać Twojej witrynie dodatkowy profesjonalny charakter. Pamiętaj tylko, aby przetestować swoje zmiany w różnych przeglądarkach, aby zapewnić spójne wrażenia dla wszystkich odwiedzających.

Teraz, gdy już wiesz, czego się spodziewać, przyjrzyjmy się, jak dodać niestandardowy pasek przewijania do swojej witryny WordPress. Po prostu użyj szybkich linków poniżej, aby przejść do metody, której chcesz użyć:

• Opcja 1: Użyj wtyczki Advanced Scrollbar (bezpłatna + łatwa)
• Opcja 2: Utwórz pasek przewijania CSS (zaawansowane)
• Dodatkowa wskazówka: Dodaj efekt przewijania do góry w WordPressie

Opcja 1: Użyj wtyczki Advanced Scrollbar (bezpłatna + łatwa)

Najprostszym sposobem na dostosowanie paska przewijania w WordPress jest użycie Advanced Scrollbar. Ta darmowa wtyczka pozwala na zmianę szerokości paska przewijania, koloru, prędkości przewijania i innych, bez konieczności pisania ani jednej linijki kodu.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Advanced Scrollbar. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Ustawienia » Ustawienia zaawansowanego paska przewijania.

Tutaj możesz zmienić wygląd paska przewijania, na przykład schemat kolorów i tło kolor tła.

Na poniższym obrazku stworzyliśmy niebieski pasek przewijania.

Możesz również zmienić krok przewijania myszy, wpisując nową liczbę w polu „Krok przewijania myszy”.

Niższa liczba spowoduje wolniejsze przewijanie witryny, a wyższa liczba spowoduje szybsze przewijanie.

Możesz również wybrać, czy chcesz automatycznie ukrywać pasek przewijania, tak aby pojawiał się tylko wtedy, gdy odwiedzający przewija stronę.

Może to być przydatne, jeśli stworzyłeś bardziej kolorowy pasek przewijania i martwisz się, że może on odwracać uwagę od reszty Twojej treści.

Domyślnie pasek przewijania pojawia się po prawej stronie okna przeglądarki. Możesz jednak przenieść go na lewą stronę, używając ustawień „Wyrównanie szyny”, jeśli wolisz.

Gdy będziesz zadowolony z konfiguracji paska przewijania, pamiętaj, aby kliknąć „Zapisz zmiany”, aby zachować swoje ustawienia.

Możesz teraz odwiedzić swojego bloga WordPress, aby zobaczyć niestandardowy pasek przewijania w akcji.

Opcja 2: Utwórz pasek przewijania CSS (zaawansowane)

Jeśli chcesz wprowadzić bardziej zaawansowane zmiany w swoim pasku przewijania, inną opcją jest użycie CSS.

Tworzenie niestandardowego paska przewijania za pomocą CSS pozwala dostosować każdą część elementu, ale działa tylko w przeglądarkach stacjonarnych korzystających z WebKit. Oznacza to, że Twoje zmiany nie będą widoczne we wszystkich przeglądarkach, w tym w przeglądarkach mobilnych.

Aby dostosować pasek przewijania za pomocą CSS, przejdź do Wygląd » Dostosuj.

W narzędziu dostosowywania WordPress kliknij „Dodatkowy CSS”.

Teraz możesz dodać swój kod do małego edytora, który się pojawi.

Oto przykład kodu, który zmienia wygląd paska przewijania:

::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
 
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
 
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
 
::-webkit-scrollbar-thumb:hover {
background: blue;
}

Możesz dodać dowolny kod. Aby uzyskać więcej informacji na temat CSS, zapoznaj się z naszym kompletnym przewodnikiem na temat jak dodać niestandardowy CSS do swojego motywu WordPress.

Kiedy będziesz zadowolony z kodu, kliknij przycisk „Opublikuj”. Możesz teraz odwiedzić swoją witrynę WordPress w przeglądarce WebKit, aby zobaczyć swoje zmiany w akcji.

Dodatkowa wskazówka: Dodaj efekt przewijania do góry w WordPressie

Oprócz tworzenia niestandardowego paska przewijania, możesz również dodać efekt przewijania do góry na swojej stronie WordPress. Może to być bardzo pomocne, jeśli masz dłuższe posty na blogu i chcesz zapewnić użytkownikom szybki sposób powrotu na górę.

Aby dodać tę funkcję, musisz zainstalować i aktywować wtyczkę WPFront Scroll Top. Szczegółowe instrukcje znajdziesz w naszym poradniku jak zainstalować wtyczkę WordPress.

Po aktywacji odwiedź stronę Ustawienia » Scroll Top z panelu WordPress i zaznacz pole „Włączone”, aby aktywować efekt przewijania do góry.

Po tym możesz edytować przesunięcie przewijania, rozmiar przycisku, przezroczystość, czas trwania zanikania, czas trwania przewijania i więcej stąd.

Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zachować ustawienia.

Pomyślnie dodałeś efekt przewijania do góry do swojej witryny. Bardziej szczegółowe instrukcje znajdziesz w naszym poradniku jak dodać płynny efekt przewijania do góry w WordPress przy użyciu jQuery.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać niestandardowy pasek przewijania w WordPress. Możesz również zapoznać się z naszymi najlepszymi wyborami dotyczącymi najlepszych kreatorów stron WordPress metodą przeciągnij i upuść oraz naszym ostatecznym przewodnikiem jak edytować stronę WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.