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

WordPress widget'ları artık blok düzenleyiciyi kullandığından, ne kadar kontrole ihtiyacınız olduğuna bağlı olarak görünümlerini değiştirmenin birkaç farklı yolu vardır.

Önce yerleşik seçenekleri inceleyeceğiz, ardından tamamen özel stiller eklemeyi göstereceğiz:

1. Varsayılan Blok Ayarlarını Kullanma

Özel kod eklemeden önce, bloğun ihtiyacınız olan ayarlara sahip olup olmadığını kontrol etmeye değer.

Görünüm » Widget'lar sayfasına gidip belirli bir bloğa tıkladığınızda, genellikle blok ayarları panelinde renkleri ve tipografiyi değiştirmek için seçenekler görürsünüz.

2. Özel Bir CSS Sınıfı Ekleme

Varsayılan ayarlar yeterli değilse, widget'a belirli bir "sınıf" ekleyebilirsiniz. Bu, özel kodunuzla yalnızca o widget'ı hedeflemenizi sağlayan bir etiket adı gibi davranır.

Özel stiller eklemek istediğiniz widget'a tıklamanız yeterlidir. Ardından, Blok panelinin altındaki 'Gelişmiş' sekmesine aşağı kaydırın. Buradan özel bir CSS sınıfı ekleyebilirsiniz.

Bu eğitim için, alana latest-articles yazın. Sınıf adının başına bir nokta (.) eklemediğinizden emin olun.

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

3. Özel Stillerinizi Uygulama

Widget'ınıza bir sınıf adı verdiğinize göre, WordPress'e onu nasıl stilize edeceğini söyleyen kodu eklemeniz gerekir. Bunu yapmanın iki yolu vardır:

Seçenek 1: Tema Özelleştiriciyi Kullanma

Kodu yalnızca test etmek istiyorsanız eklemenin en hızlı yolu budur.

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

Seçenek 2: WPCode Kullanma (Önerilen)

Özel stillerinizi daha sonra temanızı değiştirseniz bile kaydettiği için WPCode kullanmanızı öneririz. Ayrıca kod parçacıklarını WordPress'e eklemenin en güvenli yoludur.

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)

Manuel olarak CSS kodu yazmak yeni başlayanlar için zor olabilir. Küçük bir hata sitenizin düzenini bozabilir ve sözdizimini öğrenmek zaman alır.

Kodla uğraşmak istemiyorsanız, CSS Hero kullanabilirsiniz. Widget'larınızı basit bir noktaya bas ve tıkla arayüzü ile özelleştirmenizi sağlayan görsel bir stil eklentisidir.

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

Öncelikle CSS Hero eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına 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.

WordPress'te Stil Seçenekleri Hakkında Sıkça Sorulan Sorular

Okuyucularımızın WordPress'te farklı öğeleri stilize etmekle ilgili sıkça sorduğu bazı sorular şunlardır:

WordPress'e özel widget'lar nasıl eklenir?

Özel bir widget eklemek için kontrol panelinizde Görünüm » Widget'lar'a gidin ve artı (+) blok ekle düğmesine tıklayın. Ardından, metin, resimler veya son gönderiler gibi mevcut bloklardan herhangi birini seçebilir ve kenar çubuğunuza veya altbilgi alanınıza yerleştirebilirsiniz.

WordPress'e nasıl stil eklenir?

Stilleri eklemenin en güvenli yolu, Tema Özelleştirici'deki Ek CSS sekmesini veya WPCode gibi bir eklentiyi kullanmaktır. Bu yöntemler, temanızın ana dosyalarını değiştirmeden özel CSS kodu eklemenize olanak tanır ve değişikliklerinizin güncellemeler sırasında kaybolmamasını sağlar.

Bir widget'ı özelleştirebilir miyim?

Evet, bir widget'ın neredeyse her yönünü özelleştirebilirsiniz. Modern WordPress widget'ları, arka plan renkleri ve tipografi için yerleşik ayarlara sahiptir. Daha gelişmiş kontrol için, widget'a belirli bir CSS sınıfı atayabilir ve onu kodla manuel olarak stilleyebilirsiniz.

WordPress'te özel bir menü widget'ı nasıl oluşturulur?

Widget alanınızda Gezinme Menüsü bloğunu kullanarak özel bir menü ekleyebilirsiniz. Öncelikle, Görünüm » Menüler bölümünde özel menünüzü oluşturun, ardından Gezinme Menüsü bloğu ayarlarındaki açılır seçeneklerden bu menüyü seçin.

Özel bir widget nasıl oluşturulur?

Varsayılan bloklarda bulunmayan belirli bir işlevselliğe ihtiyacınız varsa, bir eklenti yazarak veya WPCode gibi bir araç kullanarak özel bir widget oluşturabilirsiniz. Ancak, yalnızca özel bir tasarım istiyorsanız, bunu genellikle mevcut blokları gruplandırarak ve özel CSS stilleri uygulayarak başarabilirsiniz.

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.