Jak dodać własne konfiguratory do widżetów WordPress (2 sposoby)

Chcesz wyróżnić swój widżet WordPress? Chociaż widżety świetnie nadają się do dodawania dodatkowych treści do twojej witryny, domyślna stylizacja często nie pasuje do twojej marki lub nie przyciąga uwagi odwiedzających.

Weźmy na przykład nasze widżety na panelu bocznym. Dostosowaliśmy ich wygląd, aby podkreślić ważne zasoby i sprawić, by płynnie łączyły się z projektem naszej witryny. Jest to jeden z najprostszych sposobów na poprawę profesjonalnego wyglądu twojej witryny internetowej.

W tym przewodniku pokażemy ci dwie proste metody stylizacji twoich widżetów WordPress, niezależnie od tego, czy czujesz się komfortowo z odrobiną CSS, czy wolisz rozwiązanie bez kodu.

Pokażemy ci 2 sposoby na dostosowanie twoich widżetów WordPress za pomocą własnych stylów. Możesz użyć tych szybkich odnośników, aby przejść do tego, który najbardziej Ci odpowiada:

Metoda 1: Stylizacja widżetów WordPress za pomocą kodu CSS

Widżety WordPress używają teraz edytora bloków, aby utworzyć nowy widżet i blok do obszarów widżetów i paneli bocznych. Oznacza to, że zobaczysz kilka opcji 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 są wyposażone w te opcje widżetów, zwłaszcza jeśli nie są to domyślne bloki WordPress. Na szczęście jedną z zalet korzystania z edytora bloków dla widżetów jest możliwość łatwego dodawania własnych klas CSS do każdego bloku.

Wszystko, co musisz zrobić, to po prostu kliknąć widżet, do którego chcesz dodać konfigurator.

Następnie należy przewinąć w dół do karty “Zaawansowane” w panelu Bloki. W tym miejscu można dodać własną klasę CSS.

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

Teraz możesz dodać własny CSS do twojego motywu WordPress, kierując go na tę konkretną klasę CSS.

Wystarczy przejść do Wygląd ” Dostosuj stronę i przejść do karty Dodatkowe CSS. Tam zobaczysz podgląd na żywo twojej witryny internetowej z polem do dodania reguł CSS.

Innym sposobem na dodanie własnego kodu CSS jest WPCode. Zalecamy korzystanie z tego rozwiązania, jeśli masz już dużo własnego kodu CSS w twoim motywie i chcesz łatwo rozróżnić i śledzić wszystkie fragmenty kodu.

Najpierw upewnij się, że zainstalowałeś wtyczkę WPCode. Aby uzyskać instrukcje krok po kroku, możesz przeczytać nasz przewodnik na temat instalacji wtyczki WordPress.

Następnie przejdź do Code Snippets “ + Add Snippet i wybierz ‘Add Your Custom Code (New Snippet)’. Następnie kliknij przycisk “+ Dodaj własny fragment kodu”.

Teraz nadaj swojemu własnemu CSS nazwę. Może to być coś prostego, jak “Własny styl widżetu”.

Następnie zmień fragment kodu na “CSS Snippet”.

Następnie dodaj swój własny CSS w polu.

Oto kilka podstawowych CSS, których użyliśmy:

Po zakończeniu przewiń w dół do sekcji Wstaw. Upewnij się, że Metoda wstawienia jest ustawiona na “Automatyczne wstawianie”, a Lokalizacja to “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 własnego CSS możesz zobaczyć swoją witrynę internetową WordPress na telefonie komórkowym lub komputerze, aby zobaczyć ją w działaniu.

Oto jak wygląda nasza witryna demonstracyjna WordPress:

Metoda 2: Stylizacja widżetów WordPress za pomocą CSS Hero (bez kodu)

Jednym z problemów powyższej metody jest konieczność napisania kodu CSS. Jednak nie wszyscy użytkownicy znają CSS lub po prostu nie chcą samodzielnie pisać kodu.

W takim przypadku możesz użyć CSS Hero. Jest to niestandardowa wtyczka do stylizacji WordPress, która pozwala dodawać własne CSS do twojego motywu WordPress bez pisania jakiegokolwiek kodu.

Możesz dowiedzieć się więcej o wtyczce w naszej recenzji CSS Hero.

Najpierw należy zainstalować i włączyć wtyczkę CSS Hero. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu wtyczka doda nowy element menu do twojego paska narzędzi administratora WordPress u góry.

Następnie należy przejść na stronę, na której znajduje się widżet, który chcemy wystylizować 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 wskazać i kliknąć dowolny element na twojej witrynie internetowej i zmienić jego styl.

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

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

Następnie możesz użyć menu po lewej stronie, aby stylizować twój widżet w dowolny sposób. Obejmuje to zaawansowane opcje stylizacji, takie jak gradienty, typografia, dopełnienie, marginesy i obramowania.

W poniższym przykładzie zmieniliśmy wielkość litery widżetu WordPress Search, aby jeszcze bardziej się wyróżniał.

W razie potrzeby można również zmienić określone elementy widżetu.

Na przykład, zdecydowaliśmy się zmienić promień obramowania przycisków i pól wyszukiwania. W ten sposób wyglądają one bardziej zakrzywione i stylowe.

Po zakończeniu nie zapomnij kliknąć przycisku “Zapisz”, aby zapisać twoje ustawienia.

Następnie przejdź do podglądu twojej witryny internetowej, aby zobaczyć nowy projekt WordPress w działaniu.

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się dodawać własne konfiguratory do widżetów WordPress. Warto również zapoznać się z naszym wyborem najlepszych kreatorów stron typu “przeciągnij i upuść” dla WordPressa oraz naszym porównaniem zalet i wad darmowych i premium motywów WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.