WordPress Kategoriler Widget’ını CSS ile Güzelleştirin

Selam! Ben bir WordPress freelancer’ı olarak, sitelerimi hem kullanıcı dostu hem de göze hitap eder hale getirmeyi çok seviyorum. WordPress’in varsayılan kategoriler widget’ı dürüst olalım, biraz sıkıcı görünüyor, değil mi? O yüzden kolları sıvadım ve kendi sitemde kullandığım, basit ama şık bir tasarım ortaya çıkardım. İşte benim WordPress kategoriler widget’ımı güzelleştirme yolculuğum ve bunu nasıl yaptığımın adım adım rehberi. Kodları sizinle de paylaşıyorum, hadi başlayalım!

Neden Kategoriler Widget’ını Özelleştirmelisiniz?

WordPress’te kategoriler, içeriğinizi düzenli tutmanın ve ziyaretçilerin ilgisini çekmenin harika bir yolu. Ama o sade liste görünümü, bazen kullanıcıların dikkatini çekmekte yetersiz kalıyor. Biraz CSS ile bu widget’ı hem modern hem de tıklanası hale getirebilirsiniz. Üstelik bu değişiklikler, sitenizin genel estetiğini artırırken kullanıcı deneyimini de iyileştiriyor. SEO açısından da düzenli ve dikkat çekici bir tasarım, ziyaretçilerin sitede daha fazla vakit geçirmesini sağlar. Kim buna hayır der ki?

Benim Kullandığım CSS Kodu

Kendi sitemde karar kıldığım tasarımı oluşturmak için aşağıdaki CSS kodlarını kullandım. Bu kodları temanızın style.css dosyasına ya da Özelleştir > Ek CSS bölümüne ekleyebilirsiniz. İşte adım adım ne yaptım:

/* Kategoriler widget’ı */
.widget_categories {
    padding: 15px;
    background: #fff;
    border-radius: 5px;
}
.widget_categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.widget_categories .cat-item {
    background: #e0e0e0;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.widget_categories .cat-item a {
    color: #333;
    text-decoration: none;
}
.widget_categories .cat-item:hover {
    background: #d0d0d0;
}
.widget_categories .cat-item a:hover {
    color: #0073aa;
}
.widget_categories .cat-item .post-count {
    color: #777;
    font-size: 14px;
}

Kodlar Ne İşe Yarıyor?

• Widget’ın Genel Görünümü: .widget_categories ile widget’a beyaz bir arka plan ve hafif yuvarlatılmış köşeler ekledim. 15px dolgu (padding) ile de nefes alacak bir alan yarattım.
• Liste Düzeni: .widget_categories ul ile varsayılan liste noktalarını kaldırdım, böylece temiz bir görünüm elde ettim.
• Kategori Öğeleri: .cat-item sınıfına gri bir arka plan, yuvarlak köşeler ve esnek kutu (flex) düzeni ekledim. Bu sayede kategori adı ve yazı sayısı yan yana, düzenli bir şekilde duruyor.
• Hover Efekti: Fareyle üzerine gelindiğinde arka plan rengi hafif koyulaşıyor (.cat-item:hover) ve bağlantı rengi mavi tonuna dönüyor (.cat-item a:hover). Bu, kullanıcıya etkileşim hissi veriyor.
• Yazı Sayısı: .post-count ile kategori yanındaki yazı sayısını gri ve küçük bir fontla stilize ettim, böylece ana odak kategori adında kalıyor.

Bunu Kendi Sitenize Nasıl Uygularsınız?

1. WordPress Paneline Girin: Yönetim panelinden Görünüm > Özelleştir seçeneğine tıklayın.
2. Ek CSS Bölümünü Bulun: Özelleştirme ekranında “Ek CSS” kısmına gidin.
3. Kodu Yapıştırın: Yukarıdaki CSS kodunu buraya kopyalayıp yapıştırın.
4. Değişiklikleri Kontrol Edin: Kategoriler widget’ınızın olduğu bir sayfayı önizleyin. Eğer temanızda farklı bir sınıf adı varsa (örneğin .widget_categories yerine başka bir şey), kodu ona göre uyarlayın.
5. Kaydedin ve Yayınlayın: Her şey istediğiniz gibiyse, “Yayınla” butonuna basın!

İpucu: Temanıza Göre Uyarlayın

Her WordPress teması biraz farklı olabilir. Mesela, benim kodlarımda kullanılan renkler (#e0e0e0, #0073aa gibi) sizin temanıza uymuyorsa, temanızın renk paletine uygun tonlar seçebilirsiniz. Renk kodlarını değiştirmek için bir renk seçici araç kullanabilirsiniz.

Sonuç: Daha Şık ve Kullanıcı Dostu Bir Widget

Bu küçük dokunuşlarla kategoriler widget’ım artık çok daha profesyonel ve davetkâr görünüyor. Ziyaretçilerim kategorilere daha kolay göz atıyor ve sitede geçirdikleri süre artıyor. Hem göze hitap ediyor hem de SEO açısından kullanıcı deneyimini destekliyor. Siz de deneyin, farkı hemen fark edeceksiniz!

Sorularınız olursa yorum bırakmayı unutmayın, elimden geldiğince yardımcı olurum. Kendi tasarımlarınızı da benimle paylaşırsanız çok sevinirim!