Jednym z najczęstszych problemów z układem, jakie widzimy, jest sytuacja, gdy pasek boczny spada poniżej treści zamiast pojawiać się obok niej. Natychmiast sprawia to, że strona wygląda na zepsutą i może dezorientować odwiedzających.
Zazwyczaj dzieje się to po edycji motywu, instalacji wtyczki lub drobnej zmianie kodu — nawet brakujący tag zamykający może zakłócić układ. Widzieliśmy to wiele razy, pomagając użytkownikom rozwiązywać problemy z ich motywami.
Dobra wiadomość jest taka, że łatwo to naprawić, gdy już wiesz, gdzie szukać. Nie musisz być programistą, aby zlokalizować problem.
W tym przewodniku pokażemy Ci najbardziej prawdopodobne przyczyny i przeprowadzimy Cię przez proste kroki, aby przywrócić pasek boczny na miejsce.
Co powoduje błąd „Sidebar WordPress poniżej treści”?
Najczęstszą przyczyną pojawiania się paska bocznego poniżej treści jest błąd HTML lub CSS łamiący układ.
Każdy <div> w HTML musi być prawidłowo zamknięty. Jeśli szablon odpowiedzialny za wyświetlanie strony ma niezamknięty tag <div>, spowoduje to zepsucie układu.
Podobnie niechciany lub dodatkowy tag zamykający </div> może również wpłynąć na układ i spowodować przesunięcie paska bocznego w dół.
Oprócz HTML, CSS wpływa również na ogólny wygląd każdego elementu na Twojej stronie internetowej WordPress. Jest używany do definiowania szerokości, wyrównania i pływania elementów w układzie.
Mówiąc prościej, jeśli szerokość obszaru treści jest większa niż dostępna przestrzeń, spowoduje to przesunięcie paska bocznego w dół.
Najpierw musisz dowiedzieć się, jaki konkretny kod powoduje ten błąd paska bocznego w WordPress.
Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo rozwiązać i naprawić błąd paska bocznego pod zawartością w WordPress. Możesz skorzystać z poniższych szybkich linków, aby przejść do konkretnego rozwiązania problemu:
- Cofnij ostatnie zmiany w swoim motywie WordPress
- Wyczyść pamięć podręczną WordPress
- Wyklucz wtyczki WordPress
- Naprawianie uszkodzonych tagów łamiących układ
- Znajdź CSS Przesuwanie paska bocznego poniżej treści
- Co zrobić, jeśli nadal widzisz pasek boczny pod treścią
- Dowiedz się więcej sposobów na rozwiązanie typowych błędów WordPress
1. Cofnij ostatnie zmiany w motywie WordPress
Zazwyczaj problem z paskiem bocznym jest spowodowany zmianami w plikach motywu WordPress.
Jeśli ostatnio wprowadziłeś jakiekolwiek zmiany w swoim motywie WordPress lub motywie potomnym, przejrzenie tych zmian będzie szybkim sposobem na naprawienie tego błędu.
Możesz również skontaktować się bezpośrednio z twórcą swojego motywu, aby uzyskać wsparcie. Więcej informacji znajdziesz w naszym poradniku jak prawidłowo prosić o wsparcie WordPress i je uzyskać.
Jeśli nie możesz ustalić, które zmiany będziesz musiał cofnąć, czytaj dalej, a pokażemy Ci inne sposoby rozwiązywania problemów.
2. Wyczyść pamięć podręczną WordPress
Kiedy wprowadzasz zmiany, które nie pojawiają się od razu, często jest to spowodowane problemami z buforowaniem.
Często wtyczki buforujące pokazują starszą wersję tej samej strony. Wyczyszczenie pamięci podręcznej WordPress i pamięci podręcznej przeglądarki pomoże Ci zobaczyć zmiany wprowadzone na Twojej stronie internetowej.
3. Wyklucz wtyczki WordPress
Wygląd i styl Twojej witryny WordPress są kontrolowane przez używany motyw. Jednak czasami wtyczki WordPress mogą również dodawać własny kod HTML i CSS do Twojej witryny.
Na przykład, dodanie formularza kontaktowego na stronie lub popup lightbox załaduje dodatkowy kod CSS i HTML.
Aby upewnić się, że problem nie jest spowodowany przez wtyczkę WordPress, możesz tymczasowo dezaktywować wszystkie wtyczki WordPress na swojej stronie internetowej.
Aby to zrobić, przejdź do Wtyczki » Zainstalowane wtyczki w swoim panelu administracyjnym WordPress i zaznacz pole wyboru obok „Wtyczka” na górze listy. Następnie otwórz menu rozwijane, wybierz „Dezaktywuj” i kliknij „Zastosuj”.
Jeśli problem zniknie, oznacza to, że problem powodowała wtyczka. Po prostu aktywuj wszystkie swoje wtyczki WordPress po kolei, sprawdzając swoją stronę po każdej wtyczce, aby dowiedzieć się, która z nich powoduje problem.
Po tym możesz skontaktować się ze wsparciem wtyczki, aby znaleźć rozwiązanie i zgłosić problem.
Szczegółowe wskazówki znajdziesz w naszych poradnikach na temat jak łatwo dezaktywować wtyczki WordPress oraz jak dezaktywować wtyczki, gdy nie masz dostępu do obszaru administracyjnego WordPress.
4. Napraw uszkodzone tagi <div> psujące układ
Jak wspomnieliśmy wcześniej, uszkodzone tagi <div> są jedną z częstych przyczyn przesuwania się paska bocznego poniżej treści.
Jeśli problem występuje w konkretnym obszarze Twojej strony, możesz sprawdzić szablon odpowiedzialny za wyświetlanie tego kodu.
Na przykład, jeśli ten problem występuje tylko na pojedynczych postach, możesz sprawdzić szablon single.php. Aby dowiedzieć się, na który szablon należy zwrócić uwagę, zapoznaj się z naszym kompletnym ściągawką dotyczącą hierarchii szablonów WordPress.
Najprostszym sposobem na szybkie znalezienie i naprawienie niezamkniętego elementu div jest użycie narzędzia walidatora W3C.
Możesz również użyć narzędzia Inspect tool lub aplikacji edytora kodu, które pomagają debugować kod, podświetlając tagi początkowe i końcowe elementów.
Oto przykład wyróżnienia tagów początkowych i końcowych elementu:
Patrząc na kod, musisz upewnić się, że każdy tag <div>, który jest otwarty, ma również zamykający tag </div>.
Podobnie, należy również poszukać osieroconego zamykającego tagu </div>, który nie ma odpowiadającego mu otwierającego tagu <div>.
Jeśli znalazłeś uszkodzone tagi HTML, naprawienie ich rozwiąże problem z pojawianiem się paska bocznego poniżej treści.
5. Znajdź CSS przenoszący pasek boczny pod zawartość
CSS kontroluje najważniejsze aspekty projektu Twojej strony internetowej. Twój motyw WordPress używa CSS do definiowania szerokości obszarów treści i paska bocznego w układzie siatki.
Ta wartość jest w procentach dostępnej powierzchni widzenia. Na urządzeniach mobilnych, Twój motyw automatycznie przesunie pasek boczny poniżej treści.
Aby dowiedzieć się, które CSS powoduje problem, możesz użyć narzędzia Inspekcja. Samo przeniesienie treści do pola kontenera, sekcji treści i obszarów paska bocznego pokaże Ci ich szerokość i wysokość.
Na przykład, jeśli obszar treści ma szerokość 70%, a obszar paska bocznego 33%, zostanie on automatycznie przesunięty w dół. Obliczając te wartości, możesz również wziąć pod uwagę przestrzeń zajmowaną przez dopełnienie i marginesy w każdej sekcji.
Co zrobić, jeśli nadal widzisz pasek boczny pod treścią
Jeśli żadne z powyższych kroków nie zadziałało, nie martw się – jest jeszcze kilka rzeczy, których możesz spróbować.
Najpierw zalecamy zapoznanie się z naszym pełnym przewodnikiem po rozwiązywaniu problemów z WordPress. To świetny sposób na wykluczenie innych ukrytych problemów, które mogą wpływać na Twój układ.
Możesz również włączyć tryb debugowania w WordPress. To nie naprawi błędu bezpośrednio, ale może pokazać Ci błąd PHP lub wtyczki, który psuje Twój układ.
Jeśli tryb debugowania wskazuje na konkretną wtyczkę, spróbuj ją tymczasowo dezaktywować lub zastąpić alternatywną, która nie wpływa na układ Twojego motywu.
Dowiedz się więcej sposobów na rozwiązanie typowych błędów WordPress
Masz inne problemy ze swoją witryną WordPress? Sprawdź poniższe samouczki:
- Jak naprawić błąd nieprawidłowego formatu JSON w WordPress (Przewodnik dla początkujących)
- Typowe problemy z edytorem bloków WordPress i jak je rozwiązać
- Jak naprawić błąd przesyłania obrazu HTTP w WordPress
- Jak naprawić błąd przycisku Dodaj multimedium w WordPress
- Jak naprawić błąd „Inna aktualizacja jest obecnie w toku” w WordPress
- Jak naprawić podwójne wyświetlanie obrazów wyróżniających w postach WordPress
- Jak naprawić problem pustego edytora strony w WordPress (krok po kroku)
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak naprawić problem z paskiem bocznym WordPress poniżej treści. Możesz również zapoznać się z naszym ostatecznym podręcznikiem dotyczącym najczęstszych błędów WordPress oraz naszym artykułem na temat jak wyświetlać różne paski boczne dla każdego posta i strony w 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.
Alessio
Dziękuję za udostępnienie, rozwiązało to mój problem. Cieszę się, że nie byłem jedyną osobą, która go doświadczyła.
Wsparcie WPBeginner
You’re welcome, glad our guide was helpful
Admin
Gina Detwiler
Nie jestem pewien, jak znaleźć ten element div. Czy możesz to trochę wyjaśnić? Mam ten problem od początku mojej witryny i nie wiem, jak go naprawić.
Wsparcie WPBeginner
Powinieneś przyjrzeć się kodowi swojego niestandardowego motywu w edytorze kodu, co powinno pomóc w znalezieniu nieprawidłowego elementu div. Możesz również przyjrzeć się swojej witrynie, używając narzędzia „Inspect Element”: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Shai
Dziękuję bardzo!
Uratowałeś mi mnóstwo czasu na próbach rozwiązania tego problemu.
Jak powiedziałeś, miałem dodatkowy element div, który był zamknięty
Dale Jennings
Próbuję umieścić moje bieżące posty po lewej stronie, a ostatnie posty w prawym bocznym pasku, a pasek boczny znajduje się na dole strony, jest też za szeroki i nie rozumiem, o czym mówiłeś, ponieważ jestem nowy w tym. Jakie jest łatwe rozwiązanie? Czy w ogóle istnieje?
Ayla
Mam problem, gdzie mój pasek boczny pojawia się na dole każdej strony. Nie jestem w tym zbyt biegły, więc nie zrobiłem nic wyszukanego poza niedawnym przeniesieniem domeny z Google. Budowałem stronę w WordPress i nie miałem żadnych problemów, dopóki nie zmieniłem motywu. Próbowałem powyższych instrukcji, ale nie mogłem znaleźć żadnej z tych rzeczy.
Wsparcie WPBeginner
Cześć Ayla,
Spróbuj tymczasowo przełączyć się na swój poprzedni motyw lub domyślny motyw. Jeśli to rozwiąże problem, to problem leży po stronie Twojego motywu. Spróbuj skontaktować się z twórcą motywu, aby zobaczyć, czy mogą pomóc Ci go naprawić.
Admin
Jared H
Rozwiązało mój problem, dzięki za post!
Dene
dzięki chłopaki – ten post właśnie rozwiązał mój problem. Bardzo doceniam
Donald Efiom
Mam teraz ten sam problem i nie mogę znaleźć, gdzie edytować kod HTML strony sklepu, na której wyświetlam produkty za pomocą wtyczki wcommerce. Kiedy analizuję element w przeglądarce, mogę debugować błąd i go poprawić, ale w moim rzeczywistym katalogu głównym nie mogę znaleźć strony, która zawiera kod HTML strony sklepu woocommerce, którą mógłbym edytować. Proszę o pomoc!
Maria Appleby
Nie mogę naprawić problemu z moim paskiem bocznym. Szukałem otwartych bloków. Usunąłem jeden post na blogu, który był nieprawidłowy z powodu kopiowania treści w HTML. Wypróbowałem inny motyw. Usunąłem moje widżety (a następnie spróbowałem dodać jeden, aby zobaczyć, co się stanie – przycisk „obserwuj blog” – nadal na dole). Próbowałem użyć walidatora, ale tak naprawdę nie rozumiem, co mi mówi. Kiedy wprowadzałem różne adresy URL postów na blogu, otrzymywałem te same komunikaty o błędach. Przepraszam, że brzmię tak głupio... Mam bloga od dawna, ale dopiero niedawno zacząłem dodawać dużo treści i tak naprawdę jeszcze nie wiem, co robię. Pasek boczny znalazł się z prawej strony, na dole bloga, bardzo niedawno (w ciągu ostatnich kilku dni). Czy możesz mi pomóc?
Wsparcie WPBeginner
Hej Maria,
Wygląda na to, że używasz bloga WordPress.com. Zapoznaj się z naszym przewodnikiem na temat różnic między samodzielnie hostowanym WordPress.org a darmowym blogiem WordPress.com.
Admin
Sparsh Goyal
Mam ten sam problem, ale nie mogę go rozwiązać. Tylko moja strona główna ma ten problem. Strona typu post i strona typu page działają dobrze. Pasek boczny mojej strony głównej znajduje się na górze, zamiast obok mojej treści. Czy możesz sprawdzić, co jest nie tak na mojej stronie. Moja strona to coasilat.com
Mustafa
Dziękuję. Problem rozwiązany. Był to dodatkowy element div. Kiedy się go pozbyłem, problem został naprawiony.
Jan Reilink
Ratunek, dziękuję!
Asha Shendre
Miałem cały dzień kłopotów z tym.
rozwiązanie problemu znalazłem tylko tutaj.
Dziękuję..
Dziękuję bardzo, proszę pana…
Harish
Dziękuję za pomoc
Sly
Cześć, jestem początkujący. Nie wiem NIC o kodzie CSS ani HTML, nie edytuję mojego motywu, nie mam motywu potomnego. Dodaję tylko wtyczki do wszystkiego, czego potrzebuję. Wydaje mi się, że mam problem ze WSZYSTKIMI MOIMI STRONAMI WPISÓW NA BLOGU. Pasek boczny znajduje się poniżej wpisów na blogu. Nie mam pojęcia, czym jest div i jak to naprawić. Drodzy profesjonaliści, jaki byłby dla mnie najlepszy sposób na rozwiązanie tego problemu z paskiem bocznym?
Tamara
Jestem początkującym i nie jestem programistą, ale udało mi się rozwiązać ten problem, korzystając z linku W3 Validator na tej stronie. Na górze walidatora, w sekcji Opcje, zaznaczyłem wszystkie dostępne, a następnie wpisałem adres internetowy mojego bloga i uruchomiłem walidator. Poniżej ponumerowanej listy błędów znajdował się bardzo szczegółowy (i onieśmielający, ale wytrwaj) wyświetlacz błędów, tak jak są one zlokalizowane w tekście mojego bloga. Skupiłem się na wspomnianych w tym artykule. Przewijając szczegółowy raport, znalazłem jeden błąd, który był podświetlony na czerwono. Ponieważ mój tekst był wyświetlany, mogłem zobaczyć, że znajdował się w jednym z moich wpisów na blogu, tuż po wstawionym linku internetowym. Poszedłem do tego wpisu na blogu w panelu WordPress, kliknąłem „edytuj” i usunąłem link. (Przytrzymałem „usuń”, aby upewnić się, że usunąłem wszystko, co niewidoczne, co mogło tam być, i wcisnąłem spację kilka liter dla tego samego powodu. Następnie zapisałem wpis na blogu. Moja strona internetowa została naprawiona! Następnie ponownie edytowałem wpis na blogu, aby dodać z powrotem link i wszystko pozostało w porządku. Problem rozwiązany.
Lisa W Boyle
Dziękuję, udało mi się natychmiast znaleźć i naprawić problem na podstawie Twoich instrukcji. Okazało się, że umieściłem dodatkowy w moim pliku single.php. Jesteś moim wybawcą, dziękuję bardzo!
Roney Oenophile
Nie wiem, co zrobiłem źle, proszę pomóż mi. Edytowałem tekst i przypadkowo nacisnąłem kombinację klawiszy, która zmieniła jego wygląd. Brakuje kilku przycisków, takich jak pełny ekran. A przycisk publikowania został przesunięty na lewą stronę. A zdjęcie, które przesłałem z postem, przesunęło się nad moją treścią i jest teraz bardzo duże. Nie wiem, jak to się stało, nie wiem, jaki jest problem. Nie jestem biegły w komputerach. Zwykle piszę posty. Proszę, pomóż mi. Adres mojej strony to wordpress.com
Wsparcie WPBeginner
Zapoznaj się z naszym przewodnikiem na temat różnicy między samodzielnie hostowanym blogiem WordPress.org a darmowym blogiem WordPress.com. Musisz skontaktować się z pomocą techniczną WordPress.com.
Admin
Danielle
Po raz pierwszy przejmuję aktualizację naszej strony… próbowałem zaktualizować statyczną stronę główną i jakoś mój pasek boczny przesunął się na dół. Nie widzę żadnych tagów
ani
….pomocy! Nie chcę mówić osobie, od której przejąłem obowiązki, że już coś zepsułem, jeśli uda mi się dowiedzieć, co zrobiłem!
giovanni
Czy ktoś może mi pomóc, mam ten sam problem…
to jest mój header.php
Susan
Doskonale! Dzięki! Wiedziałem w momencie, gdy powiedziałeś 'div', czyj post na moim blogu społecznościowym musiał zostać edytowany!
Leah
This is happening to me right now every time I try out a new theme. Only one widget stays on the sidebar and the rest goes to the bottom of the content. But when I go back to my current theme, everything looks okay. I still can’t figure it out.
Sam
Ach! Właśnie zaoszczędziłeś mi mnóstwo czasu i frustracji! Dziękuję
srik
Wielkie dzięki za to! Było bardzo pomocne
Amy
Dziękuję za ten post. Właśnie próbuję rozwiązać ten problem na mojej stronie internetowej. Próbowałem wszystkiego, co zostało wspomniane w tym poście, ale nadal mam problemy. Wiem trochę o stronach internetowych, ale zupełnie nie wiem, dlaczego mój górny pasek nawigacyjny układa się w 2 linie i dlaczego mój pasek boczny jest wypychany na dół. Moja strona internetowa jeszcze nie działa, ale oto ona:
Dziękuję za wszelką pomoc!!
sean
Podobny problem z moim niestandardowym blogiem w mojej witrynie; pasek boczny przesuwa się pod stopkę, jeśli nie ma wystarczającej ilości treści, aby go popchnąć w dół.
Odkryłem, że usunięcie (lub bezpieczniej, zakomentowanie) poniższego kodu rozwiązało problem:
Nie wiem, do czego służy ten pusty div i jak dotąd nie wpłynął negatywnie na bloga. Inną, bardziej oczywistą przyczyną są divy bez tagów zamykających – trudniej jest śledzić wszystkie otwarte/zamknięte tagi div w WP, ponieważ stopka i nagłówek są usuwane, w przeciwieństwie do standardowej strony HTML.
Sean
Er, to jest komentowanie pustego divu "delimiter" na dole różnych stron WP – zniknął z mojego oryginalnego komentarza!
David Pomazzo
czy możesz spojrzeć na moją stronę i mi pomóc? http://www.americasfreedomfighters.com/ wstawiłem google adsense i teraz mój pasek boczny został przesunięty na dół i mam historię na pasku bocznym! dziękuję bardzo
Jen
THANK YOU! It was the content width that did it for me
Cecilia
Mam ten problem i nie mogę go rozwiązać (próbuję od kilku dni)
Oto moja strona:
Proszę, naprawdę potrzebuję pomocy. Dzięki!!!! =)
Wsparcie WPBeginner
Prawdopodobnie musisz dodać `clear` przed zakończeniem swojego div `.hfeed`, tak jak tutaj:
1-click Use in WordPress
Admin
Katie Clark
Mam ten problem i nawet nie wiem, od czego zacząć, ponieważ dzisiaj nic nie edytowałem. Jakieś sugestie? Oto moja strona
http://clarkscondensed.com/
Personel redakcyjny
Twoja strona wygląda dobrze w Chrome.
Admin
Doomish
Świetna wskazówka! Będzie bardzo pomocna, a komentarz Kathy jest typowy dla tego, co mi się przydarza.
Kathy
Ponieważ większość motywów ma odpowiedni kod CSS, uważam, że jest to prawie zawsze problem nieprawidłowo zamkniętego kodu HTML. Zazwyczaj pojawia się na konkretnej stronie, ponieważ użytkownik próbował dodać własny kod HTML w edytorze postów i coś poszło nie tak. Prosty błąd, ale jego debugowanie może zająć dużo czasu.