Jak edytować CSS w WordPressie (edytować, dodawać i dostosowywać wygląd witryny)

Chcesz spróbować edytować WordPress CSS, ale nie masz pojęcia, od czego zacząć? Dzięki stylom CSS możesz edytować wygląd swojej witryny globalnie lub na niektórych stronach. Dodaj kolory, rozstaw niektóre elementy, zaprojektuj układ i zasadniczo zmień dokładnie to, jak wygląda Twój motyw WordPress.

Jeśli chcesz lepiej zapoznać się ze środowiskiem programistycznym WordPress lub po prostu lepiej kontrolować wygląd swojej witryny, musisz wiedzieć, jak dodać CSS w WordPressie (oraz jak zmienić to, co już tam jest).

Edytując swój motyw i dodając własny kod CSS, będziesz w stanie zoptymalizować każdy element wizualny w swojej witrynie. Dziś przyjrzymy się temu bliżej.

Gotowy do startu? Zróbmy to!

Wolisz obejrzeć wersję wideo?

Co to jest edycja CSS?

CSS to skrót od Cascading Style Sheets i jest to najpopularniejszy język internetowy poza HTML. Oba z nich idą ze sobą w parze, ponieważ CSS służy do stylizowania elementów HTML. HTML stanowi podstawę wyglądu strony internetowej, a CSS służy do dalszego jej stylu.

CSS umożliwia tworzenie responsywnej strony internetowej, dodawanie kolorów, zmianę czcionek, modyfikowanie układu i ogólnie dostrajanie wizualnej prezentacji witryny. Podobnie jak HTML i JavaScript, CSS jest językiem po stronie klienta frontendu, co oznacza, że ​​jest wykonywany po stronie użytkownika, a nie na serwerze zaplecza.

Zagłębiając się w programowanie WordPress, musisz znać języki HTML, CSS, JavaScript i PHP. To właśnie jest wbudowany w główny CMS, a także wiele motywów i wtyczek.

Ale nawet jeśli nie jesteś projektantem stron internetowych ani programistą, dobrze jest zdobyć trochę CSS, ponieważ możesz go użyć do przenoszenia lub stylizowania elementów w swojej witrynie lub wprowadzania niewielkich zmian estetycznych w motywie, aby lepiej Ci odpowiadał.

WordPress i CSS

W WordPressie CSS jest nieco inny. Jest kontrolowany przez motywy, które składają się z plików szablonów, znaczników szablonów i oczywiście arkusza stylów CSS. Chociaż są generowane przez Twój motyw, wszystkie z nich możesz edytować.

Pliki szablonów dzielą części Twojej witryny na sekcje (takie jak header.php lub archive.php), a znaczniki szablonów są używane do wywoływania ich i innych treści z Twojej bazy danych. Pliki te w rzeczywistości składają się głównie z PHP i HTML, chociaż możesz dodać CSS, jeśli zajdzie taka potrzeba.

To, czego naprawdę szukasz, to arkusz stylów lub style.css. Aby zmienić wygląd swojej witryny, musisz nauczyć się dodawać i edytować kod w tym pliku.

Jak dostosować swój motyw WordPress za pomocą CSS

Jeśli chcesz dostosować swój motyw i zmienić wygląd witryny za pomocą CSS, musisz albo dodać własny kod, albo edytować to, co już tam jest. Istnieją sposoby dodawania CSS bez konieczności dotykania jakichkolwiek plików motywu, ale aby zmienić istniejący kod motywu, musisz uzyskać dostęp do arkusza stylów swojej witryny.

Wprowadzając te zmiany, powinieneś wiedzieć o jednej rzeczy: po aktualizacji motywu wszelkie zmiany wprowadzone w style.css , functions.php lub innych plikach szablonów motywu zostaną usunięte. Ogólnie rzecz biorąc, nie należy wprowadzać bezpośrednich zmian w swojej witrynie w edytorze bez użycia motywu podrzędnego.

