Jak zmienić panel boczny w WordPress (4 metody)

Czy chcesz zmienić panel boczny dla twojego motywu WordPress?

Może wolisz czysty, wyrównany do lewej wygląd, a może twój projekt wymaga, aby panel boczny znajdował się po prawej stronie dla lepszej równowagi. Bez względu na powód, dostosuj układ swojej witryny internetowej to świetny sposób na spersonalizowanie swojej obecności w Internecie.

W WPBeginner pomogliśmy niezliczonej liczbie użytkowników w dostosowaniu motywu WordPress. Dziś pokażemy, jak zmienić panel boczny w WordPress.

Kiedy zmienić domyślny panel boczny w WordPress?

Panel boczny to kolumna na twojej witrynie internetowej WordPress, zwykle znajdująca się po lewej lub prawej stronie głównego obszaru treści.

W klasycznych motywach WordPress ten panel boczny jest zasadniczo obszarem widżetów, w którym można dodawać różne elementy, takie jak formularze kontaktowe, paski wyszukiwania, kanały mediów społecznościowych, ostatnie wpisy i inne za pomocą widżetów WordPress.

Podczas gdy motywy blokowe nie używają widżetów, taksonomia „panel boczny” jest nadal powszechnie używana do opisania tej konkretnej sekcji, która często wyświetla dodatkowe treści lub opcje menu nawigacyjnego.

Czasami może być konieczna zmiana strony panelu bocznego z różnych powodów. Na przykład, być może twoja witryna internetowa obsługuje języki, które są pisane i czytane od prawej do lewej. Posiadanie panelu bocznego po lewej stronie lepiej pasuje do naturalnego przepływu czytania dla twoich użytkowników.

Lub chcesz poprawić wrażenia użytkownika. Może prowadzisz witrynę e-handlu i powiadomienie, że potencjalni klienci często skanują twoje strony w określony sposób. Chcesz dostosować się do tego zachowania, aby czuli się bardziej komfortowo podczas zakupów na twojej witrynie.

Niektóre projekty witryn internetowych mogą również wymagać określonego rozmieszczenia paneli bocznych, aby uzyskać zrównoważony i atrakcyjny wizualnie układ.

Mając to wszystko na uwadze, przyjrzyjmy się, jak zmienić panel boczny na twoim blogu lub witrynie internetowej WordPress. Wymyśliliśmy 3 proste metody, a ty możesz skorzystać z poniższych szybkich odnośników, aby przejść do tej, którą preferujesz:

Metoda 1: Jak zmienić panel boczny za pomocą konfiguratora WordPress (motywy klasyczne)?

Ta metoda jest przeznaczona dla osób korzystających z klasycznego motywu. Oznacza to, że nadal możesz używać konfiguratora WordPress do stylizowania wyglądu witryny, a sekcja Widżety w menu Wygląd administratora WordPress nadal istnieje.

Jeśli w twoim kokpicie WordPress brakuje konfiguratora motywów, prawdopodobnie korzystasz z motywu blokowego i musisz przejść do trzeciej metody.

Czasami twórcy klasycznych motywów oferują wiele pozycji panelu bocznego do wyboru. Możesz sprawdzić, czy to prawda, korzystając z konfiguratora WordPress i wybierając tam preferowaną pozycję panelu bocznego.

Najpierw przejdź do Wygląd ” Konfigurator. Jako przykładu użyjemy motywu Astra.

Tutaj widzimy, że motyw Astra ma specjalne menu „Panel boczny”.

Kliknijmy na nią.

Jak widać, Astra ma trzy szablony stron: jeden bez panelu bocznego, jeden z lewym paskiem bocznym i jeden z prawym paskiem bocznym. Dzięki temu możemy zmienić panel boczny jednym kliknięciem. Tutaj zmieniliśmy stronę paska bocznego na lewą.

Astra zapewnia również opcje zmiany stylu panelu bocznego, dostosowania szerokości i przypięcia go.

