Jak dostosować swoją witrynę WordPress za pomocą CSS: 3 proste metody

WordPress ewoluował przez lata, a dziś jest dość elastyczną i łatwą do dostosowania platformą za pomocą edytora bloków, Gutenberga. Mimo to będą chwile, kiedy będziesz potrzebować nieco większego zasięgu niż zapewnia edytor Gutenberg.

Tutaj przydaje się niestandardowy CSS. Stylizacja CSS umożliwia edycję kolorów, odstępów, czcionek, układów i w zasadzie każdego innego elementu wizualnego witryny WordPress, dzięki czemu wygląda dokładnie tak, jak chcesz.

W tym artykule omówimy podstawy dostosowywania witryny WordPress za pomocą CSS.

Po co dostosowywać swoją witrynę za pomocą CSS?

Dodanie niestandardowego CSS to tylko jedna z metod, których możesz użyć do dostrojenia wyglądu swojej witryny. Inne metody obejmują użycie dobrze wyposażony motyw premium WordPresslub instalowanie kreatora stron.

Chociaż te dwie metody są nieco łatwiejsze w użyciu dla początkujących i nie wymagają znajomości kodowania, korzystanie z niestandardowego CSS jest korzystniejsze na dwa główne sposoby:

Zerowy koszt

Motywy premium i kreatory stron WordPress mogą być przydatne, ale mają swoją cenę — w dolarach i centach. Z drugiej strony, uzbrojony w wiedzę, jak pisać niestandardowe CSS, możesz osiągnąć te same efekty bez ponoszenia dodatkowych kosztów.

Minimalne rozdęcie

Kreatory stron i dobrze wyposażone motywy zostały zaprojektowane tak, aby zapewnić użytkownikom większą elastyczność i szeroki wachlarz opcji dostosowywania ich witryn. Z tego powodu mają tendencję do powiększania stron internetowych, potencjalnie je spowalniając.

Z drugiej strony, pisząc niestandardowy CSS, dodasz tylko niezbędne funkcje, co zwykle skutkuje lżejszymi witrynami i szybszymi prędkościami ładowania.

3 proste metody dostosowywania witryny WordPress za pomocą CSS

Mam nadzieję, że już wiesz jak pisać CSS. Po zapoznaniu się z podstawami możesz użyć jednej z następujących metod, aby dodać niestandardowy CSS do swojej witryny WordPress:

Metoda 1: Użyj konfiguratora WordPress

Dzięki WordPress 4.7 lub dowolnej późniejszej wersji możesz dodać niestandardowy CSS bezpośrednio z obszaru administracyjnego. Jest to najprostsza metoda, a ponieważ dostępny jest podgląd na żywo, możesz zobaczyć wszelkie zmiany, które wprowadzasz w czasie rzeczywistym.

Jest to również najbardziej zalecane, ponieważ wszystkie zmiany, które będziesz wprowadzać, są zapisywane w samym WordPressie. Oznacza to, że nawet jeśli zmienisz lub zaktualizujesz motyw, nie utracisz niestandardowego kodu CSS.

Oto kroki, które należy podjąć:

Krok 1: Nawigować do Wygląd > Dostosuj.

Spowoduje to otwarcie modułu dostosowywania motywów WordPress, który po prawej stronie pokazuje podgląd witryny na żywo, a po lewej niektóre opcje dostosowywania. Przewiń w dół lewego panelu, a znajdziesz Dodatkowe CSS patka.

Krok 2: Kliknij na Dodatkowe CSS Patka.

Spowoduje to otwarcie małego pola w lewym okienku, w którym możesz dodać niestandardowy kod CSS. Możesz wpisać tyle wierszy kodu CSS, ile chcesz. Wspaniałą rzeczą w tym edytorze jest to, że sprawdza poprawność kodu, ostrzegając o ewentualnych błędach.

Krok 3: Opublikuj swoje zmiany.

Każda dodana prawidłowa reguła CSS pojawi się w obszarze podglądu na żywo po prawej stronie. Aby zastosować zmiany w swojej witrynie, kliknij Publikować przycisk w górnej części lewego okienka, gdy jesteś zadowolony. Jeśli nie chcesz, aby zmiany zaczęły obowiązywać natychmiast, możesz również zaplanować publikację w późniejszym czasie lub zapisać swoją pracę jako wersję roboczą.

Należy pamiętać, że wszelkie zmiany wprowadzane za pomocą dostosowania są powiązane z bieżącym motywem. Jeśli kiedykolwiek przełączysz się na inny motyw, zmiany zostaną utracone, chyba że skopiujesz niestandardowy kod CSS i dodasz go do nowego motywu. Dobrą praktyką jest zapisywanie wszystkich niestandardowych CSS dodanych do motywu w notatniku. W ten sposób możesz po prostu skopiować kod i wkleić go w sekcji „Dodatkowy CSS” dla innego motywu.

Jeśli brzmi to zbyt dużo pracy i wolisz rozwiązanie, które pozwala zastosować niestandardowy kod CSS do dowolnego używanego motywu WordPress, następna metoda jest dla Ciebie.

