Czy chcesz wyłączyć przepełnienie na twojej witrynie internetowej WordPress?
Poziomy pasek przewijania pojawia się, gdy element na stronie jest zbyt szeroki, aby go wyświetlić i wykracza poza ekran. Większość motywów WordPress nie używa poziomego przewijania, ponieważ może to zepsuć układ twojej witryny i dezorientować użytkowników.
W tym artykule pokażemy, jak łatwo wyłączyć przepełnienie w WordPress i usuwać poziomy pasek przewijania.
Co powoduje poziomy pasek przewijania lub przepełnienie w WordPress?
Podczas konfigurowania twojej witryny internetowej WordPress ważne jest, aby była ona przyjazna dla użytkownika i dostępna dla każdego.
WordPress wyświetli poziomy pasek przewijania, jeśli element jest szerszy niż twój układ witryny internetowej. Nazywa się to „przepełnieniem”. Posiadanie poziomego paska przewijania może zepsuć twój projekt i sprawić, że twoja witryna internetowa będzie mniej przyjazna dla użytkownika.
Strona internetowa z poziomymi i pionowymi paskami przewijania może być również dezorientująca dla odwiedzającego i trudna w nawigacji. Może to spowodować, że ludzie opuszczą twoją witrynę, powodując niższą konwersję i sprzedaż.
Wyłączenie przepełnienia sprawi, że twoja witryna będzie bardziej przyjazna dla użytkownika, stworzy układ o poprawionej szerokości i poprawi ogólną responsywność witryny.
Mając to na uwadze, przyjrzyjmy się, jak łatwo wyłączyć poziomy pasek przewijania w WordPress:
Metoda 1: Dodanie fragmentu kodu CSS przy użyciu konfiguratora motywu
Możesz wyłączyć przepełnienie w WordPressie, po prostu dodając kod CSS w opcji „Dodatkowy CSS” w konfiguratorze motywu.
Wszystko, co musisz zrobić, to przejść na stronę Wygląd ” Konfigurator z kokpitu WordPress.
Uwaga: Możesz zobaczyć Wygląd „ Edytor zamiast Dostosuj. Oznacza to, że twój motyw używa edytora pełnej witryny (FSE) zamiast konfiguratora motywu i powinieneś zapoznać się z naszym przewodnikiem, jak poprawić brakujący konfigurator motywu lub skorzystać z metody 2 poniżej.
Gdy znajdziesz się na stronie Konfigurator, kliknij kartę „Dodatkowe CSS”.
Następnie wystarczy skopiować i wkleić poniższy kod:
html, body {
max-width: 100%;
overflow-x: hidden;
}
Następnie wszelkie przepełnienia zostaną usuwane i będziesz mógł zobaczyć ich zastosowanie w panelu podglądu na żywo twojej witryny internetowej.
Nie zapomnij kliknąć przycisku „Opublikuj” u góry strony, gdy skończysz!
Metoda 2: Dodanie fragmentu kodu CSS za pomocą WPCode
Kod CSS można również dodać za pomocą fragmentu kodu przy użyciu wtyczki WPCode.
WPCode to najlepsza wtyczka do fragmentów kodu WordPress na rynku, używana przez ponad 1 milion witryn internetowych.
Zalecamy tę metodę, ponieważ ta wtyczka ułatwia dodawanie własnego kodu do WordPressa bez konieczności edytowania jakichkolwiek plików twojego motywu.
Najpierw zainstaluj i włącz wtyczkę WPCode na twojej witrynie internetowej. Więcej szczegółów można znaleźć w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.
Uwaga: WPCode ma również darmową wersję. Jednak do odblokowania opcji „Fragment kodu CSS” potrzebny jest plan premium wtyczki.
Po włączaniu, przejdź na stronę Code Snippets ” + Add Snippets z kokpitu WordPress.
Gdy już się tam znajdziesz, kliknij przycisk „Use Snippet” pod opcją „Add Your Custom Code (New Snippet)”.
Spowoduje to przejście do strony „Create Custom Snippet”, gdzie możesz zacząć od wpisz tytuł dla twojego fragmentu kodu. Nazwa ta nie będzie wyświetlana użytkownikom i służy wyłącznie twojej identyfikacji.
Następnie wybierz „Fragment kodu CSS” jako rodzaj kodu z rozwijanego menu po prawej stronie.
Uwaga: Jeśli korzystasz z darmowej wtyczki WPCode, musisz wybrać opcję „Universal Snippet”.
Następnie skopiuj i wklej poniższy fragment kodu CSS w polu „Podgląd kodu”:
<style type="text/css">
html, body {
max-width: 100%;
overflow-x: hidden;
}
</style>
Gdy już to zrobisz, przewiń w dół do sekcji „Wstaw”, gdzie znajdziesz dwie opcje, „Automatyczne wstawienie” i „Krótki kod”.
W tym miejscu wybierz tryb „Auto wstawienie”, aby automatycznie wykonać twój kod po włączaniu.
Jeśli jednak chcesz wyłączyć poziomy pasek przewijania tylko na niektórych stronach, możesz wybrać tryb „Krótki kod”.
Po wykonaniu tej czynności WPCode udostępni krótki kod po włączaniu fragmentu kodu, który można wkleić w określonym obszarze witryny internetowej lub na stronie, aby usuwać przepełnienie.
Po wybraniu twojej opcji, przejdź na górę strony i przełącz przełącznik z „Nieaktywny” na „Aktywny” w prawym górnym rogu.
Następnie wystarczy kliknąć przycisk „Zapisz fragment kodu”.
To wszystko! Właśnie usuwałeś wszelkie poziome paski przewijania na twojej witrynie.
Bonus: Dodaj własny pasek przewijania w WordPressie
Po wyłączeniu poziomego paska przewijania można również dodać własny pasek przewijania.
Na przykład, jeśli twoja witryna używa określonego schematu kolorów zgodnie z kolorami marki, możesz użyć tego samego koloru dla paska przewijania. Będzie to wyglądać atrakcyjnie wizualnie i zachęci użytkowników do odwiedzenia twojej witryny.
Aby utworzyć własny pasek przewijania, zainstaluj i włącz wtyczkę Advanced Scrollbar. Aby uzyskać szczegółowe informacje, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.
Po włączaniu, przejdź na stronę Ustawienia ” Zaawansowane ustawienia paska przewijania z kokpitu WordPress. Z tego miejsca możesz teraz zmienić kolor paska przewijania zgodnie z twoimi upodobaniami.
Po zakończeniu kliknij przycisk „Zapisz zmiany”, aby zapisać twoje ustawienia. Aby uzyskać więcej informacji, zapoznaj się z naszym poradnikiem na temat dodawania własnego paska przewijania w WordPress.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wyłączyć przepełnienie na twojej witrynie WordPress. Być może zechcesz również zapoznać się z naszą ekspercką listą niezbędnych wtyczek WordPress do rozwoju twojej witryny oraz naszym przewodnikiem dla początkujących, jak utworzyć formularz kontaktowy 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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi says
Thank you for this helpful guide.
I tried the second method of adding the CSS code using the WPCode plugin, but the changes didn’t seem to reflect on my website’s frontend. I cleared all caches, but the horizontal scrollbar is still there.
could the issue be related to the theme I’m using?
WPBeginner Support says
Yes, there is a good chance your specific theme is overriding the CSS and if you reach out to your theme’s support they should be able to help.
Administrator
Jiří Vaněk says
I used your CSS code, but if I increase the size of the site in the browser to eg 130%, the scrollbar still shows at the bottom? Where am I making mistake?
Also, if I replace the letter x with a y, the scroll bar on the right side does disappear, but the website doesn’t scroll down?
Any advice?
WPBeginner Support says
When using browser zoom there is a chance that something on the page itself has a minimum width that you are running into that would cause the scroll bar issue.
We do not recommend using y as having that not set is what allows scrolling on a site.
Administrator
Jiří Vaněk says
Thanks for the advice on the Y axis and so I will look on the page for where it might be causing the problem in the X axis. Thanks for the advice on what to focus on.
Tanvi says
When I used the WP Code plug in, this worked on all my pages but my home page. I didn’t do anything to disable the horizontal scroll bar on only some specific pages. What can I do about this?
WPBeginner Support says
You may need to check with the support for your specific theme to see if they have CSS code that would override it specifically for your homepage.
Administrator
Mara says
I posted the code but now I can’t scroll vertically on mobile anymore. do you know how to solve this?
WPBeginner Support says
It would depend on how your theme is set up, overflow-x is only supposed to remove the horizontal overflow on the site so your theme may be using overflow in a specific way. You would want to check with the support for your theme and they should be able to assist!
Administrator
Tobin Loveday says
Thanks guys, this was super helpfull!
Seems like themes should have this automatically, but oh well.
WPBeginner Support says
Glad our guide was helpful and some themes have added this but not all themes
Administrator