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

WordPress sitenizde ziyaretçilerin sayfalar arasında gezinmesini sağlayan en kritik navigasyon bileşenlerinden biri kategorilerdir. Ancak WordPress’in varsayılan kategoriler widget’ı veya Gutenberg blok temalarındaki kategori listesi, tasarım olarak oldukça sade, renksiz ve tıklama isteği uyandırmayan bir yapıyla gelir. Bu kapsamlı rehberde, tek bir satır ağır eklenti kullanmadan, yalnızca modern CSS (Flexbox, CSS Grid ve CSS Değişkenleri) kullanarak WordPress kategoriler widget’ını nasıl profesyonel bir tasarıma dönüştüreceğinizi adım adım paylaşıyorum.

Kendi WordPress projelerimde ve müşteri sitelerinde test ettiğim 4 farklı tasarım şablonunu (Hap/Rozet Tasarımı, Modern Kart Görünümü, Açılır Hiyerarşik Menü ve Mobilde Yatay Kaydırılabilir Çip Menü), kod açıklamaları ve kopyala-yapıştır hazır CSS bloklarıyla aşağıda bulabilirsiniz.

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

Ziyaretçilerin bir web sitesine girdiklerinde aradıkları içeriğe hızlıca ulaşamamaları, siteden hemen çıkma oranını (Bounce Rate) ciddi şekilde artırır. Varsayılan kategori listesi genellikle standart bir <ul><li> hiyerarşisiyle sunulur; bu da hem masaüstünde kenar çubuğunu (sidebar) sıkıcı gösterir hem de mobil dokunmatik ekranlarda küçük tıklama alanları yüzünden kötü bir kullanıcı deneyimi (UX) yaratır.

Kategori bileşeninizi modern CSS ile yeniden biçimlendirdiğinizde şu somut avantajları elde edersiniz:

• Daha Yüksek Sayfa Gezinme Oranı (Dwell Time): Göze hitap eden, üzerine gelindiğinde mikro animasyonlar sunan kategori butonları, kullanıcıların merak edip diğer içeriklerinize tıklamasını sağlar.
• Mobil Uyumluluk ve Kolay Tıklanabilirlik: Yeterli padding (iç boşluk) ve minimum 44×44 piksellik dokunma hedefi (touch target) sayesinde mobil ziyaretçiler yanlış bağlantıya tıklamaktan kurtulur.
• Sıfır Sayfa Yükü (Hafif Kod): Harici stil eklentileri (widget plugins) yüklemek yerine saf CSS kullanarak sitenizin hız skorlarını (Core Web Vitals) ve TTFB sürelerini korursunuz.
• Topikal Otorite Güçlendirmesi: Arama motoru örümcekleri sitenizi tararken kategori bağlantılarınızın hiyerarşisini ve temiz DOM yapısını çok daha net ayrıştırır.

Performans Tüyosu: Sitenizde üçüncü taraf eklenti sayısını artırmadan sayfalarınızı hızlandırmak için WordPress Eklentisiz Hız Optimizasyonu Rehberimizdeki tekniklerden yararlanabilirsiniz.

WordPress Kategori HTML Yapısını Anlamak (Klasik vs. Blok Temalar)

CSS yazmaya başlamadan önce, temanızın hangi HTML seçicilerini (class) ürettiğini bilmek gerekir. WordPress’te iki farklı kategori widget çıktısı bulunur:

Aşağıda paylaşacağım tüm kodlar, hem klasik widget’ları (.widget_categories) hem de modern Gutenberg bloklarını (.wp-block-categories) kapsayacak şekilde evrensel seçicilerle yazılmıştır.

Tasarım 1: Modern Rozet (Pill) ve Etiket Stili

Bu tasarım, kategorileri kutucuk veya yuvarlak hatlı rozetler şeklinde sunar. Yan kenar çubuğunda aşırı yer kaplamaz ve kategori yanında bulunan yazı sayısını modern birer sayaç rozetine dönüştürür.

/* ========================================================
   1. Modern Rozet / Pill Kategori Widget Stili
   ======================================================== */
