WordPress Widget’larına Özel Stiller Ekleme

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.

İş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.