Jak dodać niestandardowe style do widżetów WordPress (2 sposoby)

Tworzenie stron WordPress nauczyło nas, że małe detale robią wielką różnicę. Niestandardowa stylizacja widżetów może przekształcić dobre strony w świetne.

W WPBeginner sprawiamy, że każdy element działa razem. Weźmy na przykład nasze widżety na pasku bocznym.

Dostosowaliśmy ich wygląd, aby wyróżnić ważne zasoby i sprawić, by płynnie komponowały się z projektem naszej strony. Pomaga nam to budować zaufanie z milionami odwiedzających.

W tym przewodniku podzielimy się najłatwiejszymi metodami dostosowywania stylów widżetów WordPress. Nauczysz się technik, które sprawią, że Twoje widżety będą wyglądać profesjonalnie i idealnie zintegrują się z Twoim motywem.

Dlaczego dodawać niestandardowe style do widżetów WordPress?

Domyślnie widgety WordPress używają stylów motywu, które nie zawsze mogą pasować do Twoich celów projektowych. Dodanie niestandardowych stylów daje Ci większą kontrolę nad wyglądem i działaniem Twoich widgetów.

Oto dlaczego warto dostosować:

• 🎨 Dopasuj do swojej marki: Niestandardowe style pozwalają dopasować kolory, czcionki i odstępy widżetów do stylu Twojej strony, aby uzyskać bardziej spójny wygląd.
• 👓 Popraw czytelność: Czasami domyślny układ widżetu nie jest łatwy do odczytania. Stylizacja może pomóc w poprawie rozmiaru czcionki, kontrastu lub wyrównania, co zapewni lepsze wrażenia użytkownika.
• 🌟 Wyróżnij ważną treść: Chcesz, aby Twoje ostatnie wpisy, wezwania do działania lub dane kontaktowe wyróżniały się? Niestandardowy kod CSS może sprawić, że te widżety będą bardziej przyciągać wzrok.
• 🧹 Uporządkuj zagracone projekty: Jeśli widżet wygląda na zbyt zatłoczony lub nie na miejscu, niestandardowe style pomagają usprawnić jego wygląd i płynniej zintegrować go z układem.
• 🧩 Twórz unikalne układy: Niestandardowe style otwierają możliwości układu, takie jak przekształcenie podstawowego widżetu tekstowego w stylizowane pole promocyjne lub wyrównanie wielu widżetów w siatce.

Krótko mówiąc, stylizacja widżetów pozwala wyjść poza domyślny wygląd i stworzyć bardziej dopracowaną, profesjonalną stronę internetową.

Mając to na uwadze, przyjrzyjmy się, jak łatwo dodawać niestandardowe style do widżetów WordPress.

Pokażemy Ci 2 sposoby na dostosowanie widżetów WordPress za pomocą niestandardowych stylów. Możesz skorzystać z tych szybkich linków, aby przejść do tego, co działa dla Ciebie najlepiej:

• Metoda 1: Stylizuj widżety WordPress za pomocą kodu CSS
• Metoda 2: Stylizuj widżety WordPress za pomocą CSS Hero (bez kodu)

Metoda 1: Stylizuj widżety WordPress za pomocą kodu CSS

Widgety WordPress używają teraz edytora bloków do dodawania nowego widgetu i bloku do obszarów widgetów i pasków bocznych. Oznacza to, że zobaczysz niektóre opcje stylizacji bloków dla niektórych domyślnych bloków WordPress.

Na przykład, jeśli przejdziesz do strony Wygląd » Widżety i klikniesz domyślny blok WordPress, zobaczysz opcje zmiany kolorów i typografii bloku.

Jednak nie wszystkie bloki posiadają te opcje widgetów, zwłaszcza jeśli nie są to domyślne bloki WordPress. Na szczęście jedną z zalet korzystania z edytora bloków dla widgetów jest to, że możesz łatwo dodać niestandardowe klasy CSS do każdego bloku.

Wszystko, co musisz zrobić, to po prostu kliknąć na widget, do którego chcesz dodać niestandardowe style.

Następnie musisz przewinąć w dół do zakładki „Zaawansowane” w panelu Bloku. Stąd możesz dodać niestandardową klasę CSS.

Nie zapomnij zapisać ustawień widżetu, klikając przycisk „Aktualizuj”.

Teraz możesz dodać niestandardową klasę CSS do swojego motywu WordPress, która będzie docelować tę konkretną klasę CSS.