Arkusz stylów jest jak „lista instrukcji” dla Twojej witryny, określająca dokładnie, w jaki sposób jest stylizowana i jak obsługiwany jest kod CSS. Tutaj wykonasz większość edycji, ale pokażemy Ci również, jak uzyskać dostęp do innych plików szablonów motywów, takich jak header.php i footer.php.

Istnieją dwa sposoby uzyskania dostępu do arkusza stylów witryny WordPress: za pośrednictwem pulpitu nawigacyjnego WordPress lub klienta FTP. Omówimy je obie.

Nie czujesz się komfortowo, robiąc to samemu? Zastanów się nad zatrudnieniem programisty WordPress, który wykona ten krok za Ciebie.

Edycja CSS WordPress w Dashboardzie

Najłatwiejszy i najwygodniejszy sposób uzyskania dostępu do arkusza stylów CSS znajduje się bezpośrednio w panelu WordPress. Nie ma potrzeby instalowania programów FTP ani edytorów kodu. Możesz bezpośrednio edytować dowolny plik, korzystając z podświetlania składni i wbudowanej dokumentacji funkcji.

Zanim wprowadzisz jakiekolwiek większe zmiany w podstawowych plikach, zawsze powinieneś wykonać kopię zapasową swojej witryny WordPress. Jeśli jesteś nowym użytkownikiem CSS, bardzo łatwo jest przypadkowo popełnić błąd, który może zepsuć wygląd Twojej witryny, i może być trudno wymyślić, jak cofnąć zmiany.

Po utworzeniu kopii zapasowej i motywu podrzędnego zaloguj się do swojego zaplecza. Edytor można znaleźć, przechodząc do menu i klikając opcję Wygląd > Edytor motywów .

Powinieneś zobaczyć wyskakujące okienko ostrzegające przed bezpośrednią edycją tych plików. Nie martw się, po prostu kliknij „Rozumiem”. To tylko ostrzeżenie, aby użyć motywu potomnego i wykonać kopię zapasową witryny przed wprowadzeniem jakichkolwiek większych zmian. Wykonaj te czynności, aby można było bezpiecznie edytować.

A teraz jesteś w środku! Powinieneś domyślnie znajdować się w arkuszu stylów, ale spójrz na menu po prawej stronie, aby wyświetlić pliki motywów, jeśli nie.

Oprócz style.css, będziesz miał również dostęp do plików szablonów, takich jak functions.php, header.php i single.php. Wszystko to wpływa na działanie niektórych stron w Twojej witrynie.

Ale powinieneś zapoznać się z PHP przed zanurzeniem się w tych konkretnych plikach.

Pamiętaj tylko: większość zmian CSS, które tutaj wprowadzisz, będzie miała charakter globalny. Na przykład, jeśli zmienisz nagłówki H1 na określoną czcionkę, będzie to obowiązywać na każdej stronie w Twojej witrynie. Będziesz musiał użyć specjalnej składni, aby dostosować style określonych stron.

Edytuj pliki motywów bezpośrednio

Co zrobić, jeśli nie możesz uzyskać dostępu do edytora motywów lub wolisz pracować przez FTP? Łatwiej jest korzystać z edytora zaplecza, ale niektóre motywy lub wtyczki mogą go wyłączyć. W takim przypadku musisz połączyć się ze swoją witryną przez FTP.

FTP lub File Transfer Protocol umożliwia zdalny dostęp i modyfikowanie plików witryny. Pierwszą rzeczą, którą musisz zrobić, to pobrać FileZilla lub innego klienta FTP.

Następnie powinieneś skontaktować się ze swoim hostem i poprosić o poświadczenia FTP (host, port i nazwa użytkownika/hasło, jeśli dotyczy). Jeśli Twój gospodarz ma pulpit nawigacyjny, możesz go znaleźć, logując się.

