WordPress widget’larına özel stiller eklemek mi istiyorsunuz?
Widget’larınızı şekillendirmek, markanızı tutarlı tutmanıza ve kullanıcılarınız için önemli bilgileri vurgulamanıza olanak tanır.
Bu makalede, web sitenizi bozmadan WordPress widget’larına nasıl kolayca özel stiller ekleyebileceğinizi göstereceğiz.
WordPress widget’larına özel stiller eklemenin üç yolunu göstereceğiz. Sizin için en uygun olanı seçebilirsiniz.
- Blok Düzenleyiciyi Kullanarak WordPress Widget’larına Özel Stiller Ekleme
- WordPress’te Klasik Widget’lara Özel Stiller Ekleme
- CSS Hero Kullanarak WordPress Widget’larına Özel Stiller Ekleme (kod yok)
Başlamadan önce, bu makale widget’ları şekillendirebilmeniz için biraz CSS bilgisi gerektirir. Ayrıca WordPress temanıza özel CSS eklemeniz gerekecek.
CSS yerine kodsuz bir yöntemi tercih ediyorsanız, yöntem 3’e geçebilirsiniz.
Hadi başlayalım.
Blok Düzenleyiciyi Kullanarak WordPress Widget’larına Özel Stiller Ekleme
WordPress widget’ları artık widget’a hazır alanlara ve kenar çubuklarına widget ve blok eklemek için blok düzenleyicisini kullanıyor.
Widget’lar için blok düzenleyiciyi kullanmanın avantajlarından biri de her bloğa kolayca özel CSS sınıfları ekleyebilmenizdir.
Basitçe Görünüm ” Widget ‘lar sayfasına gidin ve özel stiller eklemek istediğiniz widget’a tıklayın.
Ardından, Blok panelinin altındaki Gelişmiş sekmesine gitmeniz gerekir. Buradan özel bir CSS sınıfı ekleyebilirsiniz.
Güncelle düğmesine tıklayarak değişikliklerinizi kaydetmeyi unutmayın.
Artık WordPress temanıza söz konusu CSS sınıfını hedefleyen özel CSS ekleyebilirsiniz.
Basitçe Görünüm ” Özelleştir sayfasına gidin ve Ek CSS sekmesine geçin. Orada, CSS kurallarınızı eklemek için bir kutu ile web sitenizin canlı bir önizlemesini göreceksiniz.
Not: Görünüm Menüsü altında Özelleştir’i göremiyorsanız, WordPress yöneticisindeki eksik tema özelleştiriciyi nasıl düzelteceğinize ilişkin makalemize göz atın veya özel CSS’nizi eklemek için WPCode eklentisini kullanın.
İşte kullandığımız bazı temel CSS.
.latest-articles {
background-color:#def4f1;
padding:10px;
}
Özel CSS’nizi ekledikten sonra, web sitenizi önizleyerek çalıştığını görebilirsiniz.
Blok düzenleyici widget’larını kullanırken karşılaşılan sorun, hedeflenecek doğru bloğu bulmaktır.
Daha kolay bir çözüm, blokları birlikte kolayca şekillendirmek için bir Grup bloğuna eklemek olacaktır. Blokları gruplama hakkında daha fazla bilgiyi WordPress blok düzenleyicisini kullanma kılavuzumuzda bulabilirsiniz.
WordPress’te Klasik Widget’lara Özel Stiller Ekleme
WordPress web sitenizde eski klasik widget ‘ları kullanıyorsanız bu yöntem tam size göre.
Bu yöntem için Widget Options eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Widget Options, WordPress widget’larınıza ekstra seçenekler ekleyen güçlü bir eklentidir. Bu, kullanıcı cihazına, rolüne ve diğer koşullara göre widget’ları gösterme ve gizleme yeteneğini içerir.
Eklenti ayrıca WordPress widget’larınıza özel CSS sınıfları eklemek için bir seçenek ekler.
Basitçe Görünüm ” Widget ‘lar sayfasına gidin ve özel stili eklemek istediğiniz widget’a tıklayın.
Widget ayarlarında, geniş bir seçenek yelpazesi göreceksiniz. Buradan, özel CSS sınıfınızı eklemek için Dişli simgesine tıklamanız gerekir.
İşiniz bittiğinde, widget ayarlarınızı kaydetmek için Kaydet düğmesine tıklamayı unutmayın.
Artık az önce girdiğiniz CSS sınıfını kullanarak temanıza özel CSS kuralı ekleyebilirsiniz. Örneğin, test sitemizde aşağıdaki CSS’yi kullandık.
.latest-articles {
background-color:#def4f1;
padding:10px;
}
Test web sitemizde bu şekilde görünüyordu.
CSS Hero ile WordPress Widget’larına Özel Stiller Uygulama
Yukarıdaki iki yöntemle ilgili bir sorun, CSS kodu yazmanız gerekmesidir. Ancak, tüm kullanıcılar CSS bilmiyor ya da kod yazmak istemiyor.
Bu durumda CSS Hero‘yu kullanabilirsiniz. Herhangi bir kod yazmadan WordPress temanıza özel CSS eklemenizi sağlayan özel bir WordPress stil eklentisidir.
Öncelikle CSS Hero eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından eklenti, WordPress yönetici araç çubuğunuzun üst kısmına yeni bir menü öğesi ekleyecektir.
Ardından, şekillendirmek istediğiniz widget’ı görebileceğiniz sayfayı ziyaret etmeniz ve üstteki CSS Kahramanı düğmesine tıklamanız gerekir.
Bu, sayfayı CSS Hero düzenleyici arayüzünde açacaktır.
Web sitenizdeki herhangi bir öğeyi işaret edip tıklayabileceğiniz ve stilini değiştirebileceğiniz canlı bir editördür.
Farenizi stil vermek istediğiniz widget’ın üzerine getirin ve seçmek için tıklayın.
Bundan sonra, widget’ınızı istediğiniz şekilde şekillendirmek için soldaki menüyü kullanabilirsiniz.
Buna degradeler, tipografi, dolgu, kenar boşlukları ve kenarlıklar gibi gelişmiş stil seçenekleri dahildir.
İşiniz bittiğinde, ayarlarınızı kaydetmek için Kaydet düğmesine basmayı unutmayın.
Artık değişikliklerinizi çalışırken görmek için web sitenizin önizlemesini yapabilirsiniz.
Umarız bu makale WordPress widget’larına özel stillerin nasıl ekleneceğini öğrenmenize yardımcı olmuştur. Ayrıca tüm web siteleri için en kullanışlı WordPress widget ‘ları seçimimizi veya kod yazmadan sıfırdan özel WordPress teması oluşturma kılavuzumuzu görmek isteyebilirsiniz.
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.
Yönetici
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.
Yönetici
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.
Yönetici
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.