Niedawno jeden z naszych czytelników zapytał nas, jak zmienić stronę paska bocznego w motywie WordPress?
Zazwyczaj otrzymujemy to pytanie od użytkowników, którzy chcą zmienić lokalizację paska bocznego z lewej na prawą lub z prawej na lewą.
W tym samouczku pokażemy, jak zmienić lokalizację paska bocznego w WordPress.
Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu
Wróćmy do tego, dlaczego tu jesteśmy.
Po co zmieniać lokalizację 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 widzieli je jako pierwsi. Można to jednak odwrócić, jeśli witryna jest w języku RTL (po lewej stronie).
Dowiedz się, czy jeśli Twój blog WordPress ma paski boczne
Wiele witryn WordPress używa typowego układu bloga z dwiema kolumnami. Jedna dla treści, a druga dla paska bocznego.
Jeśli jesteś nowy na stronach internetowych, powinieneś wybrać motyw WordPress, który ma pasek boczny w preferowanej lokalizacji.
Wiele Motywy WordPress oferują opcje zmiany strony paska bocznego w ustawieniach paska bocznego. Jeśli jednak Twój motyw WordPress nie ma tej opcji, będziesz musiał ręcznie zmienić stronę paska bocznego. Idź dalej, odkrywając jak usunąć pasek boczny z WordPress
To powiedziawszy, spójrzmy na metodę, której musisz użyć, aby łatwo zmienić stronę paska bocznego WordPressa za pomocą CSS.
Zmiana paska bocznego za pomocą CSS
Przed wprowadzeniem jakichkolwiek zmian w motywie WordPress należy najpierw rozważyć rozszerzenie tworzenie motywu podrzędnego, Używając motywu podrzędnego, będziesz mógł zaktualizować motyw nadrzędny bez utraty zmian.
Odkrywaj Jak wyświetlić inny pasek boczny dla każdej pozycji na WordPressie
Po drugie, zawsze należy utworzyć kopię zapasową witryny WordPress podczas wprowadzania zmian w aktywnym motywie w czasie rzeczywistym.
Będziesz potrzebował klienta FTP, aby edytować pliki motywów WordPress. Zapoznaj się z przewodnik na temat korzystania z FTP.
Zaloguj się do witryny WordPress za pomocą klienta FTP i przejdź do folderu motywów. Zwykle znajduje się w:
/ Yoursite / wp-content / themes / twój-theme-folderu /
Teraz musisz pobrać i otworzyć główny plik arkusza stylów swojego motywu WordPress w edytorze tekstu, takim jak Notatnik. Ten plik nosi nazwę style.cssi znajduje się w katalogu głównym motywu WordPress.
Odkrywaj jak zarządzać plikami i folderami WordPress
W tym pliku znajdź klasę CSS paska bocznego. Ogólnie ta klasa to „ sidebar ”. W tym przykładzie używamy domyślnego motywu WordPress „ dwadzieścia piętnaście Kto ma tę klasę dla paska bocznego:
.sidebar {float: left; margines z prawej: -100%; max-width: 413px; pozycja: względna; szerokość: 29.4118%; }
Jak widać pasek boczny unosi się w lewo z marginesem -100%. Zmienimy pływak w prawo:
.sidebar {float: right; margines lewy: -100%; max-width: 413px; pozycja: względna; szerokość: 29.4118%; }
Zapisz zmiany i prześlij plik style.css na swoją stronę za pomocą klienta FTP. Teraz, jeśli odwiedzisz swoją witrynę, będzie ona wyglądać następująco:
Rzeczywiście przesunęliśmy pasek boczny, ale nie przesunęliśmy obszaru zawartości. " Dwadzieścia Piętnaście Używa tego CSS do zdefiniowania pozycji obszaru zawartości.
.site-content {display: block; float: left; margines lewy: 29.4118%; szerokość: 70.5882%; }
Zmienimy to, aby przenieść zawartość w prawo. W następujący sposób:
.site-content {display: block; float: left; margines z prawej: 29.4118%; szerokość: 70.5882%; }
Oto jak będzie wyglądać Twoja witryna po zastosowaniu tego kodu CSS.
Jak widać zmieniliśmy położenie obszaru zawartości i paska bocznego. Jednak po lewej stronie nadal jest biały blok.
Idź dalej, odkrywając jak zarządzać plikami i folderami WordPress
Często napotykasz te błędy podczas pracy z CSS. Potrzeba trochę pracy detektywistycznej, aby zrozumieć, co to powoduje i jak to naprawić.
Aby przejrzeć kod źródłowy, użyj narzędzia „Inspector” przeglądarki. Najedź myszą na region w przeglądarce, którego dotyczy problem, kliknij prawym przyciskiem i wybierz „Inspektor” z menu przeglądarki.
Poruszając myszą po widoku kodu źródłowego, zauważysz obszary, na które ma wpływ, podświetlone w podglądzie na żywo. W prawym okienku będziesz mógł zobaczyć CSS użyty dla tego wybranego elementu.
Odkryj nasze Wtyczki 5 WordPress do wizualnej edycji CSS na swoim blogu
Dlatego CSS odpowiadający podświetlonemu elementowi musi zostać ponownie dostosowany.
@media screen i (min-width: 59.6875em) {body: before {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); treść: „”; wyświetlacz: blok; wzrost: 100%; min-wysokość: 100%; pozycja: stała; góra: 0; po lewej: 0; szerokość: 29.4118%; indeks z: 0; / * Naprawiono błąd flashowania podczas przewijania w Safari * /}
Ten kod CSS dodaje pusty blok o szerokości 29,4118% i szerokości 100% w lewym górnym rogu. Oto jak zamierzamy przenieść go w prawo.
@media screen i (min-width: 59.6875em) {body: before {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); treść: „”; wyświetlacz: blok; wzrost: 100%; min-wysokość: 100%; pozycja: stała; góra: 0; po prawej: 0; szerokość: 29.4118%; indeks z: 0; / * Naprawiono błąd flashowania podczas przewijania w Safari * /}
Po zapisaniu i załadowaniu arkusza stylów na serwer, tak będzie wyglądać Twoja witryna.
Praca z CSS może być myląca dla początkujących. Jeśli nie chcesz wykonywać całej pracy ręcznej, możesz spróbować Wtyczka WordPress CSS Hero. Pozwala edytować CSS bez pisania kodu i działa z każdym motywem WordPress.
Odkryj także niektóre wtyczki premium WordPress
Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.
Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.
1. Zxeion
Zxeion jest potężnym WordPress Plugin premia odpowiedzialna za poprawę bezpieczeństwa Twojej witryny. Ta wtyczka zawiera zbiór narzędzi ochronnych i zabezpieczających, które ochronią Twoją witrynę przed możliwymi atakami.
System ochrony w czasie rzeczywistym pomoże Ci zidentyfikować zagrożenia dla Twojej witryny i zablokować je, bez konieczności robienia czegokolwiek.
Odkryj także nasze 7 wtyczek, aby zwiększyć swoje paski boczne w WordPress
Jego funkcje to: ochrona w czasie rzeczywistym, doskonała obsługa klienta, regularne aktualizacje, blokowanie adresów IP, doskonała dokumentacja, nowoczesny i profesjonalny interfejs, dedykowana obsługa klienta i inne
2. Slaido
Slaido jest WordPress Plugin premium, który pozwala wybierać spośród prawie 320 responsywnych szablonów suwaków i zaimportować jeden z nich do swojej witryny za pomocą zaledwie kilku kliknięć. To kompletny zestaw szablonów, idealny do Suwak Revolution. Aby w pełni z niego skorzystać, musisz go najpierw zainstalować WordPress Plugin
Jego główne cechy to: responsywny układ suwaków, łatwość importowania lub eksportowania suwaków, regularne aktualizacje, obsługa klienta dostępna 24/7, płynne i bardzo fajne animacje, dostępność samouczki wideo zapewniające szybki start, obsługę czcionek Google i wiele innych.
3. Skontaktuj się z nami
Formularz kontaktowy to responsywna wtyczka WordPress premium i proste narzędzie, ale bogate w opcje dostosowywania, które pozwalają wyświetlać przejrzysty i zachęcający formularz, w którym odwiedzający mogą skontaktować się z Tobą, pozostawiając swoją wiadomość.
Będziesz mógł zdefiniować niezbędne pola, wybrać najlepszy układ pól i całkowicie go dostosować, aby zachęcić klientów lub odwiedzających do pozostawienia swoich sugestii lub wiadomości.
Zapraszamy również do przeczytania: Wtyczki 10 WordPress do tworzenia i zarządzania witryną restauracji
Wystarczy ustawić adres e-mail, na który chcesz otrzymywać wiadomości, i użyć go do rozwoju firmy w najbardziej dochodowym kierunku.
Polecane zasoby
Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.
- Jak znaleźć adres URL logowania na blogu WordPress
- Jak stworzyć strefę superbohatera z animowanym tekstem
- Jak dostosować CSS witryny WordPress
- Jak dodać kategorię do menu bloga WordPress
Wnioski
Nie! To wszystko w tym samouczku. Mamy nadzieję, że pomoże Ci to zmienić stronę paska bocznego na Twoim blogu WordPress. Nie wahaj się udostępnij ten artykuł znajomym w swoich ulubionych sieciach społecznościowych.
Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.
Jeśli masz sugestie lub uwagi, zostaw je w naszej sekcji commentaires.
...