Dane logowania użytkowników Kinsta znajdują się na pulpicie nawigacyjnym MyKinsta w obszarze Witryny > SFTP/SSH .

Gdy już je masz, uruchom klienta FTP i wprowadź te informacje. Jeśli to nie zadziała, spróbuj umieścić „sftp://” przed adresem URL w sekcji Host .

Po wejściu możesz znaleźć plik style.css, klikając folder wp-content , aby go otworzyć, a następnie folder motywu (np. motyw Twenty Twenty ), a następnie przewijając, aż zobaczysz style.css.

Kliknij dwukrotnie, aby go otworzyć (lub kliknij prawym przyciskiem myszy i wybierz Widok/Edytuj ) i wprowadź zmiany. Pamiętaj, aby zapisać i przesłać z powrotem na serwer.

Jeśli potrzebujesz edytować inne pliki szablonów, takie jak home.php, single.php, archive.php, możesz je znaleźć w tym samym folderze co style.css.

Edytowanie plików motywów, czy to za pośrednictwem FTP, czy pulpitu nawigacyjnego, nie zawsze jest konieczne. W rzeczywistości lepiej jest tego unikać, jeśli dodajesz tylko dodatkowy kod.

W przypadku drobnych dodatków, oto najlepszy sposób na dodanie CSS do witryny WordPress.

Jak dodać niestandardowy CSS w WordPress

Jeśli nie chcesz edytować istniejącego kodu CSS, a po prostu chcesz zamiast tego dodać własną stylizację, zdecydowanie zalecamy skorzystanie z jednej z następujących metod: dostosowanie WordPressa lub użycie dedykowanej wtyczki.

Po pierwsze, kod CSS dodany jedną z tych metod jest o wiele łatwiejszy do uzyskania i używania. Nie musisz się martwić, że umieścisz swój nowy CSS w niewłaściwym miejscu lub zapomnisz, gdzie go dodałeś, jeśli chcesz później dokonać modyfikacji.

Zapisz się do newslettera

Chcesz wiedzieć, jak zwiększyliśmy ruch o ponad 1000%?

Dołącz do ponad 20 000 innych osób, które otrzymują nasz cotygodniowy biuletyn z poufnymi wskazówkami dotyczącymi WordPressa!

Zapisz się teraz

Ponadto CSS dodany jedną z tych metod nie zostanie utracony po aktualizacji motywu (chociaż nadal może zniknąć, jeśli zmienisz motyw).

Oznacza to, że nie musisz używać motywu potomnego, a jeśli coś się zepsuje, wystarczy usunąć właśnie dodany CSS.

Pamiętaj, że nadal powinieneś zachować kopię zapasową swojej witryny, ponieważ niektórzy ludzie zgłaszali czasami utratę CSS podczas dużych aktualizacji. Mimo to ta metoda jest o wiele bardziej niezawodna niż bezpośrednia edycja plików motywów.

Chociaż możesz po prostu dodać kod do style.css i nazwać to dniem, jeśli nie chcesz tworzyć motywu podrzędnego, wprowadzać poważnych zmian w istniejącym CSS w swoim motywie i potencjalnie skończyć z wymazaniem całej swojej pracy, najlepiej użyć opcji Dodatkowy CSS w dostosowywaniu WordPressa lub zainstalować wtyczkę.

1. Edycja CSS przez WordPress Customizer

Zamiast korzystać z edytora motywów, wypróbuj to. Zaloguj się do swojego zaplecza WordPress i kliknij Wygląd > Dostosuj , aby otworzyć ekran dostosowywania motywu. Zobaczysz podgląd swojej witryny na żywo z opcjami po lewej stronie umożliwiającymi dostosowanie elementów, takich jak kolory, menu lub inne widżety.

Na samym dole tego menu powinno znaleźć się pole Dodatkowe CSS .