Po prostu przejdź do strony Wygląd » Dostosuj i przejdź do zakładki Dodatkowy CSS. Tam zobaczysz podgląd swojej witryny na żywo z polem do dodawania reguł CSS.

Inną skuteczną metodą dodawania niestandardowego CSS jest użycie WPCode.

Przetestowaliśmy go obszernie i uznaliśmy, że jest to jeden z najbezpieczniejszych sposobów integracji niestandardowego kodu z motywem. Jeśli zarządzasz wieloma fragmentami CSS, WPCode ułatwia ich organizację i śledzenie.

Aby uzyskać więcej szczegółów na temat jego funkcji i korzyści, zapoznaj się z naszą recenzją WPCode.

Najpierw upewnij się, że zainstalowałeś wtyczkę WPCode. Instrukcje krok po kroku znajdziesz w naszym przewodniku jak zainstalować wtyczkę WordPress.

Następnie przejdź do Fragmenty kodu » + Dodaj fragment i wybierz opcję „Dodaj własny kod (nowy fragment)”. Następnie kliknij przycisk „+ Dodaj własny fragment”.

Teraz nadaj swojej nowej niestandardowej klasie CSS nazwę. Może to być coś prostego, jak „Niestandardowy styl widżetu”.

Następnie zmień Typ kodu na „Fragment CSS”.

Następnie dodaj swój niestandardowy kod CSS w odpowiednim polu.

Oto podstawowy kod CSS, którego użyliśmy:

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

Po zakończeniu przewiń w dół do sekcji Wstawianie. Upewnij się, że Metoda wstawiania jest ustawiona na „Automatyczne wstawianie”, a Lokalizacja na „Nagłówek całej witryny”.

Następnie przełącz przycisk w prawym górnym rogu, aż pojawi się napis „Aktywny” i kliknij „Zapisz fragment kodu”.

Po dodaniu niestandardowego kodu CSS możesz wyświetlić swoją witrynę WordPress na urządzeniu mobilnym lub komputerze, aby zobaczyć efekt.

Oto jak wygląda nasz na naszej demonstracyjnej stronie WordPress:

Metoda 2: Stylizuj widżety WordPress za pomocą CSS Hero (bez kodu)

Jednym z problemów powyższej metody jest to, że musisz napisać kod CSS. Jednak nie wszyscy użytkownicy znają CSS lub po prostu nie chcą sami pisać kodu.

W takim przypadku możesz użyć CSS Hero. Jest to niestandardowy plugin do stylizacji WordPress, który pozwala dodawać niestandardowy kod CSS do Twojego motywu WordPress bez pisania kodu.

Więcej o wtyczce dowiesz się w naszej recenzji CSS Hero.

Najpierw musisz zainstalować i aktywować wtyczkę CSS Hero. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczka doda nową pozycję w menu do paska narzędzi administratora WordPress na górze.

Następnie musisz odwiedzić stronę, na której znajduje się widżet, który chcesz stylizować, i kliknąć przycisk CSS Hero u góry.

Spowoduje to otwarcie strony w interfejsie edytora CSS Hero.

Jest to edytor na żywo, w którym możesz po prostu kliknąć na dowolny element na swojej stronie internetowej i zmienić jego styl.

Po prostu najedź myszką na widżet, który chcesz stylizować. Następnie kliknij, aby go wybrać.

W tym przykładzie wybraliśmy nasz widżet wyszukiwania.

Następnie możesz użyć menu po lewej stronie, aby dowolnie stylizować swój widżet. Obejmuje to zaawansowane opcje stylizacji, takie jak gradienty, typografia, wypełnienie, marginesy i obramowania.

W poniższym przykładzie zmieniliśmy rozmiar czcionki widżetu wyszukiwania WordPress, aby jeszcze bardziej się wyróżniał.

Możesz również zmienić poszczególne elementy widgetu, jeśli zajdzie taka potrzeba.

Na przykład zdecydowaliśmy się zmienić promień zaokrąglenia przycisku i pól wyszukiwania. W ten sposób wyglądają bardziej zaokrąglone i stylowe.

Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz”, aby zachować swoje ustawienia.

Następnie podglądnij swoją stronę internetową, aby zobaczyć swój nowy projekt WordPress w akcji.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać niestandardowe style do widżetów WordPress. Możesz również zapoznać się z naszym wyborem najlepszych kreatorów stron metodą przeciągnij i upuść dla WordPress oraz naszą porównaniem zalet i wad darmowych i premium motywów WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.