.widget_categories, 
.wp-block-categories {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.widget_categories ul, 
.wp-block-categories-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget_categories .cat-item,
.wp-block-categories-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.widget_categories .cat-item a,
.wp-block-categories-list li a {
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    flex-grow: 1;
    transition: color 0.2s ease;
}

/* Hover Etkileşimi */
.widget_categories .cat-item:hover,
.wp-block-categories-list li:hover {
    background: #0284c7;
    border-color: #0284c7;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.widget_categories .cat-item:hover a,
.wp-block-categories-list li:hover a {
    color: #ffffff !important;
}

/* Yazı Sayacı Rozeti (Badge) */
.widget_categories .cat-item .post-count,
.wp-block-categories-list li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    background: #e2e8f0;
    border-radius: 9999px;
    transition: all 0.2s ease;
}

.widget_categories .cat-item:hover .post-count,
.wp-block-categories-list li:hover span {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

Tasarım 2: Çizgili Sol Vurgulu (Border-Accent) Minimalist Liste

Minimalist veya haber/içerik portalları için mükemmel bir seçenektir. Kutu kutu görünüm yerine, her kategorinin soluna zarif bir renk vurgusu ekler ve fare üzerine geldiğinde çizgi boyutu genişleyerek yumuşak bir mikro geçiş sağlar.

/* ========================================================
   2. Sol Vurgulu Minimalist Kategori Tasarımı
   ======================================================== */
.widget_categories ul,
.wp-block-categories-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.widget_categories .cat-item,
.wp-block-categories-list li {
    position: relative;
    padding: 10px 16px;
    margin-bottom: 6px;
    background: transparent;
    border-left: 3px solid #cbd5e1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}

.widget_categories .cat-item a,
.wp-block-categories-list li a {
    color: #334155;
    text-decoration: none;
    font-weight: 500;
}

.widget_categories .cat-item:hover,
.wp-block-categories-list li:hover {
    border-left-color: #2563eb;
    background: #eff6ff;
    padding-left: 20px;
}

.widget_categories .cat-item:hover a,
.wp-block-categories-list li:hover a {
    color: #2563eb;
    font-weight: 600;
}

Tasarım 3: Çok Seviyeli (Hiyerarşik / Alt Kategori) Düzenleme

Eğer sitenizde ana kategori ve alt kategoriler (parent-child categories) kullanıyorsanız, varsayılan görünüm iç içe geçmiş girintilerle gözü çok yorar. Alt kategorileri belirginleştirmek için .children sınıfını hedefleyen şu kod bloğunu ekleyin:

/* ========================================================
   3. Hiyerarşik Alt Kategori (.children) Şablonu
   ======================================================== */
.widget_categories ul.children,
.wp-block-categories-list ul {
    margin-top: 8px !important;
    margin-left: 16px !important;
    padding-left: 12px !important;
    border-left: 2px dashed #e2e8f0;
}

.widget_categories ul.children .cat-item,
.wp-block-categories-list ul li {
    background: #f1f5f9;
    font-size: 0.88rem;
    padding: 6px 10px;
    border-radius: 6px;
}

.widget_categories ul.children .cat-item:hover,
.wp-block-categories-list ul li:hover {
    background: #e2e8f0;
}

Tasarım 4: Mobilde Yatay Kaydırılabilir Çip Bar (Horizontal Scroll)

Özellikle mobil cihazlarda kenar çubuğu içeriğin en altına düştüğü için kimse kategorileri görmez. Kategori listesini bir ızgara (Grid) veya yatay kaydırılabilir butonlar haline getirmek, mobil dönüşüm oranlarını doğrudan ikiye katlar:

/* ========================================================
   4. Mobil Yatay Kaydırılabilir Kategori Çipleri
   ======================================================== */
@media (max-width: 768px) {
    .widget_categories ul,
    .wp-block-categories-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 8px !important;
        padding-bottom: 12px !important;
        scrollbar-width: thin;
    }

    .widget_categories .cat-item,
    .wp-block-categories-list li {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 8px 16px !important;
        border-radius: 9999px !important;
        background: #f1f5f9 !important;
    }
}

Adım Adım Kurulum: CSS Kodlarını Sitenize Nasıl Ekleyebilirsiniz?

Hazırladığınız CSS stillerini sitenize entegre etmek için tema dosyalarını bozmanıza gerek yoktur. En güvenli yöntemler şunlardır:

1. WordPress Özelleştirici (Önerilen En Pratik Yol): WordPress admin panelinizde Görünüm > Özelleştir > Ek CSS bölümüne gidin. Seçtiğiniz kod bloğunu yapıştırın ve “Yayımla” butonuna basın.
2. Child Theme (Çocuk Tema) `style.css`: Eğer özel bir çocuk tema kullanıyorsanız, kodları doğrudan wp-content/themes/your-child-theme/style.css dosyasının en altına yapıştırabilirsiniz. Böylece ana tema güncellemelerinde kodlarınız asla silinmez.
3. Full Site Editing (FSE) / Blok Temalar: Görünüm > Site Düzenleyici > Stiller (Göz İkonu) > Ek CSS yolunu izleyerek FSE temalarında stillerinizi global olarak tanımlayabilirsiniz.

Tasarım Önerisi: Kategorilerinizde kullanacağınız renklerin kurumsal kimliğinize ve okunabilirlik kontrastına uygun olması kritik öneme sahiptir. Renk uyumu için Grafik Tasarımda Renk Teorisi Rehberimize göz atabilirsiniz.

Gelişmiş İpucu: Kategori Yazı Sayısını PHP ile Özelleştirme

WordPress varsayılan olarak yazı sayısını parantez içinde düz metin olarak basar: Kategori Adı (12). Eğer bu parantezi kaldırmak veya sayıyı <span class="post-count">12</span> şeklinde etiket içine almak isterseniz, temanızın functions.php dosyasına şu filtreyi ekleyebilirsiniz:

/**
 * Kategori yazı sayısını özel bir span etiketi içine alır
 */
function meyilnet_custom_category_count_badge($output) {
    // Parantez içindeki sayıları yakalayıp özel span sınıfına sarar
    $output = preg_replace('/(([0-9]+))/', '$1', $output);
    return $output;
}
add_filter('wp_list_categories', 'meyilnet_custom_category_count_badge');

Bu küçük PHP dokunuşu, CSS ile rozet tasarımı yaparken sayacın mükemmel şekilde hizalanmasını sağlar.

Sıkça Sorulan Sorular (SSS)