Kliknij, aby go otworzyć. Zostaniesz przeniesiony na nowy ekran z polem wprowadzania kodu i kilkoma instrukcjami. Ekran Dodatkowy CSS zawiera podświetlanie składni, podobnie jak Edytor motywów, wraz z walidacją, która pozwala stwierdzić, czy kod jest nieprawidłowy.

Każdy napisany przez Ciebie kod pojawia się automatycznie w obszarze podglądu po prawej stronie, chyba że zawiera błąd (choć możesz i tak go opublikować).

Po zakończeniu pracy możesz opublikować swój kod, zaplanować, kiedy zacznie obowiązywać, lub zapisać go jako wersję roboczą do późniejszej pracy. Możesz nawet uzyskać link do podglądu, aby udostępnić go innym.

Jak widać, strona Dodatkowe CSS jest pod wieloma względami potężniejsza niż Edytor motywów i znacznie lepiej nadaje się do dodawania kodu niż grzebania w plikach podstawowych.

Kod CSS, który tutaj piszesz, nadpisuje domyślną stylizację motywu i nie znika po aktualizacji motywu. Jeśli nie widzisz go „na żywo” w podglądzie, sprawdź dokładnie, czy używasz właściwych selektorów w kodzie CSS.

Podobnie jak w przypadku edytora motywów, CSS jest domyślnie globalny, ale możesz napisać kod, który kieruje do określonych stron.

Jedynym minusem jest to, że jeśli zmienisz motywy, wszystko, co napisałeś, zostanie wymazane. Upewnij się, że wykonałeś kopię zapasową CSS przed przejściem do nowego motywu, w przeciwnym razie możesz stracić dużo pracy.

Jeśli masz problemy z użyciem tej opcji lub szukasz rozwiązania, które działa w różnych motywach i może łatwiej kierować reklamy na określone strony, wypróbuj wtyczkę.

2. Dodawanie niestandardowego CSS do WordPressa za pomocą wtyczek

Istnieje kilka powodów, dla których możesz chcieć użyć wtyczki, aby dodać CSS do WordPressa. Chociaż funkcja jest podobna do menu Dodatkowe CSS, style zwykle pozostają, nawet jeśli zmienisz/zaktualizujesz motywy.

Możesz także bardziej cieszyć się ich interfejsem użytkownika lub dodatkowymi funkcjami, takimi jak autouzupełnianie. Niektóre wtyczki pozwalają nawet tworzyć CSS za pomocą rozwijanych menu, zamiast pisać go samodzielnie.

Prosty niestandardowy CSS

Simple Custom CSS to najpopularniejsza wtyczka edytora CSS, ze względu na łatwość obsługi, minimalny interfejs i lekki backend. Krótko mówiąc, jest to bardzo mała wtyczka WordPress, która ma duży cios.

Konfiguracja jest bardzo prosta i nie zobaczysz żadnego negatywnego wpływu na wydajność. Działa na dowolnym motywie i obejmuje podświetlanie składni i sprawdzanie błędów.

Proste niestandardowe CSS i JS

Prosty niestandardowy CSS i JS to dobra alternatywa. Umożliwia także kierowanie na nagłówek, stopkę, frontend, a nawet zaplecze administratora.

SiteOrigin CSS

SiteOrigin CSS to kolejna opcja, która zawiera również tradycyjny edytor CSS. W każdej chwili możesz przełączać się między nim a edytorem wizualnym.

WP Dodaj niestandardowy CSS

Jeśli starasz się dodać CSS do określonych stron, WP Add Custom CSS dodaje niestandardowe pole CSS do ekranu edycji, a także zawiera globalną stylizację.

Bohater CSS

Możesz również rozważyć wypróbowanie wizualnego edytora CSS. Pobierają one całe skomplikowane kodowanie i przekształcają je w szereg łatwych w użyciu pól wejściowych i rozwijanych menu, które obsługują całe programowanie za Ciebie.

CSS Hero to wysokiej jakości wtyczka do edycji wizualnej z kilkoma naprawdę potężnymi funkcjami (animacja, edycje specyficzne dla urządzenia i nieniszcząca edycja, żeby wymienić tylko kilka).

