Wordpress İle Özel Bir Ajax Yorum Sistemi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu uygulamayı gerçekleştirmek için yerel bir geliştirme ortamında (LocalWP veya XAMPP gibi) çalışan güncel bir WordPress kurulumuna ihtiyacınız vardır. Çalışmalarınızı doğrudan canlı sitenizde yapmamanız, her zaman bir "staging" (test) ortamında denemeniz önerilir. Ayrıca, temanızın functions.php dosyasına erişiminiz olmalı ve bir JavaScript dosyası oluşturabilmelisiniz.

• WordPress 6.0 ve üzeri sürüm.
• PHP 8.1+ desteği.
• Temel düzeyde JavaScript (ES6+) bilgisi.
• Güvenlik için WordPress Nonce (Number Used Once) kavramına aşinalık.

Adım 1: JavaScript ile Yorum Verilerini Hazırlama

İlk adımda, yorum formunun varsayılan gönderimini engelleyip verileri Ajax aracılığıyla sunucuya gönderecek olan JavaScript kodunu hazırlamalıyız. Bu kod, formun "submit" olayını dinler ve FormData nesnesini kullanarak verileri toplar.

document.addEventListener('DOMContentLoaded', function() {
    const commentForm = document.getElementById('commentform');
    if (!commentForm) return;

    commentForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(commentForm);
        formData.append('action', 'submit_ajax_comment');

        fetch(ajax_object.ajax_url, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Yorumunuz başarıyla gönderildi!');
                commentForm.reset();
            } else {
                alert('Hata: ' + data.data);
            }
        });
    });
});

Bu kod bloğu, formun varsayılan sayfa yenileme davranışını e.preventDefault() ile durdurur. Ardından, WordPress'in Ajax işleyicisine iletmek üzere submit_ajax_comment adında bir eylem (action) tanımlar.

Adım 2: JavaScript Dosyasını WordPress'e Tanıtma

Yazdığımız JavaScript dosyasının WordPress tarafından tanınması ve ajax_url değişkeninin içeriye aktarılması gerekir. Bunu functions.php dosyanızda wp_enqueue_scripts kancası ile yaparız.