Po wprowadzeniu zmian możesz dodać dostępne widżety do panelu bocznego w normalny sposób. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat dodawania i korzystania z widżetów w WordPress.

Następnie kliknij „Opublikuj”.

Chociaż jest to wygodna funkcja, wszystko zależy od motywu. Zdecydowanie zalecamy sprawdzenie dokumentacji twojego motywu, aby sprawdzić, czy możesz zmienić panel boczny za pomocą konfiguratora.

Jeśli nie, przejdź do następnej metody.

Metoda 2: Jak zmienić panel boczny za pomocą kodu (klasyczne motywy)

Jeśli twój klasyczny motyw nie oferuje wielu pasków bocznych do wyboru, możesz zmienić stronę paska bocznego ręcznie za pomocą kodu CSS.

Zalecamy korzystanie z witryny testowej i/lub motywu potomnego do zabawy z tą metodą. W ten sposób, jeśli wystąpi błąd, nie będzie on miał wpływu na motyw nadrzędny i/lub witrynę internetową na żywo.

Ponadto korzystanie z motywu potomnego może zapobiec nadpisaniu twoich zmian podczas aktualizacji motywu.

Krok 1: Użyj narzędzia Inspect, aby zlokalizować twoją klasę CSS panelu bocznego

Pierwszą rzeczą, którą należy zrobić, jest otwarcie twojej witryny internetowej. Następnie najedź kursorem na panel boczny i użyj narzędzia Inspect w twojej przeglądarce.

Jeśli korzystasz z przeglądarki Chrome, możesz po prostu kliknąć obszar prawym przyciskiem myszy i wybrać opcję „Sprawdź”.

Więcej informacji można znaleźć w naszym przewodniku po podstawach elementów Inspect.

Teraz chcesz najechać kursorem na linie HTML i CSS w prawym górnym rogu strony.

Kiedy zobaczysz, że cały twój panel boczny jest podświetlony, kliknij tę linię. Dla nas był to <aside id="secondary" class="sidebar widget-area">.

Karta „Style” na dole strony zawiera wszystkie właściwości CSS związane z panelem bocznym.

W naszym przypadku widzieliśmy, że klasa CSS dla obszaru paska bocznego to .sidebar. Istnieją również reguły określające pozycję panelu bocznego, którą w tym przypadku jest lewa strona.

Wiemy o tym, ponieważ po odznaczeniu reguły margin-left panel boczny przesuwa się na drugą stronę.

Oto kod dla panelu bocznego naszego motywu:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

Możesz skopiować i wkleić ten kod do edytora tekstu, ponieważ będziemy go potrzebować w późniejszym kroku. Możesz też po prostu zachować tę kartę otwartą na później.

Teraz, gdy znamy już klasę CSS dla panelu bocznego, musimy również znaleźć klasę dla głównego obszaru treści, który wyświetla wszystkie twoje wpisy lub treść wpisów.

To, co można zrobić, to najechać kursorem na linie HTML i CSS, aby zobaczyć, która linia podświetla główny obszar treści. Tutaj dowiedzieliśmy się, że była to linia <div id="primary" class="content-area">.

Podobnie jak poprzednio, możesz przewinąć w dół do karty „Style”, aby zobaczyć, jaka jest klasa CSS dla tego obszaru. W tym przypadku jest to .content-area. Oto jego kod:

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Ponownie, możesz skopiować i wkleić kod CSS twojej treści do edytora tekstu lub pozostawić tę kartę otwartą do następnego kroku.

Teraz, gdy znamy już klasy CSS twojego panelu bocznego i obszaru treści, możemy edytować plik style.css motywu, aby zmienić panel boczny.

Krok 2: Dostosuj plik style.css twojego motywu.

Zazwyczaj musisz edytować style.css bezpośrednio za pomocą menedżera plików dostawcy hostingu lub klienta FTP. Jednak plik style.css może być dość długi, a jeśli popełnisz błąd, może to mieć wpływ na cały projekt witryny internetowej i zrujnować wrażenia użytkownika.

