Jak rozszerzyć motyw wordpress. Jak zmienić rozmiar paska bocznego — metoda ręczna i edycja za pomocą edytora wizualnego paska bocznego
Od autora: cześć przyjaciele. W innym artykule na temat WordPressa zastanowimy się, jak zmienić szablon wordpress. Jeśli nigdy nie spotkałeś się z koniecznością modyfikacji szablonu WordPress, koniecznie przeczytaj Ten artykuł, bo prędzej czy później najprawdopodobniej będziesz miał do czynienia z kwestiami dostosowywania i edycji szablonu WordPress.
Na początek zdefiniujmy najczęstsze pytania, z którymi borykają się użytkownicy podczas dostosowywania szablonu WordPress dla siebie. Oto ich przykładowa lista:
jak edytować szablon wordpress
zmień szerokość szablonu w wordpressie
jak zmienić rozmiar szablonu wordpress
jak zmienić kolor szablonu wordpress
jak zmienić czcionkę w szablonie wordpress
A to tylko niewielka lista problemów, które możesz napotkać lub możesz pomóc innym rozwiązać, w tym za opłatą, jeśli tworzysz strony internetowe na zamówienie.
Wszystkie pytania z powyższej listy można rozwiązać na dwa sposoby, w zależności od tematu używanego na stronie. Zacznijmy od najprostszej opcji, która nie wymaga znajomości układu. Ta opcja jest odpowiednia, jeśli szablon obsługuje edycję z ustawień.
Przejdźmy do sekcji Wygląd zewnętrzny- Dostosuj i zobacz strona główna witryny i po lewej stronie strony dostępne ustawienia witryny. Wśród nich mogą być ustawienia projektowe.
Na przykład spróbujmy zmienić schemat kolorów Strona. Przejdź do menu Kolory i zmień tło boku i części centralne Strona.
Jak widać, jest to dość wygodne, a zmiana koloru szablonu WordPress jest dość prosta - natychmiast widzimy wynik i możemy go ocenić.
Jednak nie każdy motyw oferuje wszystkie potrzebne nam dostosowania szablonów WordPress. Na przykład jest mało prawdopodobne, aby istniały ustawienia umożliwiające zmianę szerokości szablonu na WordPress, na przykład nawet w bieżącym motywie nie ma ustawień, które pozwalają zmienić czcionkę w szablonie i tak dalej. Jak być w tym przypadku? W tym miejscu będziemy musieli uciec się do drugiej opcji, a tutaj potrzebne są już pewne umiejętności układania.
Dlatego musimy edytować najczęściej tylko jeden plik - jest to plik stylu style.css. Znajduje się w folderze motywu. Jako przykład zmieńmy kolor czcionki. Nawiasem mówiąc, możesz to zrobić bezpośrednio z panelu administracyjnego WordPressa. Po prostu bądź ostrożny i uważaj, aby przypadkowo nie „zepsuć” strony. najlepiej zrobić utworzyć kopię zapasową motywy przed zmianą czegokolwiek w nim. Przejdź więc do menu Wygląd - Edytor i domyślnie powinieneś mieć otwarty plik stylu motywu do edycji.
Jeśli tak nie jest, wybierz ten plik z listy po prawej stronie, nazywa się on Arkusz stylów (style.css). Najczęściej kolor czcionki jest ustawiany w treści, więc znajdźmy style tego elementu i ustawmy kolor czerwony jako kolor czcionki.
Po zapisaniu pliku możemy zaktualizować stronę i zobaczyć czerwony kolor głównej czcionki na stronie.
Jak widać, dostosowanie szablonu WordPress dla siebie jest dość prostym zadaniem. Przy odrobinie znajomości CSS możesz modyfikować szablon WordPress i produkować niezbędne ustawienie szablon. Według tego samego schematu możemy rozwiązać inne podobne problemy. Na tym żegnam się z tobą. Powodzenia i do zobaczenia wkrótce!
Musisz mieć możliwość zmiany rozmiaru szablonu, jeśli chcesz stworzyć dobrą witrynę. Domyślnie wiele motywów oferuje niewygodne rozmiary ramek szablonów. Wąskie tematy są tak samo złe, jak zbyt szerokie. Powinieneś mieć kompromis, który jest odpowiedni dla funkcji w witrynie. Tylko w ten sposób zawartość Twojego zasobu będzie wyświetlana poprawnie, a wszystkie widżety zmieszczą się na pasku bocznym. W tym artykule dowiesz się, w jaki sposób można dostosować rozmiar kolumn bocznych.
Bez paska bocznego strona wygląda na bezużyteczną. Jeśli chcesz jakoś wizualnie rozcieńczyć zawartość strony, powinieneś zmienić szablon WordPress, dodając pasek boczny o określonym rozmiarze. Zazwyczaj kolumny boczne są już w nim domyślnie zainstalowane. Ale nie zawsze szerokość paska bocznego jest optymalna dla konkretnego projektu. Przyjrzyjmy się sposobom zmiany szerokości i wysokości boku witryny WordPress.
Jaki powinien być rozmiar paska bocznego?
Być może nie będziesz musiał niczego zmieniać. Zmień pasek boczny tylko wtedy, gdy wygląda na „krzywy” i nienaturalny. Najpierw upewnij się, że pasek boczny ma mniejszą szerokość niż treść strony zawierającej treść. Pasek boczny nie jest kluczową częścią serwisu, dlatego nie należy poświęcać mu zbyt wiele uwagi – może on zajmować co najwyżej 40% widocznej części strony. Pamiętaj, że jeśli masz dwa paski boczne (lub kilka), ich szerokość nie powinna przekraczać 50% szerokości całej strony. Lepiej używać tylko jednej kolumny bocznej - w ten sposób jest bardziej wydajna.
Istnieje „złota zasada” projektantów witryn korzystających tylko z jednego paska bocznego. Zasada ta mówi, że jeśli na stronie znajduje się tylko jeden pasek boczny, nie powinien on zajmować więcej niż 38% szerokości witryny. Wielu wybitnych projektantów stron internetowych mówi o tak tajemniczej postaci (np. Jarel Remik).
Jeśli chodzi o wysokość, ważne jest, aby pasek boczny nie wystawał na górę strony. Jego wysokość w górnym limicie powinna być zbliżona do głównej części strony. Ale dolny limit można zmienić, aby podstawowa część witryny była dłuższa. Nie musisz próbować upychać wszystkiego na stronie na pasku bocznym - tylko najważniejsze. A jeśli informacji jest naprawdę dużo, utwórz dwa paski boczne, ale nie musisz rozciągać paska bocznego do stopki witryny.
Jak ręcznie zmienić rozmiar paska bocznego?
Porozmawiajmy teraz o tym, jak samodzielnie zmienić rozmiar kolumn bocznych i samą ramkę szablonu bez korzystania z żadnych dodatków. Ta metoda polega na zmianie kod źródłowy stron. To właśnie w tagach html zawarty jest parametr rozmiaru szablonu. Pamiętaj, że zmiana rozmiaru może mieć negatywne konsekwencje, jeśli prześlesz obraz o niestandardowym rozmiarze jako tło. Dlatego lepiej zmienić parametry ramki na etapie układu strony.
Parametry paska bocznego w kodzie mają postać bloku. Aby zmienić rozmiar całej ramki, w tym bocznych kolumn, będziesz musiał wejść do kodu i naprzemiennie dostosować parametry liczbowe szerokości i wysokości każdego elementu. Mianowicie:
- nagłówek - odpowiada za rozmiar nagłówka strony;
- bg - jest to główna treść, czyli część strony, na której zostaną umieszczone artykuły (w tej części znajduje się pasek boczny);
- stopka to stopka strony, czyli jej dolna część.
Aby poznać wymiary konkretnego bloku, musisz kliknąć element opakowania w „Widoku kodu strony”. Z boku sekcji CSS przeglądarki zobaczysz wartości liczbowe szerokości elementu w pikselach. Aby zmienić rozmiar całego szkieletu, musisz edytować główny element, a następnie wprowadzić zmiany również w innych elementach. Zaleca się to zrobić w dniu serwer lokalny aby Twoja witryna nie „skakała” przed użytkowników. Ogólnie rzecz biorąc, lepiej to zrobić jeszcze przed uruchomieniem projektu internetowego.
Aby zmienić rozmiar paska bocznego, znajdź coś takiego jak ta linia
Ta linia odpowiada za parametry środkowej części strony, czyli za blok treści i za kolumny boczne. Nie dotykaj "głównej" linii - to główna część serwisu. Musisz znaleźć tag "mainnav" - to jest pasek boczny. Wystarczy zmienić pozycję szerokości w CSS, która odpowiada za szerokość - wprowadzić inną wartość rozmiaru. Możesz zmniejszyć lub powiększyć pasek boczny, ale pamiętaj, aby postępować zgodnie z powyższymi wskazówkami dotyczącymi rozmiaru, aby zapewnić prawidłowe wyświetlanie witryny.
Aby zmiany zostały zapisane, muszą zostać dokonane na serwerze. Oznacza to, że możesz początkowo przetestować regulacje na lokalny hosting, ale następnie skopiuj edytowany plik style.css i dodaj go do baz danych głównego serwera. Dopiero wtedy zmiany zaczną obowiązywać.
Wtyczka do zmiany rozmiaru paska bocznego
Jeśli nie chcesz przedzierać się przez kaskadowe arkusze stylów i szukać elementów, które wymagają edycji, możesz użyć wtyczki Visual Sidebar Editor for WordPress. Jest to specjalny moduł zaprojektowany specjalnie do generowania pasków bocznych. Jest to część większego narzędzia Visual Composer.
Wtyczka Visual Composer to naturalny kreator stron dla WordPress. Dzięki niemu możesz tworzyć od podstaw gotowy szablon. Moduł współpracuje ze skróconymi kodami i jest bardzo łatwy w instalacji. Jeśli zmiana rozmiaru paska bocznego nie jest jedyną rzeczą, którą musisz zrobić, pobierz wtyczkę Visual Composer i dodaj Edytor Visual Sidebar Editor jako dodatek. Jeśli problem dotyczy tylko rozmiaru paska bocznego strony, wystarczy moduł Visual Sidebar Editor.
Zaletą korzystania z wtyczki do zmiany paska bocznego jest to, że robi wszystko automatycznie. Oznacza to, że pokazujesz, co chcesz zmienić za pomocą systemu Drag & Drop, a moduł niezależnie koryguje kod elementu na podstawie Twoich żądań. Jeśli chcesz spróbować swoich sił w edycji tagów html, to wtyczka da Ci taką możliwość. Ponadto ma specjalne skróty do robienia dodatkowe funkcje na stronie - ponad 40 rozszerzeń.
Kolejnym plusem korzystania z takiej wtyczki do edycji stron jest to, że zmiany są zapisywane, niezależnie od wersji silnika. Nawet jeśli zaktualizujesz WordPress, szablon się nie zmieni - jest kontrolowany przez moduł. Dlatego możesz przełączyć się na starsze wersje lub zaktualizować WordPressa - nie zaszkodzi to już wymiarowi paska bocznego. Ponadto wtyczka działa z wygodnym importem i eksportem - to znaczy możesz kopiować paski boczne z jednej witryny i przenosić je do innej. A co najważniejsze, moduł działa według niezwykle jasnej zasady – nawet początkujący szybko go opanuje.
Jeśli podoba Ci się praca edytora Visual Sidebar Editor, rozważ zainstalowanie kompletnego zestawu dodatków - modułu Visual Composer. Wtedy łatwo będzie Ci edytować dowolny element na stronach portalu.
Czy chcesz stworzyć pełnowymiarową stronę WordPress?
A potem wróćmy do tego, dlaczego tu jesteśmy.
Metoda 1: Używanie wbudowanego szablonu szerokości w motywie WordPress
Ta metoda jest zalecana, jeśli Twój motyw WordPress zawiera już pełny szablon strony. Jeśli go nie masz, zapoznaj się z następnym wyborem i zdobądź go.
Najpierw musisz edytować stronę lub utworzyć nową, odwiedzając „ Strony > Dodaj Nowa strona
W oknie edycji strony wybierz Pełna szerokość jako szablon pod polem wyboru atrybutów strony.
Po wybraniu modelu Pełna szerokość Musisz zarejestrować swoją stronę. Możesz kontynuować dostosowywanie strony, aby dodać więcej treści, lub kliknąć przycisk podglądu, aby zobaczyć, jak działa.
Jeśli nie masz opcji „Pełna szerokość” – „szablon pełna szerokość' - na ekranie edycji strony oznacza to, że Twój motyw WordPress nie zawiera tej strony.
Ale nie martw się, pokażemy Ci, jak łatwo jest stworzyć pełną stronę bez zmiany motywu WordPress.
Metoda 2: Jak utworzyć szablon strony o pełnej szerokości
Ta metoda wymaga edycji używanych plików motywów WordPress i podstawowej znajomości PHP, CSS i HTML.
Przy okazji zapraszamy również do konsultacji
Najpierw musisz otworzyć Edytor tekstu, na przykład Notatnik, i wklej następujący kod do pustego pliku:
Ten kod po prostu określa nazwę szablonu pliku i prosi WordPress o wyodrębnienie szablonu nagłówka.
Następnie potrzebujesz części zawartości kodu. Połącz się ze swoją witryną za pomocą klienta FTP ( lub menedżer plików w cPanel) następnie idź do /wp-content/themes/twój-katalog-motywów/ .
Następnie powinieneś znaleźć plik o nazwie „ strona.php”. To jest domyślny plik szablonu strony dla Twojego motywu.
Skopiuj wszystko po „ pobierz_nagłówek() I wklej go do pliku Pełna szerokość.php To właśnie stworzyłeś na swoim komputerze.
Teraz musisz spojrzeć na zawartość pliku „full-width.php” i usunąć ten wiersz kodu:
Ten wiersz po prostu przywraca pasek boczny i wyświetla go w motywie WordPress. Usuwając to, Twój motyw nie będzie wyświetlał paska bocznego podczas korzystania z szablonu Pełna szerokość.
Możesz zobaczyć tę linię pojawiającą się wielokrotnie w motywie WordPress. Jeśli Twój motyw WordPress ma wiele, zobaczysz każdy pasek boczny, do którego odwołuje się raz w kodzie. Musisz zdecydować, które paski boczne chcesz zachować.
Twoja witryna wolno się ładuje, odkryj
Jeśli Twój motyw nie wyświetla pasków bocznych na Twojej stronie, możesz nie znaleźć tego kodu w swoim pliku.
W ten sposób nasz kod full-width.php zajmuje się wprowadzaniem zmian. Twój kod może się nieznacznie różnić w zależności od motywu.
Następnie musisz pobrać plik Pełna szerokość.php W folderze motywu WordPress z .
Pomyślnie utworzyłeś i przesłałeś niestandardowy szablon strony o pełnej szerokości dla swojego motywu. Następnym krokiem jest użycie tego szablonu do stworzenia pełnowymiarowej strony.
Przejdź do dashboardu i edytuj lub utwórz nową stronę.
Na ekranie edycji strony znajdź pole wyboru atrybutów strony i kliknij menu rozwijane pod opcją Model.
Będziesz mógł zobaczyć swój model. Śmiało, wybierz go i zapisz lub odśwież stronę.
Teraz możesz odwiedzić swoją witrynę i zobaczysz, że paski boczne zniknęły, a Twoja strona jest wyświetlana jako strona z jedną kolumną. Może nie został jeszcze wypełniony, ale teraz jesteś gotowy, aby go rozprowadzić w inny sposób.
Spraw, by Twoja witryna była popularna, odkrywając
Będziesz musiał użyć narzędzia Inspect, aby odkryć klasy CSS używane przez Twój motyw do zdefiniowania obszaru zawartości.
Następnie możesz dostosować jego szerokość do 100% za pomocą CSS. Użyliśmy następującego kodu CSS:
.page-template strefy pełnej szerokości.content(szerokość: 100%; margines: 0px; obramowanie: 0px; dopełnienie: 0px; ) .page-template pełna szerokość.Output(margines: 0px; )Tak będzie wyglądać Twenty Seventeen.
To wszystko na ten samouczek, mam nadzieję, że pozwoli Ci stworzyć pełnowymiarowe strony.
Powyższe metody są bezpłatne dla tych, którzy mogą sobie na to pozwolić i chcą szybko tworzyć układy o pełnej lub pełnej szerokości.
Odkryj także niektóre wtyczki premium WordPress
Możesz użyć innych wtyczek WordPress, aby nadać nowoczesny wygląd i usprawnić zarządzanie blogiem lub witryną.
Oferujemy kilka wtyczek premium WordPress, które pomogą Ci to zrobić.
1. Konstruktor Divi
Divi Builder to wysokiej jakości narzędzie do tworzenia stron, które jest bardzo cenione Eleganckie motywy Chociaż jest powszechnie używany jako część motywu Divi WordPress, Divi Builder jest również samodzielną wtyczką, której można używać w innych motywach WordPress.
Divi Builder umożliwia edycję treści za pomocą interfejsu wizualnego po stronie interfejsu, a także interfejsu po stronie serwera, chociaż większość użytkowników woli ten pierwszy interfejs.
Zasadniczo zamiast pasków bocznych wszystko jest w wyskakujących okienkach i pływających przyciskach. Daje dostęp do 316 predefiniowanych szablonów rozmieszczonych w 40 różnych pakietach prezentacji, a także umożliwia zapisywanie własnych projektów jako szablonów.
Zapraszamy do otwarcia
Jedną z cech charakterystycznych Divi zawsze była kontrola nad stylami, które Ci daje. Na trzech różnych kartach możesz dostosować różne opcje, w tym responsywne elementy sterujące, niestandardowe odstępy i inne.
Możesz nawet dodać niestandardowe css, ponieważ jego pakiety edytorów css podstawowe sprawdzenie i autouzupełnianie.Jedną z krytyki Divi Buildera zawsze było to, że opiera się na . Oznacza to, że jeśli wyłączysz go raz, pozostaniesz z kilkoma skrótami w swojej treści. Chociaż jest to trochę przygnębiające, teraz jest mniej problemów z wtyczkami, takimi jak Shortcode Cleaner.
2. Budowniczy
Nic dziwnego, że Themify Builder to oferta zespołu Themify. Integruje go z wieloma motywami WordPress, aby zapewnić klientom łatwe opcje dostosowywania. Ale możesz też kupić go jako samodzielną wtyczkę i używać go z dowolnym motywem WordPress.
Podobnie jak Divi Builder i WPBakery Page Builder, Themify Builder umożliwia tworzenie układów w interfejsie lub zapleczu.Inną dobrą rzeczą jest to, że ta wtyczka pozwala dostosować responsywne punkty przerwania (ale tylko na poziomie całej witryny).
Odkryj stwórz sklep internetowy i łatwo sprzedawaj swoje produkty online
Ciekawą funkcją Themify Builder jest to, że nadal pozwala na korzystanie ze standardowego edytora WordPress, podczas gdy inne kreatory stron zmuszają Cię do korzystania z interfejsu Kreatora Stron do wszystkiego.
3. Fakira
Wtyczka WordPress Elementor, wprowadzona na rynek w 2016 roku, jest jednym z najmłodszych programistów na tej liście. Pomimo późnej premiery, Elementor szybko zgromadził ponad 1 000 000 aktywnych instalacji na WordPress.org, co czyni go jednym z najpopularniejszych kreatorów WordPress.
Jeśli masz jakieś sugestie lub uwagi, zostaw je w naszym dziale
Często zdarza się, że motyw, który Ci się podoba, ma wąski obszar na posty, a jego ustawienia nie przewidują zmiany szerokości. W takim przypadku można ją zwiększyć przy minimalnej wiedzy HTML oraz css. Na przykład używamy popularnego darmowy motyw Patagonia. Możesz rozszerzyć motyw za pomocą wspaniałej wtyczki Firefox— Firebug. Najpierw musisz go zainstalować, pobierając go stąd. Następnie włącz podłącz, jak widać na zdjęciu - Zakładka Narzędzia — tworzenie stron internetowych — Firebug — otwórz firebuga:
Następnie na dole ekranu należy, wskazując kursorem i klikając myszą, zaznaczać różne elementy. W takim przypadku po prawej stronie zostanie wyświetlony style css
, a w obszarze strony zostanie podświetlony ten lub inny obszar - główny, Pasek boczny, nagłówek. Interesuje nas teraz główny obszar, do którego dojdziemy, gdy „wyjdziemy” na tag Na przykład, zwiększyć szerokość główny obszar od 550 pikseli do 620. Aby to zrobić, musisz zmienić linię szerokość: 550px plik styl.css. Jeśli motyw jest już zainstalowany, możesz edytować ten plik bezpośrednio z panelu administracyjnego, jeśli nie, musisz rozpakować archiwum z motywem i wprowadzić zmiany w pliku za pomocą edytora. W naszym przypadku motyw jest zainstalowany, więc przejdź do Panel administratora— Wygląd zewnętrzny — Redaktor- otwórz plik style.css, wyszukaj szerokość linii: 550px i zmień wartość szerokości z 550px na 620px. Kliknij Aktualizować plik. Wchodzimy na stronę i widzimy, że obszar wpisów się rozszerzył, ale w niektórych miejscach „wpadł” na prawą kolumnę. W takim przypadku musimy proporcjonalnie zawęzić ten obszar. Do tego również użyjemy wtyczka firebug, tak jak w poprzednim przypadku. Znalezienie tagu Wykonujemy taką samą procedurę z edycją style.css jak w poprzednim przypadku z głównym obszarem, tylko teraz edytujemy linię margines: 0 0 0 580px; Zmień w nim wartość wcięcia z 580px na 630px. Teraz wszystko jest w porządku. Obszar nagrywania stał się szerszy i nie wpada w ten obszar Pasek boczny. Zdarza się też, że style zapisywane są nie tylko w pliku style.css, ale także w pliku ekran.css