function enqueue_ajax_comment_script() {
    wp_enqueue_script('ajax-comment-js', get_template_directory_uri() . '/js/ajax-comment.js', ['jquery'], null, true);
    wp_localize_script('ajax-comment-js', 'ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_comment_script');

Burada wp_localize_script fonksiyonu, PHP tarafındaki admin-ajax.php yolunu JavaScript dosyasına bir değişken olarak aktarır. Bu, Ajax isteklerinin doğru adrese gitmesini sağlar.

Adım 3: PHP Tarafında Ajax İsteklerini İşleme

Şimdi, JavaScript'ten gelen isteği karşılayacak olan PHP fonksiyonunu yazmalıyız. Bu fonksiyon, yorumun doğruluğunu kontrol eder ve veritabanına kaydeder. Güvenlik için wp_insert_comment fonksiyonunu kullanacağız.

add_action('wp_ajax_submit_ajax_comment', 'handle_ajax_comment');
add_action('wp_ajax_nopriv_submit_ajax_comment', 'handle_ajax_comment');

function handle_ajax_comment() {
    $comment_data = [
        'comment_post_ID' => intval($_POST['comment_post_ID']),
        'comment_author'  => sanitize_text_field($_POST['author']),
        'comment_content' => sanitize_textarea_field($_POST['comment']),
        'comment_author_email' => sanitize_email($_POST['email']),
        'comment_type'    => '',
        'comment_status'  => 'approve'
    ];

    $comment_id = wp_insert_comment($comment_data);

    if ($comment_id) {
        wp_send_json_success('Yorumunuz eklendi.');
    } else {
        wp_send_json_error('Yorum kaydedilemedi.');
    }
}

Bu kod, wp_ajax_ ve wp_ajax_nopriv_ kancaları ile hem giriş yapmış hem de yapmamış kullanıcıların yorum göndermesine olanak tanır. sanitize_ fonksiyonları, gelen verileri temizleyerek XSS (Cross-Site Scripting) saldırılarını engeller.

Adım 4: Yorum Sistemlerinin Karşılaştırması

Geleneksel yöntem ile Ajax tabanlı yöntem arasındaki farkları anlamak, projenizin ihtiyaçlarını belirlemenize yardımcı olur.

Adım 5: Güvenlik ve Hata Ayıklama

Kritik Güvenlik Uyarısı: Ajax işlemlerinde mutlaka Nonce (güvenlik anahtarı) kullanın. Yukarıdaki örnekte basitlik adına yer verilmemiştir, ancak üretim ortamında wp_create_nonce ve check_ajax_referer fonksiyonlarını kullanarak CSRF (Cross-Site Request Forgery) saldırılarına karşı koruma sağlamalısınız.

Hata ayıklamak için tarayıcınızın "Geliştirici Araçları" (F12) içerisindeki "Network" sekmesini kullanın. admin-ajax.php isteğine tıklayarak "Response" kısmında dönen hata mesajlarını inceleyebilirsiniz. Eğer 403 hatası alıyorsanız, Nonce kontrolünüzü gözden geçirmeniz gerekir.

Sıkça Sorulan Sorular

Ajax ile yorum gönderirken neden sayfa yenileniyor?

Büyük ihtimalle JavaScript dosyanızda e.preventDefault() komutunu kullanmadınız veya JS dosyanız doğru yüklenmedi. Konsolu kontrol ederek bir hata olup olmadığına bakın.

Yorumlar veritabanına neden düşmüyor?

wp_insert_comment fonksiyonuna gönderdiğiniz verilerin doğruluğunu kontrol edin. Özellikle comment_post_ID değerinin boş olmadığından emin olun.

Güvenlik için başka ne yapabilirim?

Yorum alanına bir "Honey Pot" (gizli alan) ekleyerek botların yorum yapmasını engelleyebilirsiniz. Ayrıca comment_author_email alanında mutlaka e-posta doğrulaması yapın.

Bu yöntem tüm temalarla çalışır mı?

Evet, WordPress'in standart yorum formunu kullanan tüm temalarla uyumludur. Ancak özel bir yorum yapısı (görsel düzenleyici vb.) olan temalarda JavaScript seçicilerini güncellemeniz gerekebilir.

Mobil cihazlarda Ajax yorum sistemi sorun yaratır mı?

Hayır, aksine mobil cihazlarda sayfa yenileme olmadığı için kullanıcı deneyimi çok daha akıcı olacaktır.

İleri Seviye Optimizasyon: Yorumların DOM Üzerinde Anlık Güncellenmesi

Ajax ile yorum gönderildikten sonra kullanıcının sayfayı yenilemesine gerek kalmadan, yeni yorumun doğrudan yorum listesine eklenmesi (append) kullanıcı deneyimini (UX) zirveye taşır. Bu işlem, sunucudan dönen başarılı yanıtın ardından JavaScript ile DOM manipülasyonu yapılarak gerçekleştirilir.

Aşağıdaki örnekte, sunucudan gelen yorum verisini mevcut listenin en üstüne veya en altına ekleyen fonksiyonu görebilirsiniz:

// Ajax başarı fonksiyonu içerisinde
success: function(response) {
    if(response.success) {
        var newComment = '
' + response.data.comment_content + '
';
        // Yorum listesinin ID'sini kullanarak yeni yorumu ekle
        $('.comment-list').prepend(newComment);
        // Formu temizle
        $('#commentform')[0].reset();
    } else {
        alert('Yorum gönderilirken bir hata oluştu: ' + response.data);
    }
}

Performans ve Önbellekleme Stratejileri

Ajax tabanlı yorum sistemlerinde en büyük risk, veritabanı sorgularının yoğunlaştığı anlarda sunucu yükünün artmasıdır. Bu durumu yönetmek için aşağıdaki stratejileri uygulayabilirsiniz:

• Yorum Yükleme (Lazy Loading): Tüm yorumları tek seferde yüklemek yerine, "Daha Fazla Yükle" butonu ile Ajax kullanarak sayfalama yapın.
• Transients API Kullanımı: Sık görüntülenen yorumları WordPress Transients API ile geçici olarak önbelleğe alarak veritabanı yükünü azaltın.
• Minifikasyon: Ajax işlemlerini yürüten JavaScript dosyalarınızı mutlaka küçültün (minify) ve bir CDN üzerinden sunun.

Veritabanı Sorgu Optimizasyonu

Ajax istekleri sırasında wp_insert_comment fonksiyonu çalışırken, sistemin gereksiz eklenti tetikleyicilerini (hook) devre dışı bırakmak performansı artırabilir. Sadece yorum ekleme sürecine odaklanan bir sorgu yapısı, sistemin yanıt süresini milisaniyeler seviyesine çeker.

// Sadece gerekli işlemleri tetiklemek için örnek yapı
add_action('wp_ajax_submit_comment', 'my_custom_ajax_comment_handler');

function my_custom_ajax_comment_handler() {
    check_ajax_referer('comment_nonce', 'security');
    
    // Yorum verilerini al ve sanitize et
    $comment_data = array(
        'comment_post_ID' => intval($_POST['post_id']),
        'comment_content' => sanitize_textarea_field($_POST['comment']),
        'comment_author'  => sanitize_text_field($_POST['author']),
        'comment_author_email' => sanitize_email($_POST['email']),
    );

    $comment_id = wp_insert_comment($comment_data);
    
    if ($comment_id) {
        wp_send_json_success(array('comment_content' => $comment_data['comment_content']));
    } else {
        wp_send_json_error('Yorum kaydedilemedi.');
    }
}

Test Süreçleri ve Hata Ayıklama

Sisteminizi canlıya almadan önce farklı tarayıcılarda ve ağ koşullarında test etmeniz kritiktir. Chrome Geliştirici Araçları (F12) içerisindeki "Network" sekmesi, Ajax isteklerinizin durum kodlarını (200 OK, 500 Internal Server Error vb.) izlemek için en iyi dostunuzdur.

Sonuç

WordPress ile özel bir Ajax yorum sistemi kurmak, sitenizin modernleşmesi ve kullanıcı etkileşiminin artması adına harika bir adımdır. Bu rehberde, PHP ve JavaScript kullanarak nasıl güvenli bir veri akışı sağlayacağınızı öğrendiniz. Bir sonraki adım olarak, yorum gönderildikten sonra sayfayı yenilemeden yeni yorumu DOM'a ekleyen (append) bir JavaScript fonksiyonu yazarak kullanıcıya anlık geri bildirim verebilirsiniz.

Yasal Uyarı: Bu makalede paylaşılan kodlar eğitim amaçlıdır. Uygulama öncesi veritabanı yedeği almanız ve güvenlik testlerini (Nonce kullanımı gibi) tamamlamanız önerilir. Kodların üretim ortamındaki sorumluluğu geliştiriciye aittir.