Jak dodać niestandardowe klasy CSS do WordPress (3 łatwe sposoby)

Ci, którzy znają CSS, wiedzą, że zajęcia CSS są ogromną liczbą czasu czasu podczas stylizacji całej strony. Ale jeśli nie kodujesz, być może nigdy nie zdawałeś sobie sprawy, jak potężne mogą być. Dzisiaj to zmieniamy.

W tym poście pokażę 3 łatwe sposoby dodawania zajęć CSS do WordPress - nawet jeśli nigdy nie napisałeś ani jednego wiersza kodu. Dowiesz się również, jak to zrobić w sposób bez kodu za pomocą potężnego konstruktora witryn WordPress, Divi.

Co to są zajęcia CSS i jak one pomagają?

CSS ( arkusze stylów kaskadowych ) to kod, który kontroluje projekt i wygląd elementów, takich jak kolory, odstępy i czcionki, na stronie internetowej. Klasa CSS to etykieta wielokrotnego użytku, którą przypisujesz do wielu elementów, dzięki czemu możesz je wszystkie stylizować jednocześnie zamiast powtarzać ten sam proces dla każdego elementu.

Bez zajęć CSS musiałbyś ręcznie stylizować każdy element, który staje się czasochłonny-szczególnie podczas pracy na większych witrynach WordPress z wieloma stronami. Ale jak to często bywa, większość stron obejmuje powtarzające się elementy i motywy, takie jak przyciski na stronie cenowej lub pola funkcji w różnych sekcjach.

Elementy te wyglądają podobnie, ponieważ w backend dzielą tę samą grupę klasową. Kiedy więc zastosujesz CSS do jednego elementu wspólnej grupy klasowej, każdy element w niej automatycznie dziedziczy te same ustawienia stylu. Z przodu daje im to podobny wizualnie wygląd. Zajęcia CSS oszczędzają czas, zachowaj spójność projektu i ułatwia przyszłe edycje - ponieważ musisz tylko zaktualizować klasę zamiast zmienić każdy element jeden po drugim.

Sposoby dodania zajęć CSS do WordPress

Możesz dodać klasy CSS do witryny WordPress na wiele sposobów, w zależności od biegłości w korzystaniu z CSS. Pokażę ci, jak to zrobić za pomocą WordPress Customizer i wtyczki, takiej jak prosty niestandardowy CSS, ale obie te metody wymagają pisania CSS.

Przejdź do trzeciej metody, jeśli bardziej interesuje Cię metoda bez kodu.

1. Korzystanie z WordPress Customizer

Powiedzmy, że Twoja strona WordPress ma wiele przycisków. Obecnie wyglądają prosto i chcesz, aby się wyróżniały, więc planujesz dodać granatową granicę i niebieskie tło.

Dodanie CSS do każdego przycisku zajmie dużo czasu, ponieważ będziesz musiał powtórzyć proces osiem razy. Ale w klasach CSS możesz po prostu przypisać tę samą klasę CSS do każdego przycisku i napisać CSS tylko raz. Nazwijmy naszą klasę CSS „ Custom-A” . W oknie edytora strony WordPress kliknij dowolny przycisk> Ustawienia (ikona przekładni)> Przełącz opcję zaawansowaną . Teraz napisz nazwę klasy w dodatkowych klasach CSS.

Powtórz proces każdego przycisku i zapisz. Aby dodać kod stylizacji do tych przycisków, musisz przejść do WordPress Customizer> Dodatkowe CSS.

Aby Border Bordern Blue i tło nieba niebieskie, wklejesz tutaj swoje CSS.

Zauważ, że nazwa klasy CSS, którą wybraliśmy, pojawia się przed regułami stylizacji w kodzie. Upewnia się, że kod jest zastosowany do każdego elementu, który ma przypisaną nazwę klasy.

Po naciśnięciu opublikowania i podglądu strony, stylowe przyciski będą wyglądać tak:

To proste - jeśli znasz CSS.

WordPress Customizer doskonale nadaje się również do wprowadzania drobnych zmian. Problem polega jednak na tym, że dodane CSS jest powiązane z motywem, co oznacza, że ​​może zostać utracony, jeśli zmienisz tematy. Tak więc, jeśli lubisz testować różne motywy na swojej stronie, musisz zaktualizować kod za każdym razem, gdy przełączysz się na inny motyw, co nie jest zabawne. W takim przypadku zainstalowanie wtyczki w celu zapewnienia bezpieczeństwa stylów klasy CSS jest znacznie lepszą opcją.

2. Za pomocą wtyczki takiej jak proste niestandardowe CSS

Po zainstalowaniu prostej wtyczki CSS do sekcji Wygląd zostanie dodana niestandardowa opcja CSS . Teraz musisz tylko dodać kod CSS i zaktualizować niestandardowe CSS, aby odzwierciedlić zmiany. (Nadal musisz przypisać nazwy klas do elementów, które chcesz mieć wspólne style.)

