W artykule:
Niedawno jeden z naszych czytelników zapytał nas, jak zmienić stronę paska bocznego w motywie WordPress. Dostajemy to pytanie często, gdy użytkownicy chcą zmienić swój pasek boczny od lewej do prawej lub od prawej do lewej. W tym artykule pokażemy, jak zmienić stronę paska bocznego w WordPress.
Po co zmieniać stronę paska bocznego w WordPress
Eksperci od użyteczności uważają, że ludzie skanują strony od lewej do prawej. Zalecają umieszczenie ważnych treści po lewej stronie, aby użytkownicy zobaczyli je jako pierwsi. Można to jednak odwrócić, jeśli witryna jest w języku napisanym w kierunku od prawej do lewej.
Wiele witryn WordPress korzysta z typowego układu bloga z dwiema kolumnami. Jedna dla treści, a druga kolumna dla paska bocznego.
Jeśli dopiero zaczynasz witrynę, powinieneś wybrać motyw WordPress, który ma pasek boczny w preferowanej lokalizacji.
Wiele motywów ma opcje przełączania stron paska bocznego z ustawień motywu. Jeśli jednak Twój motyw nie ma tej opcji, musisz ręcznie zmienić strony paska bocznego.
Powiedziawszy to, przyjrzyjmy się, jak możesz łatwo zmienić stronę paska bocznego w WordPress za pomocą odrobiny CSS.
Zmiana strony paska bocznego w WordPress za pomocą CSS
Przed wprowadzeniem jakichkolwiek zmian do motywu należy najpierw rozważyć utworzenie motywu podrzędnego. Korzystając z motywu podrzędnego, będziesz mógł zaktualizować motyw nadrzędny bez utraty zmian.
Po drugie, zawsze powinieneś tworzyć kopię zapasową swojej witryny WordPress, gdy wprowadzasz bezpośrednie zmiany do aktywnego motywu WordPress.
Będziesz potrzebował klienta FTP do edycji plików motywów. Zobacz nasz przewodnik dla początkujących, jak używać FTP do przesyłania plików do WordPress.
Połącz się z witryną WordPress za pomocą klienta FTP i przejdź do folderu motywu. Zwykle znajduje się na:
/ yourwebsite / wp-content / themes / your-theme-folder/
Teraz musisz pobrać i otworzyć główny plik arkusza stylów motywu w zwykłym edytorze tekstu, takim jak Notatnik. Ten plik nazywa się styl.css i znajduje się w katalogu głównym motywu.
W tym pliku Znajdź klasę CSS dla paska bocznego. Zwykle jest .sidebar. W tym przykładzie używamy domyślnego motywu WordPress Twenty Fifteen, który ma ten CSS, aby zdefiniować pasek boczny:
.sidebar {
float: left;
margin-right: -100%;
max-width: 413px;
pozycja: względna;
szerokość: 29.4118%;
}
Jak widać, pływa na pasku bocznym w lewo z marginesem -100% w prawo. Zmienimy to na float right I margin-left w ten sposób:
.sidebar {
float: right;
margin-left: -100%;
max-width: 413px;
pozycja: względna;
szerokość: 29.4118%;
}
Zapisz zmiany i prześlij styl.plik css z powrotem do twojej witryny za pomocą klienta FTP. Teraz, jeśli odwiedzisz swoją stronę internetową, będzie ona wyglądać tak:
To dlatego, że przenieśliśmy pasek boczny, ale nie przenieśliśmy obszaru zawartości. Twenty Fifteen używa tego CSS do określenia pozycji obszaru zawartości.
.site-content {
wyświetlacz: blok;
float: left;
/ align = "left" / 294118%;
szerokość: 70.5882%;
}
Zmienimy go, aby przenieść zawartość w prawo. O tak.:
.site-content {
wyświetlacz: blok;
float: left;
margin-right: 29.4118%;
szerokość: 70.5882%;
}
Tak wyglądała nasza strona po zastosowaniu tego CSS.
Jak widać, zmieniliśmy strony zarówno dla obszaru zawartości, jak i paska bocznego. Jednak nadal jest biały blok po lewej stronie.
Natkniesz się na takie rzeczy podczas pracy z CSS. Trzeba trochę detektywistycznej pracy, żeby dowiedzieć się, co jest tego przyczyną i jak to dostosować.
Użyj narzędzia „Inspect” w przeglądarce, aby sprawdzić kod źródłowy. Wskaż dotknięty region w przeglądarce, kliknij prawym przyciskiem myszy i wybierz Inspect z menu przeglądarki.
Poruszając myszą w widoku Kod źródłowy, zauważysz obszary, na które ma wpływ, podświetlone w podglądzie na żywo. W prawym okienku będzie można zobaczyć CSS używany dla wybranego elementu.
Zorientowaliśmy się, że ten CSS w naszym arkuszu stylów wymaga dostosowania.
@media screen and (min-width: 59.6875 em) {
body: before {
background-color: # ffff;
box-shadow: 0 0 1px rgba (0, 0, 0, 0.15);
treść: "";
wyświetlacz: blok;
wysokość: 100%;
min-Wysokość: 100%;
pozycja: stała;
top: 0;
pozostało: 0;
szerokość: 29.4118%;
z-index: 0; /* Naprawiono błąd migania z przewijaniem w Safari */
}
Ten kod CSS dodaje pusty blok zawartości o szerokości 29.4118% i szerokości 100% w lewym górnym rogu. Oto jak przeniesiemy go w prawo.
@media screen and (min-width: 59.6875 em) {
body: before {
background-color: # ffff;
box-shadow: 0 0 1px rgba (0, 0, 0, 0.15);
treść: "";
wyświetlacz: blok;
wysokość: 100%;
min-Wysokość: 100%;
pozycja: stała;
top: 0;
prawo: 0;
szerokość: 29.4118%;
z-index: 0; /* Naprawiono błąd migania z przewijaniem w Safari */
}
Po zapisaniu i przesłaniu arkusza stylów z powrotem na serwer, tak wyglądała nasza strona.
Praca z CSS może być myląca dla początkujących. Jeśli nie chcesz wykonywać całego ręcznego kodu, możesz wypróbować CSS Hero. Pozwala edytować CSS bez pisania kodu i działa z każdym motywem WordPress.
Mamy nadzieję, że ten artykuł pomógł Ci zmienić stronę paska bocznego w WordPress. Możesz również zobaczyć naszą listę sztuczek paska bocznego 12 WordPress, aby uzyskać maksymalne wyniki.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
