Zwiększenie atrakcyjności wizualnej twojej witryny WordPress może znacznie poprawić wrażenia użytkownika, a jednym z często pomijanych elementów jest pasek przewijania.
Konfigurator paska przewijania może dodać unikatowy akcent do twojej witryny, czyniąc ją bardziej atrakcyjną wizualnie i dostosowując ją do ogólnej estetyki projektu.
W WPBeginner napisaliśmy setki artykułów na temat projektowania WordPressa, a także wykorzystaliśmy różne funkcje konfiguratora, aby zwiększyć zaangażowanie na naszej witrynie internetowej.
Własny pasek przewijania może poprawić wygląd twojej witryny i sprawić, że nawigacja będzie płynniejsza i bardziej intuicyjna dla odwiedzających.
W tym artykule pokażemy, jak łatwo dodać własny pasek przewijania w WordPress.
Dlaczego warto dodać własny pasek przewijania w WordPress?
W 2018 r. WC3 opracowało propozycję, która umożliwiła klientom witryn internetowych dostosowanie wyglądu paska przewijania za pomocą CSS.
Obecnie wiele nowoczesnych przeglądarek obsługuje własne paski przewijania.
Mając to na uwadze, możesz zmienić pasek przewijania, aby lepiej pasował do schematu kolorów Twojej witryny lub brandingu. Wiele witryn internetowych używa również własnego paska przewijania, aby przyciągnąć uwagę odwiedzających, co może zwiększyć liczbę odsłon i zmniejszyć współczynnik odrzuceń.
Należy jednak pamiętać, że każda przeglądarka obsługuje własne paski przewijania w inny sposób. Wiele przeglądarek tylko częściowo obsługuje konfigurator, a niektóre w ogóle nie wyświetlają twojego własnego stylu.
Oznacza to, że ważne jest, aby przetestować twoją witrynę na różnych przeglądarkach i urządzeniach, aby zobaczyć, jak pasek przewijania wygląda w jak największej liczbie przeglądarek.
Powiedziawszy to, przyjrzyjmy się, jak dodać własny pasek przewijania w WordPress. Skorzystaj z poniższych odnośników, aby przejść do wybranej metody:
Metoda 1: Dodanie własnego paska przewijania w WordPressie za pomocą wtyczki (łatwe)
Najprostszym sposobem na dostosowanie paska przewijania jest użycie Advanced Scrollbar. Ta darmowa wtyczka umożliwia zmianę szerokości paska przewijania, koloru, szybkości przewijania i nie tylko bez konieczności pisania pojedynczej linii kodu.
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki Advanced Scrollbar. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu przejdź do Ustawienia ” Zaawansowane ustawienia paska przewijania.
Tutaj można zmienić schemat kolorów paska przewijania i kolor tła szyny.
Na poniższym obrazku utworzyliśmy niebieski pasek przewijania.
Można również zmienić krok przewijania myszy, wpisując nowy rodzaj liczby w polu „Krok przewijania myszy”.
Niższa liczba sprawi, że twoja witryna będzie przewijana wolniej, a wyższa liczba sprawi, że będzie przewijana szybciej.
Możesz także wybrać, czy chcesz automatycznie ukrywać pasek przewijania, aby pojawiał się tylko wtedy, gdy użytkownik przewija stronę.
Może to być przydatne, jeśli utworzyłeś bardziej kolorowy pasek przewijania i obawiasz się, że może on odwracać uwagę od reszty twojej treści.
Domyślnie pasek przewijania pojawia się po prawej stronie okna przeglądarki. Jeśli jednak wolisz, możesz przenieść go na lewą stronę za pomocą ustawień „Rail Align”.
Kiedy będziesz zadowolony z konfiguracji paska przewijania, pamiętaj, aby kliknąć „Zapisz zmiany”, aby zapisać twoje ustawienia.
Możesz teraz przejść na swoją witrynę internetową WordPress, aby zobaczyć własny pasek przewijania w działaniu.
Metoda 2: Dodawanie własnych kolorów paska przewijania w WordPress przy użyciu CSS
Jeśli chcesz dokonać bardziej zaawansowanych zmian w twoim pasku przewijania, to inną opcją jest użycie CSS.
Ta metoda pozwala dostosować każdą część paska przewijania, ale działa tylko w przeglądarkach stacjonarnych korzystających z WebKit. Oznacza to, że twoje zmiany nie będą widoczne na wszystkich przeglądarkach, w tym mobilnych.
Aby dostosować twój pasek przewijania za pomocą CSS, przejdź do Wygląd ” Dostosuj.
Uwaga: Jeśli korzystasz z motywu blokowego, ta opcja nie będzie dostępna. W takim przypadku możesz otworzyć konfigurator, wpisując adres URL https://example.com/wp-admin/customize.php. Pamiętaj, aby zastąpić example. com nazwą domeny twojej witryny.
W konfiguratorze WordPress kliknij „Dodatkowe CSS”.
Możesz teraz dodać twó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 dodawania własnych CSS do twojego motywu WordPress.
Kiedy będziesz zadowolony z twojego kodu, po prostu kliknij przycisk „Opublikuj”. Możesz teraz przejść na swojego bloga WordPress w przeglądarce WebKit, aby zobaczyć twoje zmiany w działaniu.
Bonus: Dodaj efekt przewijania do góry w WordPress
Oprócz utworzenia własnego paska przewijania, możesz również dodać efekt przewijania do góry na twojej witrynie WordPress. Może to być bardzo pomocne, jeśli masz dłuższe wpisy na blogu i chcesz zapewnić użytkownikom szybki sposób na powrót na górę.
Aby dodać tę funkcję, należy zainstalować i włączyć wtyczkę WPFront Scroll Top. Szczegółowe instrukcje można znaleźć w naszym poradniku na temat instalacji wtyczki WordPress.
Po włączaniu, przejdź na stronę Ustawienia ” Przewiń do góry z kokpitu WordPress i zaznacz pole „Włączone”, aby włączyć efekt przewijania do góry.
Następnie można tutaj edytować przesunięcie przewijania, rozmiar przycisku, krycie, czas zanikania, czas przewijania i inne.
Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać twoje ustawienia.
Udało ci się dodać efekt przewijania do góry do twojej witryny internetowej. Aby uzyskać bardziej szczegółowe instrukcje, zapoznaj się z naszym poradnikiem na temat dodawania efektu płynnego przewijania do góry w WordPress.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać własny pasek przewijania w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia strony docelowej w WordPress lub zobaczyć nasze wybory ekspertów dotyczące najlepszych kreatorów stron typu „przeciągnij i upuść„.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Marcos
Thank you! The CSS is plug&play.
WPBeginner Support
Glad to hear our guide was helpful!
Administrator
Luqman Essam
THank You! It helped me!
WPBeginner Support
Glad our guide was helpful!
Administrator
Victor
Is there any plugin for WP that will display sequential art as in a comic strip where installments can be posted on a weekly basis?
WPBeginner Support
You may want to take a look at our guide on managing a post series: https://www.wpbeginner.com/plugins/how-to-effeciently-manage-post-series-in-wordpress/
Administrator
ash
it not working very fine on some websites, depends to the themes that the website uses, it might even hide the scroll bar and make the website loading time more than normal, i suggest using a CSS code it’s easy to use and customizable as well … i give a sample ans you guys just modify it as your own
===
::-webkit-scrollbar {
width: 14px;
background-color: silver;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: silver;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background-color: #0099cc;
}
Vas
Excellent…The cleanest solution.
It would be nice to post the code for Firefox…if there is such option.
Thanks for sharing.
WPBeginner Staff
There might be someway to override it through a custom css. Please contact plugin’s support.
Karen
What a fun plugin. I just installed it. Is there any way to control the opacity – of the color of the scrollbar when you aren’t hovered over it? Thanks for this post!
WPBeginner Staff
Thank you for notifying us. Fixed it.
Vernon Trent
please correct your link to the plugin.
there is a missing S in the url „pluginS”
Guest
Hi the link in the post seems broken may affect your site rank.
Please place correct link for „Dewdrop Custom Scrollbar” plugin.