WordPress Eklenti Kodlamada AJAX Kullanımı ve Örnekler

WordPress, dinamik içerik oluşturmak ve kullanıcı deneyimini artırmak isteyen geliştiriciler için AJAX desteğini oldukça esnek bir şekilde sunar. AJAX, sayfa yeniden yüklenmeden arka planda veri gönderip almayı sağlar. Bu özellikle eklenti geliştirirken, anket, form işleme, canlı arama, filtreleme, kullanıcı etkileşimi gibi birçok alanda büyük avantaj sunar.

Bu makalede, WordPress’te AJAX’ın nasıl çalıştığını, nasıl eklentilere entegre edildiğini ve yaygın kullanım örneklerini detaylı şekilde inceleyeceğiz.

AJAX Nedir?

AJAX (Asynchronous JavaScript and XML), sayfa yenilemeden sunucuyla veri alışverişi yapılmasına olanak tanır. WordPress, AJAX işlemlerini admin-ajax.php dosyası üzerinden gerçekleştirir. Bu yapı, güvenli ve kontrollü bir veri iletişimi sağlar.

WordPress’te AJAX Mimarisi

WordPress’te AJAX istekleri, wp-admin/admin-ajax.php dosyasına gönderilir. Bu isteklerin doğru çalışabilmesi için aşağıdaki unsurların doğru yapılandırılması gerekir:

1. JavaScript tarafında AJAX isteği
2. PHP tarafında istekleri karşılayacak action fonksiyonu
3. AJAX güvenliği için nonce kontrolü (isteğe bağlı ama önerilir)

Temel AJAX Akışı

1. JavaScript’te $.ajax veya fetch ile istek gönderilir.
2. PHP tarafında belirli bir action parametresi dinlenir.
3. Gerekli işlem yapılır ve JSON ya da HTML çıktı döner.
4. JavaScript gelen yanıtı işler.

AJAX Fonksiyonlarını Kayıt Etme

WordPress’te AJAX fonksiyonları wp_ajax_ ve wp_ajax_nopriv_ ön ekleri ile kaydedilir.

add_action('wp_ajax_my_action', 'my_action_callback'); // Giriş yapmış kullanıcılar
add_action('wp_ajax_nopriv_my_action', 'my_action_callback'); // Giriş yapmamış kullanıcılar

function my_action_callback() {
    // İşlem
    echo 'İşlem başarılı!';
    wp_die(); // AJAX işlemini sonlandır
}

JavaScript Tarafı (jQuery ile Örnek)

jQuery(document).ready(function($) {
    $('#ajax-button').on('click', function() {
        $.ajax({
            url: my_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'my_action',
                param1: 'değer'
            },
            success: function(response) {
                $('#response').html(response);
            }
        });
    });
});

JavaScript tarafında WordPress’in ajax_url bilgisini sağlayabilmesi için wp_localize_script() kullanılır:

wp_enqueue_script('my-script', plugin_dir_url(__FILE__) . 'my-script.js', ['jquery'], null, true);
wp_localize_script('my-script', 'my_ajax_object', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('my_nonce')
]);

Güvenlik: Nonce Kontrolü

if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'my_nonce')) {
    wp_send_json_error('Güvenlik hatası');
}

Kullanım Örnekleri

1. Canlı Arama Örneği

PHP:

add_action('wp_ajax_nopriv_live_search', 'live_search_callback');
add_action('wp_ajax_live_search', 'live_search_callback');

function live_search_callback() {
    $query = sanitize_text_field($_POST['query']);
    $results = new WP_Query([
        's' => $query,
        'post_type' => 'post',
        'posts_per_page' => 5
    ]);

    if ($results->have_posts()) {
        while ($results->have_posts()) {
            $results->the_post();
            echo '<p><a href="' . get_permalink() . '">' . get_the_title() . '</a></p>';
        }
    } else {
        echo '<p>Sonuç bulunamadı.</p>';
    }

    wp_die();
}

JavaScript:

$('#search-input').on('keyup', function() {
    $.post(my_ajax_object.ajax_url, {
        action: 'live_search',
        query: $(this).val()
    }, function(response) {
        $('#search-results').html(response);
    });
});

2. Kullanıcı Oylama Sistemi

PHP:

add_action('wp_ajax_vote_post', 'vote_post_callback');
add_action('wp_ajax_nopriv_vote_post', 'vote_post_callback');

function vote_post_callback() {
    $post_id = intval($_POST['post_id']);
    $current = get_post_meta($post_id, 'votes', true);
    $current = $current ? intval($current) : 0;
    $current++;
    update_post_meta($post_id, 'votes', $current);

    echo $current;
    wp_die();
}

JavaScript:

$('.vote-button').click(function() {
    let postId = $(this).data('post-id');
    $.post(my_ajax_object.ajax_url, {
        action: 'vote_post',
        post_id: postId
    }, function(response) {
        $('#vote-count-' + postId).text(response);
    });
});

İpuçları ve Dikkat Edilecekler

• Her AJAX fonksiyonu sonunda wp_die() kullanılmalıdır.
• Nonce kullanımı ile isteklerin güvenliği sağlanmalıdır.
• Giriş yapmamış kullanıcılar için wp_ajax_nopriv_ unutulmamalıdır.
• wp_send_json_success() ve wp_send_json_error() fonksiyonları daha okunabilir JSON çıktılar sağlar.
• REST API yerine AJAX tercih edilirse, daha hızlı ve kontrollü müdahaleler mümkündür.

Değerlendirme

WordPress eklenti geliştiricileri için AJAX kullanımı, modern kullanıcı deneyimi sunan ve dinamik içerik sağlayan bir yapı taşıdır. Form işlemlerinden canlı aramaya, filtreleme sistemlerinden kullanıcı puanlamalarına kadar pek çok işlevi sayfa yenilemeden gerçekleştirmek mümkündür. Geliştiricilerin AJAX yapısını doğru kullanmaları, hem performans hem de güvenlik açısından önemlidir. Bu makalede sunulan yapı ve örnekler, kendi projelerinize kolayca entegre edebileceğiniz sağlam bir temel sunar.