Takie wtyczki utrzymują niestandardowe CSS nienaruszone, nawet jeśli później zmieniasz motyw. Jest również nieco bardziej zorganizowany niż WordPress Customizer. Jednak obie metody nie są skalowalne, ponieważ mogą łatwo się zagracać, gdy zapisujesz niestandardowe CSS dla wielu grup elementów całej witryny.

Dlatego dla stylizacji całej strony zalecanym podejściem jest stworzenie motywu dziecka i aktualizacja jego arkusza stylów. W ten sposób wszystkie twoje zmiany są bezpieczne w motywie dziecka, nawet po aktualizacjach motywów.

Chociaż skuteczna (i zalecana przez koderów), ta metoda może szybko stać się techniczna, ponieważ nadal wymaga pracy ręcznej-będziesz musiał stylizować każdy element (lub wiele elementów za pomocą klas CSS), co jest czasochłonne i nie przyjazne dla początkujących. Będziesz także musiał śledzić nazwy klas - wyobraź sobie, że chcesz edytować konkretną klasę przycisków i przewijasz niekończące się struny kodu.

A co, jeśli możesz skalować stylizację bez pisania jednego wiersza kodu? W tym miejscu pojawiają się nowoczesne budownicze stron przeciągających i upuść, takie jak Divi.

3. Korzystanie z konstruktora witryn bez kodu, takiego jak Divi

Piękno korzystania z nowoczesnego konstruktora witryn bez kodu, takiego jak Divi, polega na tym, że nie musisz pisać CSS (ani żadnego kodu), aby zastosować spójne style w Twojej witrynie. Za pomocą interfejsu wizualnego możesz przypisać style do sekcji, wierszy, kolumn i modułów, po prostu wybierając i dostosowując ustawienia projektowe.

W Divi tworzysz ustawienia wstępne zamiast klas CSS. Przez lata Divi oferowały wstępne ustawienia modułowe, które pozwalają zapisać i ponownie wykorzystać style dla modułów takich jak przyciski, bludy i obrazy. Ale uruchomiliśmy coś jeszcze bardziej niesamowitego - wstępne ustawienia grupowe, które pozwalają ci iść jeszcze dalej.

Przed ustawieniami grupowymi opcji wolno było zastosować wstępne ustawienia modułów. Na przykład ustawienie premiery można użyć tylko w innym tham. Teraz możesz nawet udostępniać ustawienia modułów.

Zamiast dostosowywać jeden element na raz, ustawienia o grupie opcji pozwala zapisać style dla współdzielonych ustawień - takich jak tło, granice lub style tekstu - i zastosować je do wielu różnych elementów jednocześnie. Na przykład, jeśli sekcja, jak i kolumna używają koloru tła, możesz zapisać to ustawienie stylu jako ustawienie wstępne i zastosować go na wszystkie odpowiednie elementy, aby stworzyć spójny projekt.

Divi upraszcza style budowania i oszczędzania jako ustawienia wstępne poprzez funkcje przeciągania i upuszczania bez kodowania, czyniąc zmianę projektowania całego witryny szybciej i bardziej dostępny-szczególnie dla osób niebędących koderami.

Pobierz Divi 5

Zobaczmy, co mam na myśli bardziej szczegółowo poniżej

Presety grup opcji Divi ułatwiają dodawanie klas CSS

Presety grup opcji Divi przyjmują koncepcję klas CSS i upraszczają ją dla niekoderów. Zamiast ręcznego pisania i przypisywania zajęć, możesz teraz użyć wizualnego konstruktora Divi, aby zastosować wspólne style projektowania na różnych elementach za pomocą kilku kliknięć.

Te ustawienia wstępne działają na poziomie opcji, co oznacza, że ​​kierują one określone ustawienia projektowe, takie jak kolory tła, granice lub odstępy, które są udostępniane w wielu typach elementów. Na przykład ustawienia tła sekcji można zastosować do kolumny, wiersza, a nawet elementu tekstowego.

Jest to szybszy, łatwiejszy i bardziej intuicyjny sposób, aby zachować spójność projektu witryny. Oto jak:

• Style wielokrotnego użytku w elementach: Nie musisz ręcznie dostosowywać każdego elementu. Zapisz style grupy opcji jako wstępne i zastosuj je do dowolnego elementu.
• Globalne aktualizacje za pomocą jednej edycji: modyfikuj wstępnie wstępne, a wszystkie elementy korzystające z tego ustawienia ustawień automatycznie aktualizują. To sprawia, że ​​korekty projektowe są szybkie i wydajne w całej witrynie.
• Połącz wiele ustawień wstępnych: warstwa i mieszaj różne ustawienia wstępne (np. Granice, cienie, style tekstowe) na dowolnym elemencie dla elastycznej i kreatywnej kombinacji projektowania bez rozpoczęcia od zera.
• Dostosuj domyślne ustawienia wstępne dla stylów podstawowych: Zapisz ustawienia wstępne jako domyślne, aby automatycznie zastosować je do wszystkich odpowiednich elementów.

