Wordpress İle Özel Bir Ajax Canlı Favori Ekleme Sistemi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Sistemi inşa etmeye başlamadan önce çalışma ortamınızın hazır olduğundan emin olmalısınız. WordPress'in güncel bir sürümünü (6.0 ve üzeri) kullanmanız, güvenlik ve performans açısından kritik öneme sahiptir. Ayrıca, bir alt tema (child theme) üzerinde çalışmanız, güncellemelerden sonra kodlarınızın kaybolmaması için şarttır.

• Aktif bir WordPress kurulumu.
• PHP 8.0 veya üzeri bir sunucu ortamı.
• Kod düzenleyici (VS Code önerilir).
• Temel düzeyde JavaScript ve jQuery bilgisi (WordPress, jQuery kütüphanesini varsayılan olarak sunar).

Adım 1: Kullanıcı Favorileri İçin Veritabanı Yapısını Belirleme

Favori verilerini saklamak için en verimli yöntem, WordPress'in kullanıcı meta (user meta) sistemini kullanmaktır. Bu yöntem, her kullanıcı için ayrı bir dizi (array) tutmanıza olanak tanır. Aşağıdaki kod bloğunu temanızın functions.php dosyasına ekleyerek favori işlemlerini yönetecek temel yapıyı başlatın.

// Favori ekleme ve silme işlemleri için yardımcı fonksiyon
function toggle_user_favorite($post_id) {
    $user_id = get_current_user_id();
    if (!$user_id) return false;

    $favorites = get_user_meta($user_id, 'user_favorites', true);
    if (!is_array($favorites)) $favorites = array();

    if (in_array($post_id, $favorites)) {
        $favorites = array_diff($favorites, array($post_id));
        $status = 'removed';
    } else {
        $favorites[] = $post_id;
        $status = 'added';
    }

    update_user_meta($user_id, 'user_favorites', $favorites);
    return $status;
}

Bu fonksiyon, kullanıcının mevcut favorilerini alır, eğer içerik zaten favorilerdeyse siler, değilse ekler. update_user_meta fonksiyonu, veritabanına güvenli bir şekilde kayıt yapmanızı sağlar.

Adım 2: WordPress Ajax Endpoint'ini Tanımlama

WordPress'te Ajax isteklerini karşılamak için wp_ajax_ kancalarını (hooks) kullanmalıyız. Bu, sunucunun gelen isteği tanımasını ve doğru PHP fonksiyonunu tetiklemesini sağlar. Aşağıdaki kodu functions.php dosyanıza ekleyin.

add_action('wp_ajax_toggle_favorite', 'handle_ajax_favorite');

function handle_ajax_favorite() {
    check_ajax_referer('fav_nonce', 'security'); // Güvenlik doğrulaması

    $post_id = intval($_POST['post_id']);
    $status = toggle_user_favorite($post_id);

    wp_send_json_success(array('status' => $status));
}

check_ajax_referer kullanımı, CSRF (Cross-Site Request Forgery) saldırılarını önlemek için hayati önem taşır. wp_send_json_success ise tarayıcıya temiz bir JSON yanıtı dönmemizi sağlar.

Adım 3: JavaScript ile Ajax İsteğini Gönderme

Şimdi istemci tarafında (frontend) kullanıcının butona tıkladığında tetiklenecek JavaScript kodunu hazırlayalım. Bu kod, admin-ajax.php dosyasına bir istek gönderir. Bir assets/js/favorite.js dosyası oluşturun ve şu kodları ekleyin:

jQuery(document).ready(function($) {
    $('.fav-button').on('click', function(e) {
        e.preventDefault();
        var button = $(this);
        var post_id = button.data('post-id');

        $.ajax({
            url: ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'toggle_favorite',
                post_id: post_id,
                security: ajax_object.nonce
            },
            success: function(response) {
                if(response.success) {
                    button.toggleClass('active');
                    alert('İşlem başarılı: ' + response.data.status);
                }
            }
        });
    });
});

Bu JavaScript kodu, .fav-button sınıfına sahip tüm butonları dinler. ajax_object değişkeni, WordPress'ten güvenli bir şekilde veri aktarmak için kullanacağımız bir köprüdür.

Adım 4: Scriptleri Kuyruğa Alma (Enqueue)

Oluşturduğumuz JavaScript dosyasını ve gerekli verileri WordPress'e tanıtmalıyız. functions.php dosyanızda şu adımları izleyin:

