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.

Kluczowe kwestie dotyczące niestandardowych pasków przewijania:

• Kompatybilność przeglądarek: Podczas gdy nowoczesne przeglądarki, takie jak Chrome, Safari i Edge (przeglądarki oparte na WebKit dla CSS), dobrze obsługują niestandardowe paski przewijania, inne mogą oferować ograniczone możliwości dostosowania lub żadnych. Zawsze testuj swoje zmiany w różnych przeglądarkach, aby zapewnić spójne wrażenia.
• Ograniczenia urządzeń mobilnych: Na urządzeniach mobilnych tradycyjne paski przewijania są często zastępowane intuicyjnymi gestami dotykowymi (przesuwaniem). Oznacza to, że niestandardowe paski przewijania zazwyczaj nie będą wyświetlane na smartfonach ani tabletach.
• Doświadczenie użytkownika i dostępność: Twój pasek przewijania powinien ulepszać, a nie odwracać uwagę od Twoich treści. Zbyt krzykliwe lub trudne do zobaczenia projekty mogą negatywnie wpłynąć na nawigację użytkownika. Staraj się o subtelne dostosowania, które pasują do Twoich kolorów marki i poprawiają ogólny przepływ Twojej witryny.
• Wpływ na wydajność: Chociaż zazwyczaj jest minimalny, dodawanie wtyczek lub obszernego kodu CSS może nieznacznie wpłynąć na szybkość ładowania witryny. Wybieraj zoptymalizowane rozwiązania i utrzymuj czysty kod, aby zachować dobrą wydajność.
• Testowanie jest kluczowe: Niezależnie od wybranej metody, dokładnie przetestuj swój niestandardowy pasek przewijania na różnych przeglądarkach, urządzeniach i rozmiarach ekranu, aby upewnić się, że działa skutecznie.

Wykonany poprawnie, ten element projektu WordPress może nadać Twojej witrynie profesjonalny charakter, zachowując jednocześnie doskonałą użyteczność.

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)

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ć, jest zainstalowanie i aktywowanie wtyczki Advanced Scrollbar. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku, 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 kolor tła szyny.

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 przy użyciu pseudoelementów ::-webkit-scrollbar (jak w poniższym przykładzie) pozwala na dostosowanie wielu części elementu.

Jednak te konkretne reguły CSS działają głównie w przeglądarkach stacjonarnych opartych na WebKit, takich jak Chrome, Safari i nowy Microsoft Edge.

Oznacza to, że Twój niestandardowy pasek przewijania może nie być widoczny lub będzie wyglądał inaczej w innych przeglądarkach (takich jak Firefox) lub na większości urządzeń 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 wstawić dowolny kod. Aby uzyskać więcej informacji o CSS, zapoznaj się z naszym kompletnym przewodnikiem po tym, 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 witrynie WordPress. Może to być bardzo pomocne, jeśli masz dłuższe posty na blogu i chcesz zapewnić użytkownikom szybki sposób na powrót 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. Szczegółowe instrukcje znajdziesz w naszym poradniku, jak dodać płynne przewijanie do góry w WordPress.

Najczęściej zadawane pytania dotyczące dodawania niestandardowego paska przewijania w WordPress

Oto kilka pytań, które nasi czytelnicy często zadawali na temat dodawania niestandardowego paska przewijania w WordPress:

Jak dodać pasek przewijania w WordPress?

Pasek przewijania można dodać za pomocą niestandardowego kodu CSS lub wtyczki, takiej jak Advanced Scrollbar, która umożliwia przewijanie obszarów treści w postach, stronach lub widżetach w WordPress.

Jak wstawić suwak w WordPress?

Możesz wstawić suwak, używając wtyczki do tworzenia suwaków, takiej jak Soliloquy, tworząc swój suwak, a następnie dodając go do strony za pomocą bloku. Aby uzyskać więcej informacji, zapoznaj się z naszym poradnikiem, jak tworzyć responsywny suwak w WordPress.

Jaki jest najlepszy plugin do tworzenia sliderów dla WordPressa?

Soliloquy to najlepsza wtyczka do tworzenia suwaków w WordPress, ponieważ jest przyjazna dla początkujących, elastyczna i dobrze współpracuje z większością motywów i kreatorów stron.

Jak stworzyć niestandardowy baner?

Możesz użyć OptinMonster do stworzenia niestandardowego banera za pomocą gotowych szablonów. Wtyczka pozwala również na pełne dostosowanie treści, dodanie CTA i użycie różnych kolorów według własnego uznania. Szczegółowe instrukcje znajdziesz w naszym poradniku, jak zrobić baner w WordPress.

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 typu 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.