Wordpress İle Özel Bir Kullanıcı Dinamik İçerik Filtreleme Sistemi Nasıl Yapılır?

Wordpress İle Özel Bir Kullanıcı Dinamik İçerik Filtreleme Sistemi Nasıl Yapılır?
Wordpress İle Özel Bir Kullanıcı Dinamik İçerik 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ümlerde modern PHP standartları (PHP 8.2+) desteklenmektedir. İhtiyacınız olan temel araçlar şunlardır:

  • Aktif bir WordPress kurulumu (Yerel sunucu veya canlı ortam).
  • Bir "Child Theme" (Alt tema) veya özel bir fonksiyon eklentisi.
  • Temel düzeyde PHP, JavaScript (ES6+) ve jQuery bilgisi.
  • Tarayıcı geliştirici araçları (F12) ile hata ayıklama yetisi.

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

Kullanıcıların seçim yapacağı HTML formunu veya buton grubunu oluşturarak işe başlıyoruz. Burada önemli olan, form elemanlarına benzersiz id veya data öznitelikleri atamaktır. Bu öznitelikler, JavaScript tarafında veriyi yakalamamızı sağlayacaktır.

Tüm Kategoriler Teknoloji Yazılım Filtrele

Bu kod bloğu, kullanıcıya seçim yapabileceği bir arayüz sunar. icerik-sonuclari div'i, AJAX'tan dönen verilerin basılacağı konteyner görevi görür.

Adım 2: AJAX İsteğini Hazırlama

JavaScript kullanarak kullanıcının seçtiği değeri WordPress sunucusuna göndermemiz gerekir. WordPress'te AJAX işlemleri için admin-ajax.php dosyası kullanılır. Aşağıdaki kod, kullanıcının seçimini yakalar ve sunucuya iletir.

jQuery(document).ready(function($) {
    $('#filtrele-btn').on('click', function() {
        var secilenKategori = $('#kategori-filtresi').val();
        
        $.ajax({
            url: ajaxurl, // WordPress'in tanımladığı global değişken
            type: 'POST',
            data: {
                action: 'icerik_filtrele_ajax',
                kategori: secilenKategori
            },
            success: function(response) {
                $('#icerik-sonuclari').html(response);
            }
        });
    });
});

Bu JavaScript kodu, butona tıklandığında icerik_filtrele_ajax adlı bir WordPress aksiyonunu tetikler ve seçilen değeri sunucuya gönderir.

Adım 3: Sunucu Tarafında Sorguyu İşleme

Şimdi functions.php dosyanızda, gelen veriyi karşılayacak ve WP_Query ile filtreleme yapacak fonksiyonu yazmalıyız. Güvenlik için sanitize_text_field fonksiyonunu kullanarak SQL injection riskini ortadan kaldırıyoruz.

add_action('wp_ajax_icerik_filtrele_ajax', 'icerik_filtrele_ajax_handler');
add_action('wp_ajax_nopriv_icerik_filtrele_ajax', 'icerik_filtrele_ajax_handler');

function icerik_filtrele_ajax_handler() {
    $kategori = sanitize_text_field($_POST['kategori']);
    
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 10,
        'category_name' => $kategori
    );
    
    $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(); // AJAX işlemlerinde zorunludur }

Bu fonksiyon, gelen kategoriyi doğrular ve veritabanından ilgili gönderileri çeker. wp_die() fonksiyonu, işlemin temiz bir şekilde sonlanmasını sağlar.

Adım 4: Güvenlik ve Performans Karşılaştırması

Dinamik filtreleme sistemlerinde farklı yöntemler tercih edilebilir. Aşağıdaki tablo, bu yöntemlerin kısa bir karşılaştırmasını sunar.

Yöntem Avantaj Dezavantaj
AJAX (Önerilen) Sayfa yenilenmez, UX yüksek Sunucu yükü artabilir
URL Parametreleri (GET) SEO dostu, paylaşılabilir Sayfa yenilenmesi gerekir
Client-Side (JSON) Çok hızlı Büyük verilerde tarayıcıyı yorar

Kritik Güvenlik Uyarısı: AJAX isteklerinde her zaman nonce (number used once) kullanarak CSRF (Cross-Site Request Forgery) saldırılarını engelleyin. Kullanıcı girdilerini asla doğrudan veritabanı sorgusuna dahil etmeyin, her zaman filtreleme (sanitization) fonksiyonlarını kullanın.

Adım 5: Hata Ayıklama ve Test Etme

Sistemi test ederken tarayıcınızın "Ağ" (Network) sekmesini açık tutun. Eğer istek başarısız olursa, admin-ajax.php dosyasından dönen hata kodunu inceleyin. Sık karşılaşılan bir hata, ajaxurl değişkeninin tanımlanmamış olmasıdır. Bunu çözmek için temanızın header.php dosyasına şu kodu ekleyin:


    var ajaxurl = '';

Bu kod, JavaScript dosyanızın WordPress AJAX uç noktasına erişebilmesini garanti altına alır.

Sıkça Sorulan Sorular

AJAX ile filtreleme SEO'yu etkiler mi?

AJAX ile yüklenen içerikler, Google botları tarafından her zaman tam olarak indekslenmeyebilir. Eğer SEO kritik ise, URL parametrelerini (GET) kullanan bir yapı tercih etmeniz daha sağlıklı olacaktır.

Çok fazla gönderi varsa sistem yavaşlar mı?

