Czy twoja witryna WordPress wygląda niechlujnie? Czy masz długie menu, duże panele boczne lub treści, które nie są dobrze dopasowane? Własny pasek przewijania może pomóc poprawić te problemy.
Niestety, nie jest łatwo znaleźć prostą wtyczkę do tego celu. Niektóre inne przewodniki sugerują również użycie kodu, ale może to być przerażające, jeśli jesteś nowy. Ale nie musi tak być.
Zbudowaliśmy setki witryn internetowych, w tym dla naszych własnych marek, więc wiemy, jak szybko, sprawnie i łatwo dodawać paski przewijania.
W tym przewodniku pokażemy, jak dodać własny pasek przewijania do dowolnej części twojej witryny za pomocą kreatora stron. Jeśli nie odpowiada to twoim potrzebom, możesz zapoznać się z naszą przyjazną dla początkujących metodą dodawania własnego paska przewijania za pomocą CSS.
![How to Start Your Online Nutrition Business Website How to Add a Custom Scrollbar to Any Element in WordPress](https://www.wpbeginner.com/wp-content/uploads/2015/07/add-custom-scrollbar-to-any-element-in-post.png)
Kiedy dodać pasek przewijania do określonych elementów na twojej witrynie WordPress?
Dodanie paska przewijania dla elementów WordPressa może znacznie poprawić wrażenia użytkownika twojej witryny. Ale kiedy należy korzystać z tej funkcji?
Załóżmy, że prowadzisz bloga o modzie z wieloma kategoriami. Twoje menu główne może zawierać listę rozwijaną „Odzież” z ponad 20 podkategoriami. Bez paska przewijania to menu może rozciągać się na całą twoją stronę, spychając inne treści z pola widzenia.
A jeśli masz dużo treści na twoim panelu bocznym, czasami może być trudno wybrać, które z nich wyeliminować. Posiadanie paska przewijania dla długiego widżetu paska bocznego może rozwiązać ten problem.
![paste-code-for-google-library An example of a scrollbar in a sidebar](https://www.wpbeginner.com/wp-content/uploads/2024/07/scrollbar-example-min.png)
Inne przypadki użycia obejmują długie, szczegółowe opisy na stronach produktów, sekcje komentarzy z setkami komentarzy lub galerię obrazków z ograniczoną ilością miejsca.
Mając to na uwadze, pokażemy ci dwie opcje dodania własnego paska przewijania do dowolnego elementu na twojej witrynie internetowej WordPress.
Zalecamy wybranie opcji 1, jeśli dopiero zaczynasz swoją witrynę i chcesz korzystać z konfiguratora stron z własną funkcją paska przewijania. Wynika to z faktu, że jeśli korzystałeś już z innego motywu, będziesz musiał zmienić swój motyw dla tej metody.
Z drugiej strony, jeśli podoba ci się twój obecny, aktualny motyw, możesz wybrać opcję 2, aby dodać własny pasek przewijania za pomocą kodu CSS. Nie martw się, podzielimy ten proces krok po kroku, aby każdy mógł go łatwo śledzić.
Możesz skorzystać z poniższych odnośników, aby przejść do Twojej preferowanej metody:
Uwaga: Czy zamiast tego chcesz zmienić pasek przewijania całej witryny internetowej WordPress? W takim razie zapoznaj się z naszym przewodnikiem na temat dodawania własnego paska przewijania w WordPress.
Metoda 1: Użycie Thrive Architect do dodania własnego paska przewijania (bez kodu)
Jednym ze sposobów dodania własnego paska przewijania w określonym elemencie jest użycie konfiguratora stron z funkcją paska przewijania. W ten sposób można łatwo dostosować pasek przewijania bez dotykania jakiegokolwiek kodu.
W tej metodzie wykorzystamy Thrive Architect. Oprócz funkcji paska przewijania, Thrive Architect posiada ponad 300 szablonów do szybkiego tworzenia profesjonalnie wyglądających stron i dynamicznych treści, które spersonalizują doświadczenia twoich odwiedzających.
Interfejs „przeciągnij i upuść” jest przyjazny dla użytkownika, dzięki czemu jest idealny dla osób początkujących w WordPress. Aby uzyskać bardziej szczegółowe informacje na temat tego narzędzia, zapoznaj się z naszą recenzją Thrive Architect.
Chociaż Thrive Architect nie oferuje darmowej wersji, możesz skorzystać z naszego specjalnego kodu rabatowego Thrive Themes, aby zaoszczędzić do 50% na początkowym zakupie.
Krok 1: Konfiguracja Thrive Architect i motywów Thrive
Aby rozpocząć, musimy zainstalować wtyczkę Thrive Architect. Dostęp do niej można uzyskać logując się na twoje konto na witrynie internetowej Thrive Themes.
Następnie pobierz i zainstaluj wtyczkę Thrive Product Manager. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczek WordPress dla początkujących.
![Install Thrive Product Manager Install Thrive Product Manager](https://www.wpbeginner.com/wp-content/uploads/2019/05/install-thrive-product-manager.png)
Po włączaniu wtyczki przejdź do Menedżera produktów w twoim kokpicie WordPress.
Kliknij „Zaloguj się na moje konto”, aby odnośnik do Twojej witryny WordPress został połączony z Twoim kontem Thrive Themes.
![Log into your Thrive Themes account Log into your Thrive Themes account](https://www.wpbeginner.com/wp-content/uploads/2023/11/login-to-thriveproductmanager.png)
Powinieneś teraz zobaczyć listę produktów Thrive Themes dostępnych na twoim koncie.
Znajdź „Thrive Architect” i zaznacz pole „Zainstaluj produkt”.
![Motywy WordPress Installing Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2022/05/product-manager-install-product-min.jpg)
Przewiń w dół, aby znaleźć„Thrive Theme Builder” i wybierz opcję „Zainstaluj motyw”.
Następnie kliknij „Zainstaluj wybrane produkty”. Ten krok jest konieczny, ponieważ Thrive Architect współpracuje z Thrive Theme Builder.
![Wtyczki WordPress Installing the Thrive Theme Builder](https://www.wpbeginner.com/wp-content/uploads/2022/05/product-manager-install-theme-min.jpg)
Następny ekran pokaże Thrive Product Manager instalujący i włączający Thrive Theme Builder.
Po zakończeniu wybierz opcję „Przejdź do kokpitu twórcy motywu”.
![Polecane rozwiązania WordPress Activating Thrive Architect and Thrive Theme Builder](https://www.wpbeginner.com/wp-content/uploads/2022/05/go-to-theme-builder-dashboard-min.jpg)
Teraz nadszedł czas, aby wybrać podstawowy projekt dla twojej witryny, korzystając z biblioteki motywów Thrives.
Jeśli nie masz pewności, który motyw wybrać, użyj przycisku „Podgląd”, aby zobaczyć, jak wygląda każdy z nich. Po podjęciu decyzji kliknij „Wybierz”.
![Popularne wyszukiwania Choosing a Thrive Theme Builder theme](https://www.wpbeginner.com/wp-content/uploads/2022/05/choose-theme-min.jpg)
Teraz wpiszesz Kreator tworzenia motywu.
Ten kreator poprowadzi cię przez proces wgrywania twojego logo, wybierania kolorów marki dla twojego motywu oraz konfigurowania różnych struktur i szablonów motywów.
Upewnij się, że ukończyłeś kreatora konfiguracji przed przejściem do następnego kroku.
![Rozpocznij już teraz! Thrive Theme Builder's setup wizard](https://www.wpbeginner.com/wp-content/uploads/2022/05/theme-builder-wizard-min.jpg)
Krok 2: Dodaj element treści do twojego motywu
Dodajmy teraz element treści do twojego motywu WordPress, który domyślnie posiada funkcję paska przewijania.
W Thrive Themes treść jest blokiem, którego można użyć jako kontenera do grupowania wielu bloków. Może to być przydatne, jeśli chcesz, aby zestaw elementów był stylizowany w ten sam sposób lub zarządzany jako grupa.
W tym przykładzie dodamy treść zawierającą długą listę wpisów na blogu. W tym scenariuszu chcemy mieć możliwość wyświetlania wszystkich kategorii na panelu bocznym bez nadmiernego wydłużania go.
Najpierw przejdź na dowolną stronę lub wpis na twoim blogu WordPress, na którym chcesz mieć pasek przewijania.
Następnie na górnym pasku narzędzi administratora kliknij „Edytuj szablon motywu [nazwa]” lub „Edytuj za pomocą Thrive”.
![yith-compare-category-min Editing a WordPress website with Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2015/07/edit-thrive-min.png)
Powinieneś teraz przejść do interfejsu edycji Thrive Architect. Aby dodać blok treści, kliknij znak „+” po prawej stronie i wybierz element „Content Box”.
Następnie przeciągnij i upuść go w dowolnym miejscu, w którym chcesz umieścić element z paskiem przewijania.
![Product comparison by category feature from YITH WooCommerce Compare Adding a Content Box element in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2015/07/content-box-min.png)
Możesz teraz dodać więcej elementów treści do pola treści. Na przykład możesz ponownie kliknąć znak „+” i dodać do niego blok „Tekst”. Następnie możesz wpisać w nim dowolny rodzaj tekstu.
Thrive Themes oferuje mnóstwo elementów wizualnych, od podstawowych, takich jak tekst i obrazki, po formularze i tabele cenowe.
![YITH WooCommerce Compares customization options Adding a Text box element in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2015/07/text-box-min.png)
Ponieważ chcemy dodać listę kategorii do panelu bocznego, dodamy również element „Dynamic Styled List” do pola treści.
Ten blok zasadniczo pobiera dane z twojej witryny internetowej, aby dynamicznie wyświetlać listę, taką jak kategorie, tagi lub autorzy. Blok będzie się automatycznie aktualizował w miarę rozwoju twojej witryny internetowej.
![Editing the social sharing text for product comparison table with YITH WooCommerce Compare Adding a Dynamic Styled List element in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2015/07/dynamic-styled-list-min.png)
Po przeciągnięciu i upuszczeniu listy dynamicznej do pola treści, kliknij przycisk „Wybierz rodzaj listy”.
Następnie kliknij „Lista kategorii”.
![yith-compare-related-products-min Choosing a list type to display in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2015/07/select-list-type-min.png)
Teraz twoja lista kategorii, blok tekstowy i wszelkie inne elementy dodane do pola treści znajdują się w tym samym kontenerze.
Jak widać, lista jest dość długa, dlatego chcemy dodać do niej pasek przewijania.
Krok 3: Włącz pasek przewijania w polu treści
Jeśli wybierzesz ten kontener i klikniesz na niebieską strzałkę po lewej stronie, zobaczysz wiele opcji pozwalających na dostosowanie twojej treści.
![studio-assistant-min 1 Configuring the Content Box settings in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2015/07/content-box-settings-min-1.png)
Ustawienia umożliwiające dodanie paska przewijania znajdują się na karcie „Układ i pozycja”. W tym miejscu można dostosować dopełnienie, margines, szerokość, wysokość, wyrównanie i tak dalej.
Pierwszą rzeczą, którą zrobiliśmy, było kliknięcie białej strzałki wewnątrz niebieskiego obszaru dopełnienia, tuż pod sekcją „Marginesy i dopełnienie”. Zrobiliśmy to tylko po to, aby upewnić się, że panel boczny z treścią jest wyrównany z resztą elementów.
Zachęcamy do zapoznania się z innymi opcjami, aby upewnić się, że twój box wygląda proporcjonalnie.
![YITH WooCommerce Compares product comparison counter Opening the Layout and Position menu in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2015/07/padding-thrive.gif)
Następnie przewińmy w dół do sekcji Wysokość. Kliknij przycisk „Max” i zmień wysokość w pikselach na znacznie mniejszą. W tym przypadku przeszliśmy z 617px do 300px.
Spowoduje to znaczne skrócenie pola treści i zniknięcie nazw kategorii w dolnej sekcji.
![Choosing which social network buttons to show below the table with YITH WooCommerce Compare Setting a max height for the Content Box in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2015/07/content-box-max-height-min.png)
Po wykonaniu tej czynności ponownie przesuń panel w dół i otwórz kartę „Zaawansowane”. Następnie wybierz „Przewijanie” w ustawieniach przepełnienia i włącz opcję „Stylowy pasek przewijania”.
Pasek przewijania powinien zostać automatycznie dodany do twojego bloku treści.
![yith-compare-social-share-min Enabling the custom scrollbar in Thrive Architect](https://www.wpbeginner.com/wp-content/uploads/2015/07/content-box-advanced-min.png)
To wszystko, jeśli chodzi o dodawanie własnego paska przewijania za pomocą Thrive Architect. Możesz kontynuować edycję twojego motywu WordPress, strony lub wpisu lub kliknąć „Zapisz pracę” na dole, aby opublikować zmiany.
Oto jak wygląda nasz scrollbar na witrynie demonstracyjnej:
![Creating a custom product comparison table shortcode with YITH WooCommerce Compare Thrive Architect's custom scrollbar example](https://www.wpbeginner.com/wp-content/uploads/2015/07/scrollbar-thrive-example.gif)
Metoda 2: Wykorzystanie kodu CSS do stworzenia własnego paska przewijania
Jeśli zmiana twojego motywu WordPress i użycie konfiguratora stron w celu utworzenia własnego paska przewijania to za dużo, możesz zamiast tego użyć kodu CSS. Ta metoda pozwala dostosować pasek przewijania bezpośrednio na twojej stronie WordPress.
Nie martw się, jeśli dopiero zaczynasz pracę z fragmentami kodu. Przeprowadzimy cię przez ten proces krok po kroku, ułatwiając włączanie tej funkcji na twojej witrynie WordPress.
Najpierw zrozummy, jak działa CSS. CSS to skrót od Cascading Style Sheets (kaskadowe arkusze stylów). Jest to język, który mówi przeglądarkom internetowym, jak wyświetlać elementy na stronie internetowej. W naszym przypadku użyjemy CSS do dodania i stylizacji własnego paska przewijania.
Aby użyć własnego CSS, potrzebujemy dwóch rzeczy:
- Klasa CSS: To jest jak tag nazwy dla elementu na twojej stronie. Dodajemy ją do elementu, który chcemy zmienić.
- Kod CSS: Jest to zestaw instrukcji, który mówi przeglądarce, jak stylizować element za pomocą klasy CSS.
Tak więc, aby dodać własny pasek przewijania, najpierw nadamy klasę CSS elementowi, który chcemy zmienić. Następnie dodamy kod CSS, który utworzy pasek przewijania dla elementów z tą klasą.
Dodasz klasę CSS scroll-bar
do twojego elementu. Poniżej pokażemy, jak to zrobić. A to jest pełny fragment kodu CSS, który doda pasek przewijania:
.scroll-bar {
max-height: 100px; /* Adjust the maximum height as needed */
width:250px; /* Adjust the width as needed */
overflow-y: scroll; /* Enable vertical scrolling */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Customizing the vertical scrollbar for Webkit-based browsers (Chrome, Safari) */
.scroll-bar::-webkit-scrollbar {
width: 10px; /* Width of the vertical scrollbar */
}
.scroll-bar::-webkit-scrollbar-track {
background: #eaeaea; /* Background of the scrollbar track */
}
.scroll-bar::-webkit-scrollbar-thumb {
background: grey; /* Color of the scrollbar thumb */
border-radius: 15px; /* Rounded corners for the thumb */
}
/* Hover state for the scrollbar thumb */
.scroll-bar::-webkit-scrollbar-thumb:hover {
background: black; /* Change color when hovered */
}
/* For Firefox */
.scroll-bar {
scrollbar-width: thin; /* Define scrollbar width */
scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb and track color */
}
Krok 1: Dodaj klasę CSS do twojego elementu
Istnieje kilka sposobów na dodanie klasy CSS do elementu na twojej witrynie WordPress.
Jeśli jesteś w edytorze bloków lub edytorze całej witryny, możesz po prostu kliknąć dowolny blok na twojej stronie, wpisie lub szablonie motywu bloku. Następnie na panelu bocznym ustawień bloku otwórz kartę „Zaawansowane” i wstaw twoją klasę CSS w polu „Dodatkowe klasy CSS”.
Po zakończeniu kliknij przycisk Aktualizuj, Publikuj lub Zapisz.
![studio-add-first-site-min Adding a CSS class in the full-site editor](https://www.wpbeginner.com/wp-content/uploads/2015/07/additional-css-classes-editor-min.png)
Jeśli korzystasz z klasycznego motywu, proces ten działa również w przypadku edytora widżetów opartego na blokach. Przejdź do Wygląd ” Widżety i kliknij dowolny blok, do którego chcesz dodać klasę CSS.
Następnie zobaczysz tę samą kartę Zaawansowane na panelu bocznym ustawień bloku. Wystarczy wpisz klasę CSS w polu „Dodatkowe klasy CSS”, tak jak wcześniej.
![studio-start-min Adding a CSS class in the widget editor](https://www.wpbeginner.com/wp-content/uploads/2015/07/css-classes-widget-min.png)
Krok 2: Dodaj kod CSS do twojego motywu
Teraz przejdźmy dalej i dodajmy nasz własny kod CSS. Pokażemy ci 3 sposoby, aby to zrobić: za pomocą konfiguratora motywu, edytora na całej witrynie i WPCode.
Pierwsza opcja jest przeznaczona dla użytkowników klasycznych motywów. Ponadto jest to funkcja wbudowana, więc nie potrzebujesz wtyczki, aby wstawić kod lub nawet otworzyć pliki twojego motywu.
Aby to zrobić, możesz otworzyć konfigurator motywu WordPress, przechodząc do Wygląd ” Dostosuj.
![Launch WordPress theme customizer Launch WordPress theme customizer](https://www.wpbeginner.com/wp-content/uploads/2023/11/wordpress-customizer-theme.png)
Uwaga: Jeśli nie widzisz tego ustawienia na twoim WordPressie, to prawdopodobnie używasz motywu blokowego i zamiast tego możesz użyć następnej metody. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat poprawki brakującego konfiguratora motywów w WordPress.
Metoda 1: Dodawanie CSS do klasycznych motywów
Wewnątrz konfiguratora znajdź i kliknij „Dodatkowy CSS”.
![Opening the Additional CSS tab in Theme Customizer Opening the Additional CSS tab in Theme Customizer](https://www.wpbeginner.com/wp-content/uploads/2017/11/additional-css-min-new.png)
Tutaj wystarczy wkleić kod, który pokazaliśmy wcześniej.
Po dodaniu kodu automatycznie zobaczysz zmiany w twoim motywie.
![Configuring the local WordPress environment with Local WP Creating a scrollbar in a classic theme with CSS](https://www.wpbeginner.com/wp-content/uploads/2015/07/additional-css-scrollbar-regular-min.png)
Jak widać, element, do którego dodano klasę CSS, ma teraz pasek przewijania. Następnie możesz po prostu kliknąć „Opublikuj”.
Metoda 2: Dodawanie CSS za pomocą edytora całej witryny
Jeśli masz motyw blokowy, będziesz musiał dodać kod CSS za pomocą edytora całej witryny, a następnie po prostu przejść do Wygląd „ Edytor.
![Selecting the Full-Site Editor from the WordPress admin panel Selecting the Full-Site Editor from the WordPress admin panel](https://www.wpbeginner.com/wp-content/uploads/2023/11/wordpress-fse-dashboard-min.png)
Znajdziesz tu kilka opcji menu, dzięki którym dostosujesz swój własny motyw blokowy.
Tutaj kliknij „Style”.
![Opening the Styles menu in Full Site Editor Opening the Styles menu in Full Site Editor](https://www.wpbeginner.com/wp-content/uploads/2024/02/fse-styles-min-new.png)
Na tej stronie powinno znajdować się kilka motywów blokowych do wyboru.
Zignorujemy to i klikniemy przycisk „Edytuj”. Ma on kształt ołówka.
![Clicking the Edit Styles button in the Full Site Editor Clicking the Edit Styles button in the Full Site Editor](https://www.wpbeginner.com/wp-content/uploads/2024/02/fse-edit-styles-min.png)
Znajdujesz się teraz w interfejsie edycji.
W prawym panelu kliknij menu z trzema kropkami obok ikonki wersji i wybierz „Dodatkowy CSS”.
![studio-admin-min Opening the Additional CSS menu in full-site editor](https://www.wpbeginner.com/wp-content/uploads/2015/07/additional-css-menu-editor-min.png)
Teraz wystarczy wkleić fragment kodu z wcześniej. Twoje zmiany powinny pojawić się automatycznie.
Po zakończeniu kliknij „Zapisz”.
![studio-settings-min Inserting custom CSS in full-site editor](https://www.wpbeginner.com/wp-content/uploads/2015/07/additional-css-editor-min.png)
Jedną z wad korzystania z konfiguratora motywu i edytora pełnej witryny do wstawienia własnego kodu CSS jest to, że jeśli zdecydujesz się zaktualizować lub zmienić swój motyw, możesz ryzykować utratę dostosowanego kodu CSS.
Dlatego zalecamy korzystanie z WPCode do edycji CSS twojej witryny, zwłaszcza jeśli korzystasz z edytora całej witryny i motywu opartego na blokach. Możesz postępować zgodnie z poniższą metodą, która będzie działać również z klasycznymi motywami.
Metoda 3: Dodawanie CSS za pomocą WPCode
Jeśli boisz się konfigurować swoją witrynę za pomocą kodu, WPCode jest idealnym rozwiązaniem dla Ciebie. Ta wtyczka fragmentu kodu umożliwia bezpieczne wstawienie własnego kodu, ponieważ nie będziesz musiał bezpośrednio wchodzić w interakcje z plikami twojego motywu.
Jeśli wystąpi błąd, WPCode automatycznie wykryje i wyłączy kod, który powoduje problem. W ten sposób szansa na uszkodzenie twojej witryny jest minimalna.
Najpierw zainstaluj wtyczkę WPCode na twojej witrynie internetowej. Możesz przeczytać nasz przewodnik dla początkujących, jak zainstalować wtyczkę WordPress, aby uzyskać więcej informacji.
Następnie przejdź do sekcji Fragmenty kodu „ + Dodaj fragment kodu w twoim kokpicie WordPress. Wybierz „Add Your Custom Code (New Snippet)” i kliknij „+ Add Custom Snippet”.
![Jak przeprowadzić badanie słów kluczowych dla twojego bloga WordPress Adding a new custom code snippet in WPCode](https://www.wpbeginner.com/wp-content/uploads/2022/03/wpcode-add-custom-code-min.jpg)
Teraz nadaj swojemu nowemu fragmentowi kodu nazwę. Może to być coś prostego, jak „CSS Scrollbar”.
Następnie zmień fragment kodu na „CSS Snippet”.
![studio-share-min Inserting custom CSS to create a scrollbar in WPCode](https://www.wpbeginner.com/wp-content/uploads/2015/07/css-scrollbar-wpcode-min.png)
W oknie podglądu kodu wklej fragment kodu, który pokazaliśmy wcześniej.
Po zakończeniu przewiń stronę w dół do sekcji „Wstaw”. Tam upewnij się, że Metoda wstawienia to „Automatyczne wstawianie”, a Lokalizacja to „Nagłówek całej witryny”.
Po wykonaniu tej czynności wystarczy przełączyć przycisk w prawym górnym rogu tak, aby był włączony i kliknąć „Zapisz fragment kodu”.
![Choosing Site Wide Header as the code location in WPCode Choosing Site Wide Header as the code location in WPCode](https://www.wpbeginner.com/wp-content/uploads/2023/12/wpcode-site-wide-header-min.png)
Powinieneś teraz zobaczyć pasek przewijania na elemencie, do którego dodałeś klasę CSS.
Oto przykład dodania paska przewijania do listy ostatnich wpisów:
![Creating a new local WordPress site with Local WP Example of a scrollbar made with CSS](https://www.wpbeginner.com/wp-content/uploads/2015/07/css-scrollbar-example.gif)
Jak dodać własny pasek przewijania do pozycji menu z wieloma podmenu?
Jedną z rzeczy, które ciekawią czytelników jest to, jak dodać pasek przewijania do twojego elementu menu nawigacyjnego, który ma długą listę podmenu.
Proces ten jest w rzeczywistości bardzo podobny do tego, który właśnie pokazaliśmy. Istnieją jednak pewne drobne modyfikacje tu i tam, w zależności od używanego motywu.
Jeśli używasz klasycznego motywu, powinieneś dodać klasę paska przewijania
tylko do twojego głównego elementu menu. Nie musisz dodawać jej do twojego podmenu.
Aby dodać klasę CSS do twojego menu, możesz otworzyć konfigurator motywu.
Następnie kliknij przycisk „Menu”.
![Selecting Menus in Theme Customizer Selecting Menus in Theme Customizer](https://www.wpbeginner.com/wp-content/uploads/2017/11/customizer-menus-min.png)
Następnie kliknij ikonę koła zębatego „Ustawienia”, a następnie wybierz „Klasy CSS”.
Umożliwia to dodanie klasy CSS do każdej pozycji menu.
![Adding CSS classes to menu items Adding CSS classes to menu items](https://www.wpbeginner.com/wp-content/uploads/2017/11/menus-css-classes-min.png)
Teraz przesuń panel boczny w dół.
Następnie otwórz twoje menu główne.
![Selecting the primary menu in Theme Customizer Selecting the primary menu in Theme Customizer](https://www.wpbeginner.com/wp-content/uploads/2017/11/customizer-primary-menu-min.png)
Na tym etapie możesz wybrać pozycję menu, do której chcesz dodać klasę CSS i kliknąć, aby ją rozwinąć.
Powinno tam znajdować się pole o nazwie „Klasy CSS”, do którego można dodać klasę.
![local-wp-final-min Adding a CSS class to menu item in WordPress theme customizer](https://www.wpbeginner.com/wp-content/uploads/2015/07/scroll-bar-menu-customizer-min.png)
Poza tym upewnij się, że dodajesz klasę podmenu
po każdej wzmiance o klasie paska przewijania
w twoim kodzie CSS, na przykład w ten sposób:
.scroll-bar .sub-menu {
max-height: 100px; /* Adjust the maximum height as needed */
overflow-y: scroll; /* Enable vertical scrolling */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */
Oto jak powinno wyglądać menu nawigacyjne:
![local-wp-start-min Adding a scrollbar to a menu in WordPress theme customizer](https://www.wpbeginner.com/wp-content/uploads/2015/07/scroll-bar-example-menu-customizer-min.png)
Ta sama zasada dotyczy motywów blokowych.
Wystarczy dodać klasę paska przewijania
do twojego głównego elementu menu, a nie do podmenu.
![stop-site-min Adding a CSS class to a menu in the full-site editor](https://www.wpbeginner.com/wp-content/uploads/2015/07/scroll-bar-class-editor-menu-min.png)
Teraz, tutaj rzeczy się różnią. Musisz przejść na twoją witrynę internetową WordPress i otworzyć narzędzie inspekcji w przeglądarce.
W przypadku użytkowników przeglądarki Chrome wystarczy kliknąć prawym przyciskiem myszy twój element menu z podmenu i wybrać opcję „Sprawdź”.
![local-wp-one-click-min Accessing the Inspect element tool in Chrome](https://www.wpbeginner.com/wp-content/uploads/2015/07/inspect-tool-min.png)
Na twojej klawiaturze naciśnij CTRL/Command + F, aby włączyć funkcję Znajdź. Następnie zlokalizuj kod HTML <ul></ul>
, który zawiera klasę paska przewijania
.
Dokładny kod będzie różnił się w zależności od motywu, ale oto jak wygląda nasz:
<ul data-wp-on-async--focus="actions.openMenuOnFocus" class="wp-block-navigation__submenu-container scroll-bar wp-block-navigation-submenu">...</ul>
Będziesz wiedział, że wybierasz właściwą linię kodu, jeśli wszystkie elementy podmenu są podświetlone.
![Local WP landing page Locating the scroll-bar element using the Inspect tool](https://www.wpbeginner.com/wp-content/uploads/2015/07/scroll-bar-inspect-min.png)
Teraz chcesz skopiować wszystkie te klasy CSS między class="
i ">
.
W kodzie CSS zastąp klasę scroll-bar
wszystkimi tymi klasami i kropką (.) przed nią, aby wskazać, że jest to klasa. Warto również dodać !
important w każdej linii, która konfiguruje pasek przewijania, aby upewnić się, że motyw nie zastąpi tych ustawień.
Oto przykład:
.wp-block-navigation__submenu-container.scroll-bar.wp-block-navigation-submenu {
max-height: 100px !important; /* Adjust the maximum height as needed */
overflow-y: auto !important; /* Enable vertical scrolling */
overflow-x: hidden !important; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */
Po dodaniu tego kodu, twoje menu nawigacyjne powinno wyglądać następująco:
![Inserting some information to download Local WP An example of a scrollbar in a block theme menu made with CSS](https://www.wpbeginner.com/wp-content/uploads/2015/07/scroll-bar-menu-editor-example-min.png)
Jak dostosować wygląd własnego paska przewijania?
Teraz, gdy dodałeś własny pasek przewijania, możesz chcieć dopasować go do wyglądu twojej witryny internetowej. Możesz łatwo zmienić wygląd paska przewijania za pomocą CSS. Przyjrzyjmy się, jak dostosować jego rozmiar, kolor i kształt.
Załóżmy, że chcesz zmienić maksymalną wysokość elementu, do którego dodajesz pasek przewijania. W takim przypadku możesz zmienić liczbę w max-height:
u góry na dowolną liczbę, o ile jest wyrażona w pikselach.
Możesz także dostosować liczbę w width:
, aby szerokość elementu z paskiem przewijania była szersza lub węższa.
![Naming the new local WordPress site with Local WP Adjusting the scrollbar's heigh and width with CSS](https://www.wpbeginner.com/wp-content/uploads/2015/07/scroll-bar-height-width-min.png)
Aby dostosować rozmiar paska przewijania, znajdź szerokość
linii : 10px;
pod selektorem .scroll-bar::-webkit-scrollbar
.
Zwiększ tę liczbę, aby pasek przewijania był szerszy, lub zmniejsz ją, aby był węższy. Na przykład width: 15px;
utworzy szerszy pasek przewijania, a width: 5px;
sprawi, że będzie on cieńszy.
![local-wp-download-starting-min Adjusting the scrollbar size with CSS](https://www.wpbeginner.com/wp-content/uploads/2015/07/scroll-bar-bar-size-min.png)
Aby zmienić kolor paska przewijania, znajdź wiersz z napisem background: grey;
pod selektorem .scroll-bar::-webkit-scrollbar-thumb
.
Zastąp „szary” dowolnym kolorem, takim jak „niebieski” lub dowolnym kolorem przy użyciu kodu szesnastkowego (np. #0000FF
).
![11 łatwych pomysłów na zarabianie pieniędzy online w 2025 roku Changing the scrollbar's color with CSS](https://www.wpbeginner.com/wp-content/uploads/2015/07/scroll-bar-color-min.png)
Jeśli chcesz, aby pasek przewijania był bardziej zaokrąglony, poszukaj właściwości border-radius
.
Im wyższa liczba, tym bardziej zaokrąglone będą rogi. Spróbuj zmienić border-radius: 15px
; na border-radius: 20px;
dla bardziej zaokrąglonego wyglądu lub border-radius: 0px;
dla ostrych rogów.
![studio-download-windows-min Changing the scrollbar's border radius with CSS](https://www.wpbeginner.com/wp-content/uploads/2015/07/scroll-bar-border-radius-min.png)
Należy pamiętać, że powyższe zmiany będą miały wpływ tylko na przeglądarki oparte na Webkit, takie jak Chrome i Safari.
W przeglądarce Firefox należy dostosować właściwość scrollbar-color
. Pierwszy kolor dotyczy kciuka (przeciąganej części), a drugi ścieżki (tła). Na przykład scrollbar-color: blue #eaeaea
utworzy niebieski pasek przewijania na jasnoszarej ścieżce w przeglądarce Firefox.
![installing-studio-min Changing the scrollbar's appearance in Firefox with CSS](https://www.wpbeginner.com/wp-content/uploads/2015/07/firefox-css-scrollbar.png)
Po wprowadzeniu tych zmian, zapisz CSS i odśwież swoją stronę WordPress, aby zobaczyć nowy, dostosowany pasek przewijania w działaniu. Zachęcamy do eksperymentowania z różnymi kolorami i rozmiarami, aż znajdziesz idealny wygląd dla twojej witryny internetowej.
Dowiedz się więcej o sposobach na ulepszenie twojego WordPress Web Design
Teraz, gdy nauczyłeś się już, jak dodawać własne paski przewijania do witryny WordPress, dlaczego nie odkryć innych sposobów na ulepszenie wyglądu i funkcjonalności twojej witryny internetowej? Oto kilka pomocnych przewodników, które pomogą ci przenieść twoje umiejętności WordPress na wyższy poziom:
- Jeśli chcesz zaprezentować swoje strony w atrakcyjny wizualnie sposób, zapoznaj się z naszym poradnikiem, jak łatwo wyświetlić listę stron z miniaturami w WordPress.
- W przypadku blogów z dużą ilością treści, nieskończone przewijanie może znacznie poprawić wrażenia użytkownika. Dowiedz się, jak dodać tę funkcję krok po kroku.
- Aby dodać trochę wizualnego stylu, spróbuj dodać efekt paralaksy do twojego motywu WordPress. Jest to łatwiejsze niż mogłoby się wydawać.
- Aby poprawić dostępność, rozważ dodanie zmiany kro ju pisma do twojej witryny. Mamy prosty przewodnik, który pomoże ci to zrobić.
- Jeśli nie jesteś zadowolony z obecnego, aktualnego położenia twojego paska bocznego, możemy pokazać ci, jak zmienić panel boczny w WordPress.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać własny pasek przewijania do dowolnego elementu na twojej witrynie WordPress. Warto również zapoznać się z naszym wyborem najlepszych kreatorów motywów WordPress i naszym przewodnikiem na temat dodawania paska postępu czytania w WordPress.
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.
Vaka
Thank youuu!
WPBeginner Support
You’re welcome![:)](https://www.wpbeginner.com/pl/wp-content/plugins/classic-smilies/img/icon_smile.gif)
Admin
alex
Hello I cannot seem to get my custom scroll bar to display vertically??? I have it set to a wordpress text widget with the height at 400 px and the width at 100 px and it comes up horizontal which is not what I need. thank you
WPBeginner Support
Your content may not be tall enough, you may want to reach out to the plugin’s support and they should be able to assist.
Admin
irit
hi![:)](https://www.wpbeginner.com/pl/wp-content/plugins/classic-smilies/img/icon_smile.gif)
Thank you for sharing the plugin
i have a very long image that i would like to put a scroll bar on.
i know i have the right selector since the element does change, unfortunately it just „squishes” to whatever size i put into height (i used Elementor to create that page)
thank you
WPBeginner Support
You would want to first reach out to Elementor as their page builder may be preventing the image from going beyond the size of the section you have set up.
Admin
Danny
This is exactly my idea – to use it and make visitors spend more time on my site. My frontpage is such that I can combine several pages. So there is this particular page that is part of my front page, but it is long, so i want to use the scrolling to keep it short yet visitors can scroll just within it.
My problem is that I dont know the Target Element ID.
Can you assist?
WPBeginner Support
If you reach out to your theme’s support for the specific section you want they should be able to let you know the element they’re using.
Admin
Danny
I want to add scrolling on a particular page – the page itself, not the sidebar or any widget.
What will the Target ELement ID be?
I right-clicked on the page body, but I dont know what to look out for. Can anybody advice?
WPBeginner Support
It would depend on the specific theme but normally for what you’re wanting it would be the content area.
Admin
Danny
I am using the free version of raratheme’s lawyer landing page and I dount the developer can offer me such info as a free user.
Sure, its the content area, and I wonder what the Element ID is called. Any ideas?
WPBeginner Support
It would be called something similar to content area normally, where you right click should have brought up a specific area of the html that when you hover over it should highlight the section to show you what it is targeting. You may want to take a look at our guide on how to use inspect element here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Alexandre
Very nice and easy to custom widget. However, it took me a couple of hours to find what to enter in the Target Element Sector section while using Elementor. It finally worked with the following line: „.elementor-element-6daf57c”. The dot („.”) at the beginning is important.
Thank you!
WPBeginner Support
Thanks for sharing this specification to help other users![:)](https://www.wpbeginner.com/pl/wp-content/plugins/classic-smilies/img/icon_smile.gif)
Admin
Rushikesh
This is working for desktop view, but I don’t want this scrollbar work on mobile devices. Because it’s ruin responsiveness. How can I do it to stop working on mobile devices?
Rosie Malik
This tool is such a tremendous help to website appearance and functionality! You can select your featured items (pictures, posts, etc.) and put them almost anywhere … and several times, too! Your site visitor will spend more time on your site and interract with more content, etc. This is a total win/win!
igor Griffiths
Thanks for sharing this plugin and more importantly how to set it up, I would never have thought to use the Chrome inspect element to find the target id without many hours of experimentation.
Looks like a very flexible plugin that with a little imagination could be put to many powerful and engaging uses
igor