Dlatego zalecamy korzystanie z WPCode. Ta wtyczka do fragmentów kodu umożliwia bezpieczne i łatwe dostosowanie twojego pliku style.css bez bezpośredniego kontaktu z nim.

Jeśli twoje zmiany w kodzie spowodują niezamierzone błędy, możesz je wyłączyć jednym kliknięciem, a twoja witryna internetowa wróci do normy.

Na potrzeby tego poradnika można skorzystać z darmowej wersji WPCode, ale uaktualnienie do planu premium zapewni dostęp do bardziej zaawansowanych funkcji. Więcej informacji można znaleźć w naszej pełnej recenzji WPCode.

Najpierw zainstaluj WPCode na twoim WordPressie. Jeśli potrzebujesz instrukcji krok po kroku, przeczytaj nasz przewodnik na temat instalacji wtyczki WordPress.

Po zakończeniu przejdź do sekcji Fragmenty kodu „ + Dodaj fragment. Następnie wybierz „Add Your Custom Code (New Snippet)” i kliknij przycisk „Use snippet”.

Teraz wpisz tytuł twojego własnego kodu. Może to być coś w stylu „Zmień panel boczny”.

Następnie zmień fragment kodu na „CSS Snippet”.

Gdy to zrobisz, musisz wstawić fragmenty kodu CSS twojego panelu bocznego i obszarów treści do pola podglądu kodu.

Możesz oddzielić je pustym miejscem, aby ułatwić ich identyfikację, w następujący sposób:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Teraz dostosujmy ten kod CSS. To, co chcesz zrobić, to zmienić właściwości CSS, które definiują położenie panelu bocznego i głównych obszarów treści.

W naszym przypadku te klasy CSS mają właściwości float, margin, dopełnienie i width, ale może to wyglądać inaczej w zależności od twojego motywu.

Dla naszego panelu bocznego zmieniliśmyleft na right we właściwościach float i margin. Oznacza to, że panel boczny będzie znajdował się w przeciwnym kierunku do tego, w którym został pierwotnie umieszczony.

.sidebar {
float: right;
margin-right: 75%;
padding: 0;
width: 25%;
}

Po wykonaniu tej części zmieńmy położenie obszaru treści. Dla nas zadziałało to, że zmieniliśmy float: left na float: right i margin-right na margin-left. Dzięki temu WordPress przesunie obszar treści w prawo.

Dodatkowo dodaliśmy właściwości position: relative i right: 100%. Zapewniają one, że obszar treści nie będzie zbyt daleko od prawej strony.

.content-area {
float: right;
margin-left: -100%;
width: 70%;
position: relative;
right: 100%;
}

Ponownie, to, co działa w naszym motywie, może nie działać z twoim, ponieważ każdy motyw ma inne nazwy dla swoich klas CSS i używa innych właściwości. Zalecamy przeczytanie tego kompletnego odniesienia do CSS, aby dowiedzieć się, co działa najlepiej dla twojego motywu.

Dodatkowo, nie krępuj się bawić wartościami procentowymi szerokości i marginesów w kodzie, aby dostosować położenie panelu bocznego.

Po zmianie fragmentu kodu przewiń w dół do sekcji Wstawianie. Upewnij się, że Metodą wstawiania jest „Automatyczne wstawienie”.

Jeśli chodzi o lokalizację, wybierz opcję „Stopka w witrynie”, aby twój kod mógł zastąpić istniejący kod w pliku style.css.

Teraz możesz kliknąć przełącznik w prawym górnym rogu, aby włączyć kod i kliknąć „Zapisz fragment kodu”. Następnie wyświetl podgląd twojej witryny internetowej, aby zobaczyć wyniki.

Jeśli spojrzysz na zrzuty ekranu powyżej, możesz zobaczyć, że panel boczny na naszej witrynie demonstracyjnej znajdował się po prawej stronie.

