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

WordPress siteleri oluşturmak, küçük detayların büyük farklar yarattığını bize öğretti. Özel widget stillendirmesi, iyi web sitelerini harika web sitelerine dönüştürebilir.

WPBeginner'da her öğenin birlikte çalışmasını sağlıyoruz. Örneğin kenar çubuğu widget'larımızı ele alalım.

Görünümlerini, önemli kaynakları vurgulamak ve sitemizin tasarımıyla sorunsuz bir şekilde uyum sağlamak için özelleştirdik. Bu, milyonlarca ziyaretçiyle güven oluşturmamıza yardımcı oluyor.

Bu kılavuzda, WordPress widget stillerini özelleştirmenin en kolay yöntemlerini paylaşacağız. Widget'larınızın profesyonel görünmesini ve temanızla mükemmel bir şekilde entegre olmasını sağlayacak teknikleri öğreneceksiniz.

WordPress Widget'larına Neden Özel Stiller Eklenir?

Varsayılan olarak, WordPress widget'ları temanızın stilini kullanır, bu da her zaman tasarım hedeflerinize uymayabilir. Özel stiller eklemek, widget'larınızın görünümü ve hissi üzerinde size daha fazla kontrol sağlar.

Özelleştirmeye neden değer olduğunu öğrenin:

• 🎨 Markanızla Eşleştirin: Özel stiller, daha uyumlu bir görünüm için widget renklerini, yazı tiplerini ve aralığını sitenizin markasıyla uyumlu hale getirmenize olanak tanır.
• 👓 Okunabilirliği Artırın: Bazen varsayılan widget düzeni okunması kolay değildir. Stil, daha iyi bir kullanıcı deneyimi için yazı tipi boyutlarını, kontrastı veya hizalamayı iyileştirmeye yardımcı olabilir.
• 🌟 Önemli İçeriği Vurgulayın: en son gönderilerinizin, harekete geçirici mesajınızın veya iletişim bilgilerinizin öne çıkmasını mı istiyorsunuz? Özel CSS, bu widget'ları daha göz alıcı hale getirebilir.
• 🧹 Dağınık Tasarımları Temizleyin: Bir widget çok kalabalık veya yerinde değil gibi görünüyorsa, özel stiller görünümünü düzenlemeye ve düzeninize daha sorunsuz entegre etmeye yardımcı olur.
• 🧩 Benzersiz Düzenler Oluşturun: Özel stiller, temel bir metin widget'ını stilize edilmiş bir promosyon kutusuna dönüştürmek veya birden fazla widget'ı bir ızgarada hizalamak gibi düzen olanakları sunar.

Kısacası, widget'larınızı stilize etmek, varsayılan görünümün ötesine geçmenize ve daha cilalı, profesyonel bir web sitesi oluşturmanıza yardımcı olur.

Bunu söyledikten sonra, WordPress widget'larınıza özel stilleri kolayca nasıl ekleyeceğinize bir göz atalım.

WordPress widget'larınızı özel stillerle özelleştirmek için size 2 yol göstereceğiz. Size en uygun olanı atlamak için bu hızlı bağlantıları kullanabilirsiniz:

• Yöntem 1: WordPress Widget'larını CSS Kodu ile Stillendirme
• Yöntem 2: WordPress Widget'larını CSS Hero ile Stilize Edin (Kodsuz)

Yöntem 1: WordPress Widget'larını CSS Kodu ile Stillendirme

WordPress widget'ları artık yeni bir widget ve bloğu widget alanlarına ve kenar çubuklarına eklemek için blok düzenleyiciyi kullanıyor. Bu, bazı varsayılan WordPress blokları için bazı blok stil seçenekleri göreceğiniz anlamına gelir.

Örneğin, Görünüm » Widget'lar sayfasına gidip varsayılan bir WordPress bloğuna tıkladığınızda, bloğun renklerini ve tipografisini değiştirme seçeneklerini göreceksiniz.

Ancak, özellikle bu bloklar varsayılan WordPress blokları değilse, tüm bloklar bu widget seçenekleriyle gelmez. 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ıklamak.

Ardından, Blok panelindeki 'Gelişmiş' sekmesine aşağı kaydırmanız gerekir. Buradan özel bir CSS sınıfı ekleyebilirsiniz.

