Wordpress İle Özel Bir Ajax Canlı Kategori Filtreleme Sistemi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu sistemi kurmadan önce çalışma ortamınızın güncel olduğundan emin olmalısınız. WordPress 6.0 ve üzeri sürümler, modern JavaScript (ES6+) standartlarını tam desteklemektedir.

• PHP 8.1+: Sunucu tarafındaki işlemler için güncel PHP sürümü.
• WordPress Teması: Bir çocuk tema (child theme) kullanmanız önerilir.
• Temel Bilgi: WordPress wp_enqueue_script, admin-ajax.php ve WP_Query yapısına aşinalık.
• Kod Editörü: VS Code veya benzeri bir editör.

Güvenlik Uyarısı: Ajax işlemlerinde mutlaka wp_nonce_field ve check_ajax_referer kullanarak isteklerin doğrulanmasını sağlayın. Aksi takdirde siteniz CSRF (Cross-Site Request Forgery) saldırılarına açık hale gelebilir.

Adım 1: Kategori Filtreleme Arayüzünü Oluşturma

İlk adımda, kullanıcıların tıklayacağı kategori butonlarını ve içeriklerin yükleneceği kapsayıcıyı (container) oluşturuyoruz. Bu HTML yapısı, JavaScript ile manipüle edeceğimiz temel alanı belirler.

    Tümü
    




    

Burada data-slug özniteliği, JavaScript tarafında hangi kategorinin seçildiğini anlamamız için anahtar görevi görür.

Adım 2: JavaScript ile Ajax İsteğini Hazırlama

Modern WordPress geliştirmede jQuery.ajax yerine artık yerel fetch API kullanılması önerilir. Aşağıdaki kod, butonlara tıklandığında sunucuya kategori bilgisini gönderir.

document.addEventListener('DOMContentLoaded', () => {
    const buttons = document.querySelectorAll('.filter-btn');
    const resultsContainer = document.getElementById('ajax-content-results');

    buttons.forEach(button => {
        button.addEventListener('click', async (e) => {
            const slug = e.target.getAttribute('data-slug');
            
            const formData = new FormData();
            formData.append('action', 'filter_posts');
            formData.append('category', slug);
            formData.append('nonce', ajax_object.nonce);

            const response = await fetch(ajax_object.ajax_url, {
                method: 'POST',
                body: formData
            });

            const data = await response.text();
            resultsContainer.innerHTML = data;
        });
    });
});

Bu kod, seçilen kategori slug değerini alır ve WordPress'in admin-ajax.php dosyasına bir POST isteği gönderir.

Adım 3: PHP Tarafında Ajax İsteğini İşleme

Sunucu tarafında, gelen isteği karşılayacak ve ilgili kategoriye ait gönderileri sorgulayacak fonksiyonu functions.php dosyanıza eklemelisiniz.

add_action('wp_ajax_filter_posts', 'filter_posts_callback');
add_action('wp_ajax_nopriv_filter_posts', 'filter_posts_callback');

function filter_posts_callback() {
    check_ajax_referer('ajax_filter_nonce', 'nonce');

    $category = sanitize_text_field($_POST['category']);
    
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 6,
    );

    if (!empty($category)) {
        $args['category_name'] = $category;
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
            echo '


' . get_the_title() . '
';
        endwhile;
        wp_reset_postdata();
    else :
        echo 'İçerik bulunamadı.';
    endif;

    wp_die();
}

wp_die() fonksiyonunu kullanmak, Ajax işlemlerinde WordPress'in gereksiz çıktı üretmesini engellemek için kritiktir.

Adım 4: Scriptleri Doğru Şekilde Kuyruğa Alma (Enqueue)

Ajax URL'sini ve güvenlik jetonunu (nonce) JavaScript tarafına aktarmak için wp_enqueue_script kullanmalıyız.

add_action('wp_enqueue_scripts', 'enqueue_filter_scripts');
function enqueue_filter_scripts() {
    wp_enqueue_script('ajax-filter', get_template_directory_uri() . '/js/filter.js', array(), '1.0', true);
    
    wp_localize_script('ajax-filter', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('ajax_filter_nonce')
    ));
}

wp_localize_script, PHP'deki değişkenleri JavaScript nesnesi olarak tarayıcıya güvenli bir şekilde taşır.

Karşılaştırma: Filtreleme Yöntemleri

Adım 5: Hata Ayıklama ve Optimizasyon

Sistemi test ederken tarayıcı konsolunu (F12 > Network sekmesi) açık tutun. Eğer 403 hatası alıyorsanız, nonce değerinin doğru aktarılmadığını veya check_ajax_referer kısmında bir hata olduğunu anlayabilirsiniz.