Po edycji kodu w pliku style.css motyw ma teraz lewy panel boczny:

Teraz, gdy zmieniłeś stronę panelu bocznego, możesz zacząć zmieniać lub dodawać więcej treści na pasku bocznym. Oto kilka pomysłów, które mogą ci pomóc:

• Jak dodać obrazek do widżetu na panelu bocznym WordPressa?
• Jak dodać odnośnik do tytułów widżetów w WordPress?
• Jak dodać własne konfiguratory do widżetów WordPress?
• Jak wyłączyć niechciane widżety w WordPress?

Metoda 3: Jak zmienić panel boczny za pomocą FSE (motywy blokowe)

Jeśli używasz motywu blokowego, nie zobaczysz sekcji Widżety w swoim panelu administracyjnym WordPress. Być może zastanawiasz się, jak zmienić panel boczny, jeśli to menu nie istnieje.

Na szczęście proces ten jest znacznie prostszy niż w przypadku klasycznych motywów. Dzieje się tak, ponieważ motywy blokowe wykorzystują bloki Gutenberg i można po prostu przeciągać i upuszczać elementy, aby zmienić ich położenie za pomocą edytora całej witryny (FSE).

Po drugie, motywy blokowe zazwyczaj mają szablon zawierający panel boczny. Wystarczy to zmienić, a każda strona korzystająca z tego szablonu będzie miała na to wpływ. Możesz sprawdzić dokumentację twojego motywu, aby dowiedzieć się, jak nazywa się szablon, aby uzyskać do niego dostęp.

Do demonstracji użyjemy motywu Twenty Twenty-Four, który ma stronę z panelem bocznym.

Najpierw przejdź do Wygląd ” Edytor w twoim kokpicie.

Tutaj zobaczysz kilka menu, które pozwolą ci dostosować twój motyw blokowy.

Wybierz „Szablony”.

Teraz znajdź szablon z panelem bocznym, który chcesz edytować.

W Twenty Twenty-Four jest to „Strona z panelem bocznym” i „Pojedynczy z paskiem bocznym”. W zależności od twojego motywu, nazwa szablonu może nie wspominać wyraźnie, że ma panel boczny, więc ponownie, powinieneś sprawdzić dokumentację twojego motywu.

Przejdź dalej i wybierz ten szablon panelu bocznego.

Na następnej stronie zobaczysz przycisk „Edytuj” z ołówkiem.

Kliknij go, aby otworzyć edytor bloków.

Zazwyczaj motywy blokowe zawierają panel boczny i główny obszar treści w bloku kolumn. Dzięki temu wszystko jest uporządkowane, zorganizowane i ładnie oddzielone od siebie.

Aby zmienić stronę paska bocznego, wystarczy wybrać kolumnę, która go tworzy i przesunąć ją.

Najprostszym sposobem na to jest kliknięcie funkcji „Zobacz listę” po lewej stronie strony.

Następnie kliknij blok „Kolumny”, aby go rozwinąć i najedź kursorem na jego treść, aż znajdziesz kolumnę zawierającą elementy panelu bocznego.

W naszym przypadku pomogło to, że motyw Twenty Twenty-Four ma fragment szablonu o nazwie „Sidebar”, więc zidentyfikowanie go było łatwe. To powiedziawszy, niektóre motywy mogą po prostu zawierać zwykłą, nienazwaną grupę bloków, które tworzą panel boczny.

Będziesz wiedział, że wybrałeś prawą kolumnę, gdy prostokątne podświetlenie i pasek narzędzi pojawią się wokół całej grupy bloków dla paska bocznego.

Teraz na panelu bocznym kolumny zobaczysz strzałki, których możesz użyć do zmiany położenia kolumny.

Kliknij go i w zależności od tego, jak zaprojektowany jest blok Kolumny, być może będziesz musiał pobawić się pozycją, aż znajdziesz odpowiednie dopasowanie.