add_action('wp_enqueue_scripts', 'enqueue_favorite_scripts');

function enqueue_favorite_scripts() {
    wp_enqueue_script('favorite-js', get_template_directory_uri() . '/assets/js/favorite.js', array('jquery'), '1.0', true);
    
    wp_localize_script('favorite-js', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('fav_nonce')
    ));
}

wp_localize_script fonksiyonu, PHP tarafındaki verileri JavaScript tarafına güvenli bir şekilde aktarmak için standart yöntemdir. Bu sayede ajax_url ve nonce değerlerine JS içinden erişebiliriz.

Adım 5: HTML Butonunu Sayfaya Ekleme

Kullanıcının etkileşime gireceği butonu, içerik döngünüzün (loop) içine yerleştirin. single.php veya archive.php dosyalarınızda şu yapıyı kullanabilirsiniz:

Adım 6: Favori Durumunu Kontrol Etme ve Dinamik Buton Güncelleme

Kullanıcı sayfayı yenilediğinde, daha önce favorilere eklediği bir içeriğin butonunun "favori" olarak görünmesi kullanıcı deneyimi açısından kritiktir. Bunun için PHP tarafında, mevcut kullanıcının o içeriği favorilerine ekleyip eklemediğini kontrol eden bir yardımcı fonksiyon yazmalıyız.

Aşağıdaki fonksiyonu functions.php dosyanıza ekleyerek, butonun başlangıç durumunu belirleyebilirsiniz:

function is_user_favorited($post_id) {
    if (!is_user_logged_in()) return false;
    
    $user_id = get_current_user_id();
    $favorites = get_user_meta($user_id, 'user_favorites', true);
    
    return is_array($favorites) && in_array($post_id, $favorites);
}


Bu fonksiyonu kullanarak buton yapınızı şu şekilde güncelleyebilirsiniz:

$post_id = get_the_ID();
$is_fav = is_user_favorited($post_id);
$class = $is_fav ? 'active' : '';
$text = $is_fav ? 'Favorilerden Çıkar' : 'Favorilere Ekle';

echo '' . $text . '';







Adım 7: Hata Ayıklama ve Performans İyileştirmeleri

Ajax sistemlerinde en sık karşılaşılan sorunlar, yanlış nonce doğrulamaları veya sunucu tarafındaki 400/500 hatalarıdır. Geliştirme aşamasında bu hataları izlemek için tarayıcınızın "Network" (Ağ) sekmesini kullanmalısınız. Eğer Ajax isteğiniz başarısız oluyorsa, admin-ajax.php dosyasından dönen yanıtı kontrol ederek sorunun kaynağını (PHP hatası mı yoksa veritabanı sorgusu mu) kolayca görebilirsiniz.

Performansı artırmak için şu iki noktaya dikkat etmeniz önemlidir:


    
Veritabanı İndeksleme: Eğer kullanıcı sayısı çok yüksekse, user_meta tablosunda arama yapmak yavaşlayabilir. Bu durumda özel bir veritabanı tablosu kullanmayı değerlendirebilirsiniz.
    
Transient Kullanımı: Kullanıcının favori listesini her sayfa yüklemesinde veritabanından çekmek yerine, wp_cache veya transients API'sini kullanarak bu veriyi geçici olarak önbelleğe alabilirsiniz.


Aşağıdaki kod örneği, Ajax isteği sırasında oluşabilecek temel hataları yönetmek için JavaScript tarafında kullanabileceğiniz bir hata yakalama yapısıdır:

$.ajax({
    url: ajax_object.ajax_url,
    type: 'POST',
    data: {
        action: 'toggle_favorite',
        post_id: postId,
        nonce: ajax_object.nonce
    },
    success: function(response) {
        if(response.success) {
            // Buton durumunu güncelle
            button.toggleClass('active');
        } else {
            alert('İşlem başarısız: ' + response.data);
        }
    },
    error: function(xhr, status, error) {
        console.error('Ajax Hatası:', error);
    }
});


Bu yapı, kullanıcıya anlık geri bildirim vererek sistemin profesyonel bir görünüm kazanmasını sağlar. Ayrıca, error fonksiyonu sayesinde sunucu tarafında bir çökme yaşandığında geliştirici konsolunda detaylı bilgi alabilirsiniz.