Gdzie uczyć się CSS

Gotowy do samodzielnego zanurzenia się w CSS? Te samouczki dla początkujących określą podstawy i nauczą Cię składni, którą musisz znać, aby napisać własny funkcjonalny kod CSS.

To może być zniechęcające, ale jeśli nie próbujesz zrobić czegoś naprawdę zaawansowanego, CSS nie jest zbyt trudny! Proste rzeczy, takie jak zmiana koloru tła lub ustawienie stylu czcionki, są dość łatwe, a przykładów w Internecie jest mnóstwo.

(Sugerowana lektura: ponad 50 nowoczesnych czcionek do użycia w witrynie WordPress)

Większość samouczków programowania, które znajdziesz w Internecie, jest również całkowicie darmowa. Jest mnóstwo informacji za darmo/niewielkimi kosztami.

Oto kilka przykładów obejmujących najlepsze samouczki CSS dla początkujących.

• Samouczek CSS W3Schools: Można tu znaleźć absolutną masę informacji: szczegółowe samouczki, przykłady i odniesienia, z którymi możesz pracować. Samouczki W3Schools są tak proste i łatwe do naśladowania, jak to tylko możliwe, więc nawet jeśli jesteś całkowicie początkującym, jest to świetne miejsce na rozpoczęcie.
• Codeacademy Naucz się CSS: Dzięki sześciu darmowym praktycznym lekcjom nauczysz się podstaw CSS. To nie jest prosty samouczek wideo, ale interaktywna lekcja, podczas której pracujesz z rzeczywistym kodem. W wersji pro otrzymujesz również quizy i dowolne projekty, nad którymi możesz pracować.
• Naucz się CSS w godzinę: Wiele osób chce nauczyć się nowego języka programowania, ale po prostu nie mają czasu, aby się poświęcić. Ale jeśli możesz poświęcić tylko godzinę, możesz nauczyć się CSS dzięki temu bezpłatnemu 20-częściowemu kursowi. Nawet jeśli do końca nie jesteś mistrzem, powinieneś dobrze znać podstawy.
• Wprowadzenie do podstawowego HTML i CSS dla użytkowników WordPress: Szukasz czegoś specyficznego dla WordPressa? Jeśli zawsze zmagałeś się z pisaniem HTML i CSS, ten kurs jest dla Ciebie idealny. Jest płatny, ale zawiera 52 wykłady i pięć godzin wideo do nauki.

Streszczenie

Jako użytkownik WordPressa, przejście do CSS może na początku być mylące. Ale kiedy już wiesz, jak edytować pliki motywów i gdzie dodawać style, nie powinieneś mieć więcej problemów.

Pliki motywów można edytować z poziomu zaplecza lub przez FTP, aby zmienić wygląd witryny, ale zwykle należy tego unikać, chyba że musisz edytować istniejący kod.

Jeśli chcesz po prostu dodać własny kod CSS, skorzystaj ze strony Dodatkowy CSS w sekcji Wygląd > Dostosuj lub wypróbuj wtyczkę, jeśli potrzebujesz czegoś bardziej zaawansowanego.

Zmiany w arkuszu stylów zostaną utracone po aktualizacji motywu, chyba że użyjesz motywu podrzędnego. To samo nie dotyczy Dodatkowego CSS. Twój kod jest bezpieczny przed aktualizacjami, ale nie zapomnij: tylko wtyczka zachowa CSS po zmianie motywów.

Niezależnie od wybranej metody należy zawsze regularnie tworzyć kopie zapasowe witryny, w tym dodany arkusz stylów i niestandardowy kod. Teraz nadszedł czas, aby odświeżyć podstawy CSS, korzystając z udostępnionych przez nas zasobów.

Szczęśliwej stylizacji!

Sugerowana lektura: Najlepsze kursy projektowania stron internetowych online