Czy chcesz dodać własne style do widżetów WordPress?
Stylizacja widżetów pozwala zachować spójny branding i podkreślić ważne informacje dla twojego importera.
W tym artykule pokażemy, jak łatwo dodawać własne konfiguratory do widżetów WordPress bez niszczenia twojej witryny internetowej.
Pokażemy ci trzy sposoby dodawania własnych stylów do widżetów WordPress. Możesz wybrać ten, który najbardziej Ci odpowiada.
- Dodawanie własnych stylów do widżetów WordPress za pomocą edytora bloków
- Dodawanie własnych stylów do klasycznych widżetów WordPress
- Dodawanie własnych stylów do widżetów WordPress za pomocą CSS Hero (bez kodu)
Zanim zaczniemy, ten artykuł wymaga pewnej wiedzy na temat CSS, abyś mógł stylizować widżety. Będziesz także musiał dodać własny CSS do twojego motywu WordPress.
Jeśli wolisz metodę bez kodu zamiast CSS, możesz przejść do metody 3.
Zaczynajmy.
Dodawanie własnych stylów do widżetów WordPress za pomocą edytora bloków
Widżety WordPress używają teraz edytora bloków do dodawania widżetów i bloków do obszarów gotowych na widżety i paneli bocznych.
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.
Po prostu przejdź do strony Wygląd ” Widżety i kliknij widżet, do którego chcesz dodać własne style.
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ć twoich zmian, 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.
Uwaga: Jeśli nie widzisz opcji Dostosuj w menu Wygląd, zapoznaj się z naszym artykułem na temat poprawki brakującego konfiguratora motywu w menu administratora WordPress lub użyj wtyczki WPCode, aby dodać swój własny CSS.
Oto kilka podstawowych CSS, których użyliśmy.
.latest-articles {
background-color:#def4f1;
padding:10px;
}
Po dodaniu własnego CSS, możesz wyświetlić podgląd swojej witryny internetowej, aby zobaczyć ją w działaniu.
Problem z korzystaniem z widżetów edytora bloków polega na znalezieniu odpowiedniego bloku, na który należy skierować uwagę.
Łatwiejszą poprawką byłoby dodanie bloków do bloku Grupa, aby łatwo stylizować je razem. Dowiedz się więcej o grupowaniu bloków w naszym przewodniku na temat korzystania z edytora bloków WordPress.
Dodawanie własnych konfiguratorów do klasycznych widżetów w WordPressie
Ta metoda jest dla ciebie, jeśli używasz starszych klasycznych widżetów na twojej witrynie internetowej WordPress.
W przypadku tej metody należy zainstalować i włączyć wtyczkę Widget Options. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Widget Options to potężna wtyczka, która dodaje dodatkowe opcje do twoich widżetów WordPress. Obejmuje to możliwość pokazywania i ukrywania widżetów na podstawie urządzenia użytkownika, roli i innych warunków.
Wtyczka dodaje również opcję dodawania własnych klas CSS do twoich widżetów WordPress.
Po prostu przejdź do strony Wygląd ” Widżety i kliknij widżet, do którego chcesz dodać własny styl.
W ustawieniach widżetu zobaczysz rozszerzony zakres opcji. W tym miejscu należy kliknąć ikonkę koła zębatego, aby dodać twoją własną klasę CSS.
Po zakończeniu nie zapomnij kliknąć przycisku Zapisz, aby zapisać twoje ustawienia widżetu.
Możesz teraz dodać własną regułę CSS do twojego motywu, używając klasy CSS, którą właśnie wpiszesz. W naszej witrynie testowej użyliśmy na przykład następującego kodu CSS.
.latest-articles {
background-color:#def4f1;
padding:10px;
}
Tak to wyglądało na naszej testowej witrynie internetowej.
Stosowanie własnych stylów do widżetów WordPress za pomocą CSS Hero
Problem z powyższymi dwiema metodami polega na tym, że trzeba napisać kod 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.
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ć i kliknij, aby go zaznaczyć.
Następnie możesz użyć menu po lewej stronie, aby nadać Twojemu widżetowi dowolny styl.
Obejmuje to zaawansowane opcje stylizacji, takie jak gradienty, typografia, dopełnienie, marginesy i obramowania.
Po zakończeniu nie zapomnij nacisnąć przycisku Zapisz, aby zapisać twoje ustawienia.
Możesz teraz wyświetlić podgląd twojej witryny internetowej, aby zobaczyć zmiany w działaniu.
Mamy nadzieję, że ten artykuł pomógł ci nauczyć się dodawać własne konfiguratory do widżetów WordPress. Możesz również zobaczyć nasz wybór najbardziej przydatnych widżetów WordPress dla wszystkich witryn internetowych lub zapoznać się z naszym przewodnikiem na temat tworzenia własnego motywu WordPress od podstaw bez pisania kodu.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ankush says
The Plugin was really Great but I had a problem…
It doesn’t work when i add custom css….
May be plugin css is overriding my code but.. that really sad…
Hey Wpbeginner.com Team.. Please leave me a reply,]
I You can tell me how to fix it…
Rachael says
I love this plugin but every time I activate it, I have trouble with the gallery widget. It works fine with the plugin deactivated, but if I turn on the plugin, the gallery widget won’t save any images. All of the other widgets work fine. Does anyone else have this issue?
Regina says
Does how to instructional above also also include the ability to customize the font of the widget titles?
Thanks!
terry says
Finally, after failing at trying to decode the jargon I get on inspect, this article told me exactly what I needed.
Thanks
Alex says
I don’t have any classes on widgets.
irfan says
There is extra white space while creating extra widget area for header. Kindly tell us , how to remove this
Thomas says
Hi, I tried to do it manually, inspected the element and its class but it did not work.
I am trying to change the style of a WPform.
Could you help me?
WPBeginner Support says
Hey Thomas,
Please take a look at this guide on how to add custom css to WPForms.
Administrator
daniel says
i have added a widget area to my header using the functions.php and header.php files. i can see the widget ive added on my site but i want to put it next to the menu, any idea how to do this please? i want it to sit to the right hand side of the menu.
WPBeginner Support says
Hey Daniel,
You’ll need to use place the widget code before your menu and then add custom CSS to position it.
Administrator
Deniz Kumru says
It’s my first wordpress theme.I was nervous till found your article.It’s done thank you
ivan says
Why does my layout under widget styles only shows the padding option, without the bottom margin, gutter & row layout option.
Rimi says
hallo
I can not make any changes because it is inactive
Being processed plugin / css / plugin-front.css (inactive),How can I activate pleas
Grace says
Hello, my theme doesn’t have a right sidebar, it came with just a footer widget area, can I use the custom css to add a right sidebar? Please help me, thanks
WPBeginner Support says
No, you will first need to define a widget ready area. Your theme may already have an option to use a sidebar layout. If it doesn’t, then we would recommend you to ask the theme author for support. On the other hand, if you feel confident in your coding skills, then go a head.
Administrator
Mr.T says
I want to change them manually. Am I right that by using widget-number class you actually can’t move them up or down in the widgets area, because their id will change, or it works differently?
Erick says
I have the same question
Correen K says
I was looking for something like this to add some style to my sidebar and stumbled upon the Flexible Posts Widget plugin. I think it’s always nice to have options
Abhishek Prakash says
Will using these many CSS not impact the page speed?
WPBeginner Staff says
Not if you do it right.