Evet, veritabanı sorguları optimize edilmezse yavaşlama olabilir. WP_Query içerisinde no_found_rows => true parametresini kullanarak sayfalama (pagination) yapmıyorsanız sorguyu hızlandırabilirsiniz.

Neden wp_die() kullanmalıyım?

WordPress AJAX işlemleri, işlem sonunda 0 veya 1 gibi değerler döndürebilir. wp_die(), gereksiz çıktıları durdurarak sadece sizin istediğiniz verinin dönmesini sağlar.

Güvenlik için nonce nasıl eklenir?

wp_create_nonce() fonksiyonu ile bir anahtar oluşturup AJAX isteğiyle sunucuya göndermeli ve check_ajax_referer() ile doğrulamalısınız.

Filtreleme sistemini eklenti olarak mı yapmalıyım?

Eğer fonksiyonunuz tema bağımsız çalışsın istiyorsanız eklenti olarak yazmak daha profesyonel bir yaklaşımdır. Ancak basit bir proje için tema dosyaları yeterlidir.

İleri Seviye Filtreleme: URL Parametreleri ile State Yönetimi

AJAX tabanlı filtreleme sistemlerinde en büyük sorun, kullanıcı sayfayı yenilediğinde veya bağlantıyı paylaştığında filtrelenmiş durumun kaybolmasıdır. Bunu çözmek için History API kullanarak URL'yi dinamik olarak güncelleyebilir ve sayfa yüklendiğinde bu parametreleri okuyarak filtreyi otomatik tetikleyebilirsiniz.

URL Parametrelerini Güncelleme

JavaScript tarafında AJAX isteği başarılı olduktan sonra window.history.pushState metodunu kullanarak URL'yi güncelleyin:

// AJAX success callback içinde
function updateURL(category) {
    var newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?cat=' + category;
    window.history.pushState({path: newURL}, '', newURL);
}

Sayfa Yüklenirken Filtreyi Tetikleme

Sayfa ilk kez yüklendiğinde, URL'deki cat parametresini okuyarak AJAX fonksiyonunu otomatik çağıran bir başlatıcı ekleyin:

document.addEventListener("DOMContentLoaded", function() {
    const urlParams = new URLSearchParams(window.location.search);
    const cat = urlParams.get('cat');
    if (cat) {
        // Filtreleme fonksiyonunu tetikleyin
        triggerFilter(cat); 
    }
});

Performans Optimizasyonu: Transient API Kullanımı

Dinamik filtreleme sistemlerinde her sorgu veritabanına yük bindirir. Eğer filtrelediğiniz içerikler çok sık değişmiyorsa, WordPress Transient API kullanarak sorgu sonuçlarını önbelleğe alabilirsiniz. Bu, özellikle yüksek trafikli sitelerde sunucu yanıt süresini milisaniyelere indirir.

Aşağıdaki örnekte, sorgu sonucunun 12 saat boyunca önbellekte tutulması sağlanmıştır:

function get_filtered_posts_cached($category_id) {
    $transient_key = 'filtered_posts_' . $category_id;
    $cached_data = get_transient($transient_key);

    if (false === $cached_data) {
        $query = new WP_Query(['cat' => $category_id]);
        ob_start();
        if ($query->have_posts()) {
            while ($query->have_posts()) {
                $query->the_post();
                get_template_part('template-parts/content', 'post');
            }
        }
        $cached_data = ob_get_clean();
        set_transient($transient_key, $cached_data, 12 * HOUR_IN_SECONDS);
    }
    return $cached_data;
}
Not: İçerik güncellendiğinde delete_transient('filtered_posts_' . $category_id); fonksiyonunu kullanarak önbelleği temizlemeyi unutmayın. Aksi takdirde kullanıcılar eski içerikleri görmeye devam edecektir.

Ölçeklenebilirlik İçin İpuçları

  • Lazy Load Entegrasyonu: Filtrelenmiş sonuçlar çok fazlaysa, tüm içeriği tek seferde yüklemek yerine IntersectionObserver API ile "sonsuz kaydırma" (infinite scroll) yapısını dahil edin.
  • Veritabanı İndeksleri: Eğer özel alanlar (custom fields) üzerinden filtreleme yapıyorsanız, meta_query kullanırken ilgili meta anahtarlarının veritabanında indeksli olduğundan emin olun.
  • CDN Kullanımı: AJAX yanıtlarının statik HTML parçaları içermesi durumunda, bu yanıtların CDN üzerinden önbelleklenip önbelleklenemeyeceğini kontrol edin.

Sonuç

WordPress ile dinamik içerik filtreleme sistemi kurmak, veritabanı ile kullanıcı etkileşimi arasında köprü kurmanızı sağlar. Bu rehberde öğrendiğiniz AJAX mantığı ve WP_Query kullanımı, gelişmiş WordPress projelerinizin temelini oluşturacaktır. Bir sonraki adım olarak, bu filtreleme sistemine "yükle" (load more) butonları ekleyerek deneyimi daha da akıcı hale getirebilirsiniz.

Sorumluluk Reddi: Yukarıda paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce kodlarınızı mutlaka güvenlik testlerinden geçirin ve WordPress'in güncel güvenlik standartlarına uyduğundan emin olun.

Bu yazıya tepkinizi paylaşın:
Emre Cansever

Teknik rehberler ve kendin yap (DIY) projeleri üzerine yoğunlaşıyorum. Detaylı ve güvenilir içerikler hazırlayarak okuyucuların teknik sorunlarını çözmelerine yardımcı oluyorum.

Yorumlar (0)

Yorum Yaz