Metoda 2. Użyj wtyczki

Niestandardowe wtyczki CSS przechowują niestandardowy CSS oddzielnie od motywu, umożliwiając zastosowanie zmian niezależnie od używanego motywu. Wtyczki te mają również dodatkowe funkcje, takie jak automatyczne uzupełnianie, które mogą ułatwić dodawanie CSS.

Jedyną wadą jest to, że są to oprogramowanie innych firm, co oznacza, że ​​mogą potencjalnie spowolnić Twoją witrynę. Większość z tych wtyczek jest jednak lekka, więc generalnie mają niewielki wpływ na wydajność Twojej witryny. Oto niektóre z najlepszych niestandardowych wtyczek CSS, których możesz użyć:

• Prosty niestandardowy CSS

Prosty niestandardowy CSS to jedna z najpopularniejszych niestandardowych wtyczek CSS. Jest lekki, łatwy w użyciu i oferuje wspaniałe funkcje. Konfiguracja jest łatwa. Wszystko, co musisz zrobić, to zainstalować i aktywować wtyczkę. Następnie przejdź do Wygląd zewnętrzny w lewym okienku pulpitu nawigacyjnego.

Zobaczysz nową opcję o nazwie niestandardowe CSS. Kliknięcie go otworzy edytor, w którym możesz dodać niestandardowy CSS. Kliknij Zaktualizuj niestandardowy CSS przycisk, aby zapisać zmiany. Aby zobaczyć zmiany, po prostu odśwież swoją witrynę.

• Proste niestandardowe CSS i JS

Jeśli chcesz jeszcze więcej funkcji, Proste niestandardowe wtyczki CSS i JS to świetna opcja. Oprócz dodawania CSS umożliwia dodawanie wpisów JavaScript.

• Bohater CSS

Jeśli nie chcesz pisać ani jednej linii kodu, Wtyczka CSS Hero jest idealny dla Ciebie. Ta wtyczka oferuje wizualny edytor CSS z rozwijanymi menu i polami wejściowymi, które pozwalają edytować prawie każdy styl CSS w Twojej witrynie bez konieczności pisania kodu.

Metoda 3. Edytuj surowy kod

Dwie opisane powyżej metody umożliwiają dodanie niestandardowego kodu CSS do witryny bez konieczności dotykania żadnego z plików motywu. Jednak w niektórych przypadkach możesz chcieć edytować kod CSS motywu lub bezpośrednio dodać niestandardowy kod CSS do kodu motywu.

Aby to zrobić, musisz uzyskać dostęp do arkusza stylów swojej witryny. Łatwym sposobem na dostęp do tego arkusza stylów jest Edytor motywów na pulpicie WordPress.

Zanim jednak przejdziemy dalej, musisz wprowadzić kilka zabezpieczeń. Najpierw, wykonaj kopię zapasową swojej witryny. Podczas edytowania plików motywów łatwo popełnić błędy, które mogą potencjalnie spowodować awarię witryny.

Kopia zapasowa gwarantuje, że masz działającą stronę internetową, do której możesz wrócić. Następny, utwórz motyw potomny. Jeśli dokonasz bezpośrednich edycji motywu nadrzędnego, zmiany zostaną utracone po każdej aktualizacji motywu.

Po wprowadzeniu tych zabezpieczeń zaloguj się do swojego zaplecza WordPress. Iść do Wygląd > Edytor motywów. Po kliknięciu opcji edytora motywów zobaczysz wyskakujące okienko ostrzegające przed dokonywaniem bezpośrednich zmian w plikach motywów. Jeśli wykonasz powyższe kroki, możesz iść.

Kliknij rozumiem kontynuować.

Po kliknięciu powinieneś domyślnie zobaczyć arkusz stylów swojej witryny. Jeśli nie, po prostu spójrz na prawy panel i kliknij styl.css pod Arkusz stylów opcja.

W tym miejscu możesz wprowadzać bezpośrednie zmiany w plikach motywów. Tylko nie zapomnij kliknąć Zapisz i zaktualizuj kiedy skończysz.

Przejmij kontrolę nad wyglądem swojej witryny dzięki niestandardowemu CSS

Nauka pisania niestandardowego CSS na WordPressie może zająć trochę czasu początkującym, ale da ci prawdziwą kontrolę nad wyglądem Twojej witryny. I to przy zerowych kosztach i przy minimalnym wpływie na wydajność Twojej witryny.

Jeśli jednak wolisz nie projektować ręcznie, istnieją inne sposoby wykonania pracy, takie jak użycie jednego z najlepszych kreatorów stron dla WordPressa.

5 kreatorów stron WordPress, które pomogą Ci zbudować niesamowite strony internetowe

Chcesz, aby Twoja witryna WordPress wyglądała niesamowicie, ale nie stać Cię na programistę? Zamiast tego wypróbuj te narzędzia do tworzenia stron WordPress.

Czytaj dalej

O autorze