Performans İpucu: Çok fazla gönderiniz varsa, WP_Query sorgusuna no_found_rows => true ekleyerek veritabanı sorgusunu hızlandırabilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Canlı sitenizde uygulamadan önce mutlaka yedek alınız. Kodların güvenliği ve sunucu üzerindeki yükü, sitenizin trafik yoğunluğuna göre değişiklik gösterebilir.

Sıkça Sorulan Sorular

Ajax ile filtreleme SEO'yu etkiler mi?

Evet, Google botları JavaScript ile yüklenen içerikleri görebilir ancak standart URL yapısı kadar etkili değildir. Kritik içerikler için sayfa yenilemeli filtrelemeyi tercih edebilirsiniz.

Neden wp_die() kullanmalıyım?

WordPress Ajax işlemlerinde wp_die() kullanılmazsa, sistem çıktının sonuna bir "0" değeri ekler ve tüm tema footer'ını Ajax cevabına dahil eder.

Nonce nedir ve neden gereklidir?

Nonce, "number used once" kısaltmasıdır. Kullanıcının isteğinin gerçekten sizin sitenizden geldiğini kanıtlayan bir güvenlik anahtarıdır.

Mobil uyumlu filtreleme nasıl yapılır?

CSS'de flex-wrap: wrap kullanarak butonların mobil cihazlarda alt alta dizilmesini sağlayabilirsiniz.

Daha fazla kategori seçimi ekleyebilir miyim?

Evet, JavaScript tarafında bir dizi (array) oluşturarak çoklu seçim mantığını kurgulayabilirsiniz.

İleri Seviye İpuçları: Filtreleme Sistemini Ölçeklendirme

Ajax tabanlı filtreleme sisteminiz temel düzeyde çalışmaya başladığında, kullanıcı deneyimini daha akıcı hale getirmek için bazı gelişmiş teknikler uygulayabilirsiniz. Özellikle büyük içerik havuzlarında, her tıklamada sunucuya istek göndermek yerine "debounce" (gecikmeli işlem) tekniğini kullanmak sunucu yükünü ciddi oranda azaltır.

Debounce Tekniği ile Sunucu Yükünü Azaltma

Kullanıcı kategorilere çok hızlı tıkladığında, her tıklama için ayrı bir Ajax isteği tetiklenir. Bunu engellemek için, kullanıcının seçimi yapıp duraksamasını bekleyen bir zamanlayıcı ekleyebiliriz. İşte JavaScript tarafında uygulayabileceğiniz basit bir debounce örneği:

let debounceTimer;
const filterCategories = (categoryId) => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        // Ajax isteğiniz buraya gelecek
        performAjaxRequest(categoryId);
    }, 300); // 300ms bekler
};

Performans Analizi ve Önbellekleme Stratejileri

Ajax filtreleme sistemlerinde en büyük darboğaz, her istekte WordPress'in tüm çekirdek dosyalarının yüklenmesi ve veritabanı sorgularının yeniden çalıştırılmasıdır. Bu süreci hızlandırmak için Transients API kullanarak sorgu sonuçlarını geçici olarak önbelleğe alabilirsiniz.

Transients API ile Sorgu Önbellekleme

Aşağıdaki PHP örneği, belirli bir kategoriye ait sonuçları 12 saat boyunca veritabanında saklayarak sunucu üzerindeki yükü minimize eder:

function get_filtered_posts_with_cache($category_id) {
    $transient_key = 'filtered_posts_cat_' . $category_id;
    $cached_results = get_transient($transient_key);

    if (false === $cached_results) {
        $query = new WP_Query(array('cat' => $category_id));
        ob_start();
        while ($query->have_posts()) {
            $query->the_post();
            get_template_part('template-parts/content', 'post');
        }
        $cached_results = ob_get_clean();
        set_transient($transient_key, $cached_results, 12 * HOUR_IN_SECONDS);
    }
    return $cached_results;
}

Filtreleme Sisteminde Test Süreçleri

Sisteminizi yayına almadan önce farklı senaryoları test etmeniz kritik öneme sahiptir. Aşağıdaki tablo, sistemin kararlılığını ölçmek için kullanabileceğiniz test senaryolarını özetler:

Bu geliştirmeler, sisteminizin sadece çalışmasını değil, aynı zamanda yüksek trafikli sitelerde bile performanslı bir şekilde hizmet vermesini sağlayacaktır.

Sonuç

WordPress ile özel bir Ajax canlı kategori filtreleme sistemi kurmak, sitenizin profesyonellik seviyesini bir üst noktaya taşır. Bu rehberde, veritabanı sorgularından istemci tarafındaki etkileşime kadar tüm süreci uçtan uca tamamladık. Bir sonraki adım olarak, bu sisteme "Daha Fazla Yükle" (Load More) butonu veya "Sonsuz Kaydırma" (Infinite Scroll) özelliklerini entegre etmeyi deneyebilirsiniz.