Wordpress İle Dinamik Filtreleme Özelliği Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Dinamik filtreleme sistemi geliştirmek için WordPress altyapısında belirli standartlara sahip olmanız gerekir. Çalışmalarınızı mutlaka bir yerel geliştirme ortamında (LocalWP veya Docker gibi) başlatın.

• WordPress 6.5 ve üzeri sürüm.
• PHP 8.2 veya üzeri (modern sözdizimi kullanımı için).
• Temel düzeyde JavaScript (ES6+ standartları).
• Tema dosyalarınız üzerinde düzenleme yapma yetkisi.
• Güvenlik için WP REST API ve Nonce (Number Used Once) kullanımı hakkında temel bilgi.

Adım 1: Özel İçerik Yapısını Hazırlama

Filtreleme yapabilmek için öncelikle verilerinizin düzenli olması gerekir. Özel yazı tipleri (Custom Post Types) veya özel alanlar (Custom Fields) kullanarak verilerinizi sınıflandırın. Bu örnekte, 'urunler' adında bir içerik türü üzerinden kategori bazlı filtreleme yapacağız.

// functions.php dosyasına ekleyin
function register_urunler_post_type() {
    register_post_type('urunler', [
        'labels' => ['name' => 'Ürünler', 'singular_name' => 'Ürün'],
        'public' => true,
        'has_archive' => true,
        'supports' => ['title', 'editor', 'thumbnail'],
        'show_in_rest' => true, // REST API desteği için kritik
    ]);
}
add_action('init', 'register_urunler_post_type');

Bu kod, WordPress yönetim panelinde 'Ürünler' menüsünü oluşturur. 'show_in_rest' => true parametresi, içeriklerimizin JavaScript ile çekilebilir olması için zorunludur.

Adım 2: REST API ile Filtreleme Endpoint Oluşturma

WordPress'in kendi REST API'sini kullanarak verileri çekmek, en güvenli ve performanslı yöntemdir. Kendi özel endpoint'imizi oluşturarak filtreleme sorgularını yönetebiliriz.

// functions.php dosyasına ekleyin
add_action('rest_api_init', function () {
    register_rest_route('filtre/v1', '/urunler/', [
        'methods' => 'GET',
        'callback' => 'get_filtered_urunler',
        'permission_callback' => '__return_true',
    ]);
});

function get_filtered_urunler($request) {
    $cat_id = $request->get_param('cat');
    $args = [
        'post_type' => 'urunler',
        'posts_per_page' => 10,
    ];
    if ($cat_id) {
        $args['tax_query'] = [['taxonomy' => 'urun_kategori', 'field' => 'term_id', 'terms' => $cat_id]];
    }
    $query = new WP_Query($args);
    return $query->posts;
}

Bu fonksiyon, bir GET isteği geldiğinde cat parametresini kontrol eder ve uygun ürünleri JSON formatında döndürür. Güvenlik için permission_callback kısmında yetkilendirme kontrolleri yapabilirsiniz.

Adım 3: Frontend Filtre Arayüzünü Oluşturma

Kullanıcının etkileşime gireceği HTML yapısını oluşturun. Basit bir form veya buton grubu, filtreleme için yeterli olacaktır.

    Elektronik
    Giyim

Bu HTML yapısı, JavaScript ile tetiklenecek olan butonları ve sonuçların basılacağı kapsayıcıyı temsil eder.

Adım 4: JavaScript ile Dinamik Veri Çekme

Modern Fetch API kullanarak, butonlara tıklandığında REST API'ye istek gönderin ve gelen veriyi ekrana basın. Bu yöntem sayfa yenilenmesini engeller.

document.querySelectorAll('.filtre-btn').forEach(btn => {
    btn.addEventListener('click', async (e) => {
        const catId = e.target.dataset.cat;
        const response = await fetch(`/wp-json/filtre/v1/urunler?cat=${catId}`);
        const data = await response.json();
        
        const container = document.getElementById('sonuc-alani');
        container.innerHTML = data.map(item => `
${item.post_title}
`).join('');
    });
});

Bu JavaScript kodu, seçilen kategoriye göre veriyi çeker ve HTML içeriğini günceller. async/await yapısı, kodun daha okunabilir ve yönetilebilir olmasını sağlar.

Filtreleme Yöntemlerinin Karşılaştırılması

Adım 5: Güvenlik ve Hata Yönetimi

Kullanıcı girişlerini her zaman temizleyin ve doğrulayın. SQL Injection riskine karşı WordPress'in yerleşik sorgu fonksiyonlarını (WP_Query gibi) kullanmak sizi korur.

Kritik Uyarı: Üretim ortamında (production) REST API endpoint'lerinize mutlaka nonce kontrolü ekleyin. Aksi takdirde, kötü niyetli kişiler API'nize gereksiz sorgular göndererek sunucu kaynaklarınızı tüketebilir (DDoS benzeri etkiler).

// Güvenli Nonce kullanımı örneği
check_ajax_referer('filtre_nonce', 'security');

Bu kod, isteğin sitenizden geldiğini doğrular ve yetkisiz erişimleri engeller.

Sıkça Sorulan Sorular

Dinamik filtreleme SEO'yu etkiler mi?

Evet, eğer sadece JavaScript ile içerik gösterirseniz arama motorları bu içerikleri göremeyebilir. Bu nedenle, ilk sayfa yüklemesinde içeriğin statik olarak sunulması ve filtrelemenin üzerine eklenmesi önerilir.

