WordPress Widget’larına Özel Stiller Nasıl Eklenir (2 Yol)

Widget’larınızı özelleştirmek, web sitenizin görünümünü iyileştirmenin, marka tutarlılığını korumanın ve önemli bilgilere dikkat çekmenin güçlü bir yoludur.

Ancak birçok WordPress kullanıcısı, özellikle de CSS konusunda rahat değillerse, widget stilini zorlayıcı bulmaktadır. Yine de endişelenmeyin, çünkü yardım etmek için buradayız.

Bu makalede, web sitenizi bozmadan WordPress widget’larına özel stiller eklemek için iki kolay yöntem göstereceğiz. İster biraz CSS ile rahat olun, ister kodsuz bir çözümü tercih edin, sizi teminat altına aldık.

WordPress widget’larına özel stiller eklemenin 2 yolunu göstereceğiz. Sizin için en uygun olana geçmek için bu hızlı bağlantıları kullanabilirsiniz:

Yöntem 1: Blok Düzenleyici ile WordPress Widget’larına Özel Stiller Ekleme (Temel)

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. Bu, varsayılan WordPress bloklarından bazıları için bazı blok stil seçenekleri göreceğiniz anlamına gelir.

Örneğin, Görünüm ” Widget ‘lar sayfasına gider ve varsayılan bir WordPress bloğuna tıklarsanız, bloğun renklerini ve tipografisini değiştirme seçeneklerini görürsünüz.

Ancak, tüm bloklar bu seçenekle birlikte gelmez, özellikle de bu bloklar varsayılan WordPress blokları değilse. Neyse ki, widget’lar için blok düzenleyiciyi kullanmanın avantajlarından biri, her bloğa kolayca özel CSS sınıfları ekleyebilmenizdir.

Tek yapmanız gereken, özel stiller eklemek istediğiniz widget’a tıklamaktır.

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.

Özel CSS eklemenin bir başka yolu da WPCode‘dur. Temanızda zaten çok sayıda özel CSS kodu varsa ve tüm parçacıkları kolayca ayırt etmek ve izlemek istiyorsanız bunu kullanmanızı öneririz.

İlk olarak, WPCode eklentisini yüklediğinizden emin olun. Adım adım talimatlar için WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuzu okuyabilirsiniz.

Ardından, Kod Parçacıkları “ + Parçacık Ekle’ye gidin ve ‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ı seçin. Ardından, ‘+ Özel Snippet Ekle’ düğmesine tıklayın.

Şimdi, yeni özel CSS’nize bir ad verin. ‘Özel Widget Stili’ gibi basit bir şey olabilir.

Ardından, Kod Türünü ‘CSS Snippet’ olarak değiştirin.

Ardından, devam edin ve özel CSS’nizi alana ekleyin.

İşte kullandığımız bazı temel CSS:

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

Tamamlandığında, Ekleme bölümüne gidin. Ekleme Yönteminin ‘Otomatik Ekleme’ ve Konumun ‘Site Genelinde Başlık’ olarak ayarlandığından emin olun.

Bundan sonra, sağ üst köşedeki düğmeyi ‘Etkin’ yazana kadar değiştirin ve ‘Snippet’i Kaydet’e tıklayın.

Özel CSS’nizi ekledikten sonra, web sitenizi mobil veya masaüstünde görüntüleyerek çalıştığını görebilirsiniz.

İşte bizimki böyle görünüyor:

Yöntem 2: CSS Hero ile WordPress Widget’larına Özel Stiller Uygulama (Daha Özelleştirilebilir)

Yukarıdaki 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.

CSS Hero incelememizde eklenti hakkında daha fazla bilgi edinebilirsiniz.

Ö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 getirmeniz yeterlidir. Ardından seçmek için tıklayın.

Bu örnekte, Arama widget’ımızı seçtik.

Bundan sonra, widget’ınızı istediğiniz şekilde şekillendirmek için soldaki menüyü kullanabilirsiniz. Buna gradyanlar, tipografi, dolgu, kenar boşlukları ve kenarlıklar gibi gelişmiş stil seçenekleri de dahildir.

Aşağıdaki örnekte, Arama widget’ının yazı tipi boyutunu değiştirerek daha da öne çıkmasını sağladık.

Gerekirse widget’ın belirli öğelerini de değiştirebilirsiniz.

Örneğin, düğme ve arama alanlarının kenarlık yarıçapını değiştirmeye karar verdik. Bu şekilde daha kavisli ve şık görünüyorlar.

İşiniz bittiğinde, ayarlarınızı kaydetmek için ‘Kaydet’ düğmesine tıklamayı unutmayın.

Ardından, değişikliklerinizi yerinde görmek için web sitenizin önizlemesini yapın.

Umarız bu makale WordPress widget’larına özel stilleri nasıl ekleyeceğinizi öğrenmenize yardımcı olmuştur. WordPress için en iyi sürükle ve bırak sayfa oluşturucuları seçimimizi ve ücretsiz ve premium WordPress temaları arasındaki artı ve eksi karşılaştırmamızı da 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.