Twórca motywu mógł dodać kilka pustych kolumn, aby stworzyć przestrzeń między głównym obszarem treści a panelem bocznym.

Jeśli chcesz go usunąć, po prostu znajdź odpowiednią pustą kolumnę, korzystając z funkcji widoku listy, tak jak poprzednio. Następnie na pasku narzędzi bloku kliknij menu z trzema kropkami i wybierz „Usuń”.

Lub jeśli chcesz zrobić więcej miejsca między panelem bocznym a obszarem treści, możesz otworzyć kartę Ustawienia bloków i przejść do sekcji „Style”.

Następnie w sekcji „Wymiary” można przeciągnąć pokaz slajdów dla dopełnienia, marginesu lub odstępu między blokami.

Po zakończeniu kliknij „Zapisz”.

Następnie możesz wyświetlić podgląd wszystkich stron na urządzeniach mobilnych i komputerach stacjonarnych, które używają właśnie edytowanego szablonu, aby zobaczyć, jak wygląda.

Co zrobić, jeśli edytowałeś szablon, ale twoje strony lub wpisy go nie używają?

Wystarczy otworzyć stronę lub wpis w edytorze bloków. Następnie w panelu ustawień wpisu kliknąć odnośnik w polu „Szablon” i wybrać opcję „Zamień szablon”.

Teraz wystarczy wybrać szablon korzystający z panelu bocznego.

Następnie można zaktualizować stronę lub wpis.

Więcej porad i wskazówek dotyczących korzystania z edytora pełnej witryny lub edytora bloków można znaleźć w tych przewodnikach:

• Jak edytować witrynę internetową WordPress (najlepszy przewodnik)
• Jak dostosować kolory na twojej witrynie internetowej WordPress?

Metoda 4: Jak zmienić panel boczny za pomocą CSS Hero (wszystkie motywy)

Kolejna metoda wykorzystuje płatną wtyczkę o nazwie CSS Hero, która jest najlepszą wtyczką WordPress do wizualnej edycji CSS. Wtyczka ta ułatwia dostosowanie CSS twojego motywu bez dotykania jakiegokolwiek kodu, dzięki czemu jest świetna dla początkujących.

Ta metoda działa również ze wszystkimi motywami, więc jeśli uważasz, że poprzednie metody są nieco ograniczające, możesz zamiast tego użyć tej. To powiedziawszy, nie ma darmowej wersji wtyczki, więc musisz kupić płatny plan.

Więcej informacji na temat wtyczki i jej ceny można znaleźć w naszej recenzji CSS Hero.

Najpierw pobierz wtyczkę na swój komputer i zainstaluj ją na swojej witrynie internetowej WordPress. Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po zainstalowaniu na pasku narzędzi pojawi się menu „CSS Hero”. Kliknij je, aby otworzyć wizualny edytor CSS.

Należy pamiętać, że ponieważ nie wszystkie motywy WordPress działają w ten sam sposób, sposób użycia CSS Hero do zmiany panelu bocznego będzie inny. Zachęcamy więc do zabawy z platformą, aby zobaczyć, co działa dla Ciebie.

W związku z tym pokażemy, jakie ustawienia dostosowaliśmy, aby zmienić stronę panelu bocznego z prawej na lewą.

Najpierw kliknij obszar panelu bocznego na twojej stronie. Będziesz wiedział, że kliknąłeś właściwy, gdy wszystkie elementy twojego panelu bocznego zostaną wybrane jako grupa i będą miały wokół siebie prostokątne podświetlenie.

Po lewej stronie zobaczysz kilka menu, które pozwolą ci dostosować twoje elementy.

Z naszego doświadczenia wynika, że ustawienia, które mogą zmienić położenie panelu bocznego to Position, Measures i Spacings.

Pozycja określa sposób umieszczenia panelu bocznego w stosunku do innych elementów na stronie. W tym miejscu można wybrać opcję „Bezwzględna”, która daje pewną swobodę w określaniu położenia panelu bocznego.