Çok fazla ürün olduğunda performans sorunu olur mu?

Evet, veritabanı sorgularınızı optimize etmek için posts_per_page limitini mutlaka kullanın ve gerekirse sonuçları sayfalara bölün.

Mobil cihazlarda filtreleme nasıl çalışır?

Mobil cihazlarda butonlar yerine 'select' (açılır menü) yapısını kullanmak daha iyi bir kullanıcı deneyimi sağlar.

Filtreleme sonrası URL güncellenmeli mi?

Kullanıcıların filtreli sayfayı paylaşabilmesi için history.pushState() kullanarak URL'yi dinamik olarak güncellemeniz tavsiye edilir.

Hangi durumlarda eklenti tercih edilmeli?

Eğer çok karmaşık (fiyat aralığı, renk, beden, marka gibi) bir filtreleme yapacaksanız, geliştirme süresini kısaltmak adına profesyonel filtreleme eklentileri tercih edilebilir.

Gelişmiş Performans Optimizasyonu: Veritabanı Sorgularını Hızlandırma

Dinamik filtreleme sisteminiz büyüdükçe, özellikle binlerce ürün veya içerik içeren veritabanlarında sorgu süreleri artabilir. WordPress'in WP_Query yapısı, karmaşık meta sorgularında (meta_query) yavaşlayabilir. Bu durumu aşmak için sorgularınızı optimize etmeniz ve veritabanı yükünü azaltmanız kritik önem taşır.

Sorgu performansını artırmak için kullanabileceğiniz en etkili yöntemlerden biri, meta verileri indekslemek veya özel bir veritabanı tablosu kullanmaktır. Ancak, standart bir kurulumda pre_get_posts filtresini kullanarak sorguyu optimize etmek başlangıç için yeterli olacaktır.

function optimize_filter_query($query) {
    if (!is_admin() && $query->is_main_query() && isset($_GET['filter_category'])) {
        // Gereksiz verilerin yüklenmesini engellemek için alanları kısıtlayın
        $query->set('fields', 'ids'); 
        // Sorgu önbelleğini aktif edin
        $query->set('update_post_meta_cache', false);
        $query->set('update_post_term_cache', false);
    }
}
add_action('pre_get_posts', 'optimize_filter_query');

Ayrıca, büyük ölçekli sitelerde Object Caching (Redis veya Memcached) kullanmak, her filtreleme isteğinde veritabanına gitmek yerine veriyi RAM üzerinden sunmanızı sağlar. Bu, sunucu yanıt süresini (TTFB) milisaniye seviyelerine indirecektir.

Filtreleme Sisteminde Hata Ayıklama ve Test Süreçleri

Geliştirdiğiniz filtreleme sisteminin hatasız çalışması için uçtan uca test yapmanız gerekir. Özellikle JavaScript tarafında dönen JSON verilerinin doğruluğunu kontrol etmek, kullanıcı deneyimini doğrudan etkiler.

Hata ayıklama sürecinde şu adımları izlemelisiniz:

• Network Tabı Kontrolü: Tarayıcınızın Geliştirici Araçları (F12) üzerinden 'Network' sekmesini açın. Filtreleme yaptığınızda tetiklenen REST API isteğinin 200 OK durum koduyla dönüp dönmediğini kontrol edin.
• JSON Yanıt Doğrulaması: API'den dönen verinin yapısını console.log() ile inceleyin. Eğer beklediğiniz veriler yerine HTML dönüyorsa, WordPress'in wp_send_json_success() fonksiyonunu doğru kullanıp kullanmadığınızı kontrol edin.
• Boş Sonuç Senaryosu: Hiçbir ürünün bulunmadığı bir filtreleme kombinasyonunda sistemin nasıl tepki verdiğini test edin. Kullanıcıya "Sonuç bulunamadı" mesajı göstermek, boş bir ekranla karşılaşmasından çok daha iyidir.

// JavaScript hata yönetimi örneği
fetch(endpoint)
    .then(response => response.json())
    .then(data => {
        if (data.length === 0) {
            document.getElementById('results').innerHTML = '
Seçilen kriterlere uygun içerik bulunamadı.
';
        } else {
            renderResults(data);
        }
    })
    .catch(error => {
        console.error('Filtreleme hatası:', error);
        alert('Bir hata oluştu, lütfen tekrar deneyin.');
    });

Test aşamasında farklı tarayıcılar (Chrome, Firefox, Safari) ve mobil cihazlar üzerinde test yapmayı unutmayın. Özellikle mobil cihazlarda dokunmatik etkileşimlerin (touch events) filtreleme butonlarını tetikleyip tetiklemediğini doğrulamak, sitenizin erişilebilirliği açısından hayati önem taşır.

Sonuç

WordPress üzerinde dinamik filtreleme özelliği oluşturmak, sitenizin profesyonelliğini ve kullanılabilirliğini üst seviyeye taşır. Bu rehberde öğrendiğiniz REST API ve JavaScript entegrasyonu, modern web geliştirmenin temelidir. Bir sonraki adım olarak, filtreleme sonuçlarına 'yükleniyor' (loading) animasyonu ekleyerek kullanıcı deneyimini daha da iyileştirebilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Canlı sitenizde uygulamadan önce mutlaka yedek alınız ve güvenlik testlerini gerçekleştiriniz. Karmaşık veritabanı işlemleri için bir uzmana danışmanız önerilir.