Wordpress İle Özel Bir Ajax Arama Filtresi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeye başlamadan önce, üzerinde çalışabileceğiniz bir WordPress geliştirme ortamınızın olması gerekmektedir. Canlı sitenizde doğrudan değişiklik yapmadan önce yerel bir sunucu (LocalWP veya XAMPP gibi) kullanmanız önerilir. Ayrıca, bir alt tema (child theme) oluşturmuş olmanız, yaptığınız değişikliklerin tema güncellemeleriyle silinmemesi için şarttır.

• WordPress 6.0 ve üzeri sürüm.
• PHP 8.0 veya daha yeni bir sürüm.
• Temel düzeyde HTML, CSS, PHP ve modern JavaScript bilgisi.
• Kod düzenleyici (VS Code gibi).

Adım 1: Arama Formunu Hazırlama

İlk adım, kullanıcıdan girdi alacak olan HTML formunu oluşturmaktır. Bu formu temanızın uygun bir dosyasına (örneğin searchform.php veya doğrudan header içine) yerleştirebilirsiniz.

Adım 2: PHP ile AJAX İsteklerini İşleme

Ön uçtan gönderilen verileri karşılamak ve WordPress veritabanından doğru sonuçları çekmek için functions.php dosyanızda bir "hook" tanımlamanız gerekir. WordPress, AJAX isteklerini wp_ajax_ ve wp_ajax_nopriv_ ön ekleri ile yönetir.

Aşağıdaki kod bloğu, gelen arama terimini alır, bir WP_Query nesnesi oluşturur ve sonuçları JSON formatında geri döndürür:


function ajax_arama_sonuclari() {
    $arama_terimi = sanitize_text_field($_POST['keyword']);

    $args = array(
        's' => $arama_terimi,
        'post_status' => 'publish',
        'posts_per_page' => 5
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
            echo '
';
            echo '' . get_the_title() . '';
            echo '
';
        endwhile;
        wp_reset_postdata();
    else :
        echo '
Sonuç bulunamadı.
';
    endif;

    die();
}
add_action('wp_ajax_ajax_arama_sonuclari', 'ajax_arama_sonuclari');
add_action('wp_ajax_nopriv_ajax_arama_sonuclari', 'ajax_arama_sonuclari');







Adım 3: JavaScript ile AJAX İsteğini Tetikleme

Formdan alınan veriyi sunucuya göndermek ve gelen yanıtı sayfayı yenilemeden ekrana basmak için JavaScript (Fetch API veya jQuery) kullanmalıyız. WordPress'te AJAX URL'sini doğru tanımlamak için wp_localize_script fonksiyonunu kullanmak en güvenli yöntemdir.

Öncelikle functions.php içinde script dosyanızı kaydedin ve AJAX URL'sini tanımlayın:


wp_enqueue_script('ajax-arama-js', get_stylesheet_directory_uri() . '/js/arama.js', array('jquery'), '1.0', true);
wp_localize_script('ajax-arama-js', 'ajax_obj', array('ajax_url' => admin_url('admin-ajax.php')));


Ardından js/arama.js dosyanızda şu mantığı kurun:


document.getElementById('arama-inputu').addEventListener('keyup', function() {
    let keyword = this.value;
    let formData = new FormData();
    formData.append('action', 'ajax_arama_sonuclari');
    formData.append('keyword', keyword);

    fetch(ajax_obj.ajax_url, {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById('sonuc-alani').innerHTML = data;
    });
});







Performans İpuçları ve Optimizasyon

AJAX aramaları, her tuş vuruşunda veritabanına sorgu gönderdiği için yoğun trafikli sitelerde sunucuyu yorabilir. Bu durumu engellemek için şu stratejileri uygulayın:


    
Debounce Uygulayın: Kullanıcı yazmayı bıraktıktan 300-500ms sonra sorgu gönderilmesini sağlayın. Bu, gereksiz veritabanı yükünü %80 oranında azaltır.
    
Minimum Karakter Sınırı: Kullanıcı en az 3 karakter girmeden AJAX sorgusunu tetiklemeyin.
    
Transient API Kullanımı: Çok sık aranan terimler için sonuçları WordPress Transient API ile geçici olarak önbelleğe alın.


Arama sonuçlarını yönetirken sanitize_text_field kullanarak SQL injection risklerini bertaraf ettiğinizden emin olun. Ayrıca, arama sonuçlarını döndürürken gereksiz veritabanı sütunlarını çekmemek için WP_Query parametrelerini optimize edin.