Czasami chcielibyśmy przebudować lub po prostu zmienić nieco motyw na Wordpressa, z którego korzystamy. Nie trzeba wcale do tego prosić programisty, ani uczyć się PHP. Podstawowe zmiany możemy wprowadzić samodzielnie, bez jakichkolwiek umiejętności. Dzisiaj pokażemy Wam, jak ustawić pasek boczny na naszej stronie lub blogu Wordpress.

Każdy motyw, z którego korzystamy, personalizując wygląd swojej strony działającej na platformie Wordpress, posiada oczywiście własny, unikalny wygląd. Obejmuje to nie tylko układ grafik, responsywność czy sposób wyświetlania wpisów. Również dotyczy to układu kolumn, czyli popularnych pasków bocznych, w których wyświetlane jest menu z opcjami logowania, linkami do archiwów, kategorii lub tagów. Są one najczęściej ustawione „na sztywno”, a więc bez możliwości zmiany.

W poprzednich poradnikach pokazywaliśmy, jak w prosty sposób zmieniać wygląd gotowych motywów. Tym razem chcielibyśmy zaprezentować metodę, która pozwala na dodanie i ustawienie paska bocznego. Przyda się to zwłaszcza w jednokolumnowych motywach, ale także wówczas, gdy chcemy przenieść pasek boczny w inne miejsce. Przejdźmy jednak do samego poradnika.

Zmiana paska bocznego za pomocą CSS

Zapewne słyszeliście o CSS, czyli stylach definiujących wygląd i zachowanie motywów. To zestaw reguł, które definiują, w jakim miejscu wyświetlane są poszczególne elementy strony, jaki mają kształt i kolor, z jakich fontów korzysta nasza strona. A także, gdzie jest i jak wygląda pasek boczny.

Aby uzyskać dostęp do pliku CSS obsługującego motyw na naszej stronie, wystarczy że z poziomu panelu zarządzania Wordpressem przejdziemy w lewym pasku menu do zakładki Wygląd > Edytor. Następnie, w prawej części okna odszukujemy plik Style CSS i otwieramy go. Teraz dopiero możemy wprowadzić interesujące nas zmiany oraz poprawki. Dostęp do CSS możliwy jest również z poziomu serwera FTP. Wówczas, po pobraniu pliku na komputer, edytujemy go z poziomu programu Notatnik.

Zanim jednak przejdziemy do edycji CSS-a, koniecznie trzeba stworzyć motyw potomny, dzięki czemu zabezpieczymy wszelkie zmiany przed ewentualnymi błędami.

Następnie, jeżeli nasz motyw korzysta z paska bocznego, w pliku CSS należy znaleźć pozycję zaczynającą się od .sidebar {. Może ona np. wyglądać następująco: 

.sidebar {

float: left;

margin-right: -100%;

max-width: 413px;

position: relative;

width: 29.4118%;

}

Jeżeli chcemy, aby nasz pasek boczny wyświetlany był nie z lewej, a prawej strony, wystarczy zamienić w pliku pole „float: left” na „float: right”. Jeżeli natomiast chcielibyśmy całkowicie wykasować pasek boczny z naszej strony, należy usunąć z pliku CSS informację o .sidebar.

Często bywa tak, że mimo wprowadzonych zmian, nie są one aktywne na stronie. Jest tak najczęściej dlatego, że .sidebar nie jest jedynym rekordem definiującym zachowanie paska bocznego w CSS. W takim wypadku należy poszukać kolejnych rekordów i sprawdzić, jakie mają one funkcje. Zwykle wszystkie metody dotyczące paska bocznego zapisane są w pliku CSS jedna po drugiej. 

Np. w większości motywów typu Fifteen, Eleven itp. występuje również zapis .site-content definiujący kierunek marginesów. To ważny element, bez którego zmiany nie będziemy mogli np. przemieść paska bocznego z lewej strony na prawą. 

Zmiana paska bocznego za pomocą wtyczki

Zmiany w pasku bocznym na naszej stronie możliwe są również za pomocą wtyczek. Tutaj jednak nie mamy zbyt dużego pola do popisu. 

Dostępne wtyczki pozwalają bowiem np. na ustawienie różnych zawartości pasków bocznych w zależności od wyświetlanej stronie. Funkcje takie oferują np. Simple Page Sidebars czy Custom Sidebars. Rozszerzenia te pozwalają na ustawienie osobnych widgetów z poziomu każdej strony czy też wybranych podstron na naszej witrynie. Obsługiwane są z poziomu zakładki Wygląd > Widgety. 

Jeżeli natomiast zależałoby nam na całkowitej zmianie wyglądu i położenia paska bocznego na naszej witrynie lub blogu, należy skorzystać z bardziej zaawansowanych narzędzi. W osobnym poradniku omawialiśmy jakiś czas temu wszystkie wtyczki, które pozwalają na zmianę wyglądu motywu, z którego korzystamy. W tym również oczywiście pasków bocznych. Jeżeli jesteście zainteresowani takim rozwiązaniem, odsyłamy do tego poradnika.

Na zakończenie prosimy oczywiście o komentarze i opinie, zwłaszcza, jeżeli nie potraficie poradzić sobie z tematem przenoszenia czy usuwania paska bocznego ze swojej strony. Opiszcie swoje problemy w komentarzach pod tym tekstem, postaramy się pomóc.