Widget ayarlarınızı 'Güncelle' düğmesine tıklayarak kaydetmeyi unutmayın.

Artık bu belirli CSS sınıfını hedefleyen özel CSS'yi WordPress temanıza ekleyebilirsiniz.

Yalnızca Görünüm » Özelleştir sayfasına gidin ve Ek CSS sekmesine geçin. Orada, web sitenizin canlı önizlemesini CSS kurallarınızı ekleyebileceğiniz bir kutu ile göreceksiniz.

Özel CSS eklemek için başka bir etkili yöntem WPCode kullanmaktır.

Bunu kapsamlı bir şekilde test ettik ve özel kodu temanıza entegre etmenin en güvenli yollarından biri olduğunu gördük. Çok sayıda CSS parçacığı yönetiyorsanız, WPCode bunları düzenlemeyi ve izlemeyi kolaylaştırır.

Özellikleri ve faydaları hakkında daha fazla ayrıntı için, lütfen WPCode incelemize göz atın.

Öncelikle, WPCode eklentisini yüklediğinizden emin olun. Adım adım talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair rehberimizi okuyabilirsiniz.

Ardından, Kod Parçacıkları » + Parçacık Ekle 'ye gidin ve 'Özel Kodunuzu Ekleyin (Yeni Parçacık)' seçeneğini belirleyin. Ardından, '+ Özel Parçacık Ekle' düğmesine tıklayın.

Şimdi, yeni özel CSS'inize 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, özel CSS'nizi alana ekleyin.

Kullandığımız temel CSS şunlardır:

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

Tamamlandığında, Ekleme bölümüne aşağı kaydırın. Ekleme Yöntemi'nin 'Otomatik Ekle' olarak ayarlandığından ve Konum'un 'Site Geneli Üstbilgi' olduğundan emin olun.

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

Özel CSS'nizi ekledikten sonra, WordPress web sitenizi mobil cihazlarda veya masaüstünde görüntüleyerek çalışırken görebilirsiniz.

Bizimki demo WordPress sitemizde şöyle görünüyor:

Yöntem 2: WordPress Widget'larını CSS Hero ile Stilize Edin (Kodsuz)

Yukarıdaki yöntemin bir sorunu, CSS kodu yazmanız gerekmesidir. Ancak, tüm kullanıcılar CSS bilmiyor veya kendi başlarına kod yazmak istemiyor.

Bu durumda, CSS Hero kullanabilirsiniz. Bu, kod yazmadan WordPress temanıza özel CSS eklemenizi sağlayan özel bir WordPress stil eklentisidir.

Eklenti hakkında daha fazla bilgiyi CSS Hero incelememizde öğrenebilirsiniz.

Öncelikle, CSS Hero eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, WordPress eklentisini nasıl kuracağınıza dair adım adım kılavuzumuza bakın.

Etkinleştirildikten sonra, eklenti WordPress yönetici araç çubuğunuza üstte yeni bir menü öğesi ekleyecektir.

Ardından, stilize etmek istediğiniz widget'ı görebileceğiniz sayfayı ziyaret etmeniz ve üstteki CSS Hero düğmesine tıklamanız gerekir.

Bu, sayfayı CSS Hero düzenleyici arayüzünde açacaktır.

Web sitenizdeki herhangi bir öğeye tıklayıp stilini değiştirebileceğiniz canlı bir düzenleyicidir.

Stilini değiştirmek istediğiniz widget'ın üzerine farenizi getirin. Ardından, seçmek için tıklayın.

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

Bundan sonra, widget'ınızı istediğiniz gibi stil vermek için soldaki menüyü kullanabilirsiniz. Bu, gradyanlar, tipografi, dolgu, kenar boşlukları ve kenarlıklar gibi gelişmiş stil seçeneklerini içerir.

Aşağıdaki örnekte, WordPress Arama widget'ının yazı tipi boyutunu daha da belirgin hale getirmek için değiştirdik.

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

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

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

Ardından, yeni WordPress tasarımınızı uygulamada görmek için web sitenizin önizlemesini yapın.

Bu makalenin WordPress widget'larına özel stiller eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, en iyi sürükle-bırak WordPress sayfa oluşturucuları ve ücretsiz ve premium WordPress temaları arasındaki artılarını ve eksilerini karşılaştırdığımız yazımızı da görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.