Dowiedz się więcej o ustawieniach grup opcji

Jak używać Divi do dodawania klas CSS do WordPress bez kodowania

Teraz, gdy wiesz, jakie są ustawienia grup opcji Divi i że nie musisz znać kodowania, aby z nimi współpracować, chciałem pokazać, jak dokładnie działa w budowniczym Divi. Co musisz zrobić, aby utworzyć, zapisać i zastosować ustawienia grupy do dowolnych ustawień opcji, takich jak tło, granica, shadow itp. W naszym przykładzie dostosujmy stronę cenową.

Zmiana tła przycisku

Załóżmy, że chcę zmienić tło przycisku na fiolet, aby dopasować kolor strony. Dostosuję więc przycisk pierwszej kolumny i zapiszę ustawienia jako wstępne ustawienie przycisku światła . (Czarny kolor w ustawieniach interfejsu użytkownika pokazuje, że edytujesz ustawienie ustawień. Jeśli wybrałeś tryb ciemny, będzie to odwrotnie.)

Teraz, aby zastosować te same ustawienia do dwóch pozostałych przycisków, po prostu zmieniłem ustawienie przycisku na światło podstawowe.

Zmiana cienia kolumny

Dodajmy cień po pudełku do wszystkich kolumn. Dodam cień do pierwszej kolumny i zapiszę go jako preset Shadow Box.

Aby zastosować ten sam cień na pozostałych dwóch kolumnach, po prostu zmieniłem ustawienie pudełka Shadow na Shadow .

Modyfikowanie ustawień tekstowych

Możesz także modyfikować style elementów tekstowych, takich jak H1 i H2S. Oto jak działa aktualizacja kolumn H3 Preset:

Po zapisaniu, oto jak będzie wyglądać strona cenowa:

Chociaż wprowadziłem niewielkie zmiany, aby pokazać, jak to działa, możesz sobie wyobrazić możliwości. W przypadku ustawień grup opcji Divi edycja niestandardowych stylów grup jest tak prosta, jak kliknięcie przycisku. Ale to tylko wierzchołek góry lodowej. Możesz także:

• Ustaw domyślne ustawienia wstępne dla grup opcji, aby elementy podstawowe, takie jak nagłówki lub przyciski odziedziczą styl automatycznie na stronie. Gdy zrozumiesz, jak działają domyślne ustawienia wstępne, nigdy nie wrócisz do używania starych metod.
• Warstwa Presete Group na górze ustawień elementów, aby dodać dodatkowego nacisku - takie jak zastosowanie wspólnego tła, a następnie układanie stylu cienia lub granicznego, aby wyróżnić pewne elementy.

Napisaliśmy cały przewodnik na temat wszystkiego, co powinieneś wiedzieć o ustawieniach grup opcji Divi. Przeczytaj pełny artykuł, aby uzyskać pomysły na projekt i porady dotyczące uproszczenia projektowania stron internetowych w klasie za pomocą Divi.

Dowiedz się więcej o ustawieniach grup opcji

Divi jest zmieniaczem gier dla klasowych systemu projektowania

Presety grup opcji Divi przynoszą wszystkim zajęcia CSS. Niezależnie od tego, czy projektujesz solo, czy współpracujesz z zespołem, ustawienia wstępne przyspieszają swój przepływ pracy, pięknie skaluj się w miarę wzrostu witryny i staje się niezbędną stylistyką. Są szybsze, bardziej wydajne i znacznie bardziej intuicyjne niż tradycyjne przepływy pracy CSS.

Zacznij dziś z Divi 5

Divi 5 jest w trybie pełnej aktualizacji. Uruchamiamy nowe funkcje co tydzień, podobnie jak ustawienia z grupami opcji, dobrze jest wiedzieć o zaawansowanych jednostkach, zmiennych projektowych CSS i wielu innych, które zmieniają sposób, w jaki podejście do projektowania dowolnej witryny.

Dowiedz się więcej o Divi 5

Divi 5 to potężna struktura projektowa z potężnymi narzędziami, takimi jak Divi Dash, Divi Quick Sites i Divi AI - zbudowane, aby pomóc Ci stworzyć niestandardowe, profesjonalne strony internetowe bez dotykania jednej linii kodu. Nic cię nie ogranicza, gotowe do wykonania dążenia do testu w przyszłość projektowania witryny?

Pobierz Divi 5