Z tego miejsca można zmienić górny, prawy, dolny i lewy piksel, aby umieścić panel boczny.

Widać, że teraz panel boczny i główny obszar treści znajdują się po tej samej stronie.

Aby to poprawić, można najechać kursorem na kontener tworzący główny obszar treści i kliknąć go.

Teraz w panelu po lewej stronie wystarczy dostosować ustawienia pozycji, aż do uzyskania odpowiedniego dopasowania.

To, co zrobiliśmy, to pozostawiliśmy pozycję jako „Względną” i dostosowaliśmy prawe piksele.

Technicznie rzecz biorąc, to wszystko, co musisz zrobić. Jeśli jednak chcesz dostosować rozmiar panelu bocznego, wybierz jego obszar i przejdź do ustawień „Miary”.

Tutaj można zmienić szerokość i wysokość panelu bocznego.

Jeśli chcesz zmienić odstęp między panelem bocznym a głównym obszarem treści, możesz przejść do sekcji „Odstępy”.

Zobaczysz tutaj kilka pokazów slajdów do dostosowania dopełnienia i marginesu elementu.

Ponownie zachęcamy do zapoznania się z ustawieniami tej wtyczki, aby zmienić panel boczny według twoich upodobań.

Po zakończeniu możesz kliknąć przycisk „Zapisz” w prawym dolnym rogu strony.

Alternatywa: Tworzenie własnych paneli bocznych za pomocą wtyczki WordPress Page Builder

Do tej pory zbadaliśmy metody zmiany lokalizacji panelu bocznego dla całej twojej witryny internetowej. Ale co, jeśli chcesz mieć określone panele boczne tylko dla niektórych stron lub typów treści? W końcu nie wszystkie strony potrzebują tej samej treści na panelu bocznym.

Na przykład, twoja strona główna może skorzystać z bardziej ogólnego panelu bocznego z ikonkami mediów społecznościowych i wezwaniem do działania. Jednak strona produktu może być lepsza z panelem bocznym prezentującym powiązane produkty lub opinie klientów.

W takim przypadku możesz chcieć utworzyć niestandardowe panele boczne dla twojego motywu WordPress. Dzięki własnym panelom bocznym możesz:

• Przypisywanie określonych paneli bocznych do różnych stron lub typów treści. Pozwala to na dostosowanie treści panelu bocznego do konkretnych potrzeb twojej strony.
• Stwórz bardziej dynamiczne i angażujące doświadczenie użytkownika. Oferując odpowiednie treści na panelu bocznym, możesz sprawić, że odwiedzający będą zaangażowani i zainteresowani dalszą eksploracją Twojej witryny internetowej.

Tutaj z pomocą przychodzi wtyczka WordPress do tworzenia stron. Wtyczki te oferują funkcję „przeciągnij i upuść” oraz rozbudowane biblioteki szablonów, ułatwiając tworzenie własnych paneli bocznych.

Zalecamy korzystanie z SeedProd, który jest popularną i przyjazną dla początkujących wtyczką do tworzenia stron i motywów. SeedProd umożliwia łatwe projektowanie własnych stron i motywów dzięki przyjaznemu dla użytkownika interfejsowi.

Więcej informacji można znaleźć w tych artykułach:

• Jak dodać własny nagłówek, stopkę lub panel boczny dla każdej kategorii?
• Jak wyświetlić inny panel boczny dla każdego wpisu i strony w WordPress?

Mamy nadzieję, że ten poradnik WordPress pomógł ci dowiedzieć się, jak zmienić panel boczny w WordPress. Zachęcamy również do zapoznania się z naszym artykułem na temat dodawania pełnoekranowego responsywnego menu w WordPressie oraz z naszą listą najlepszych darmowych kreatorów logo, dzięki którym będziesz wyglądać jak profesjonalista.

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.