Gereksinimler ve Ön Hazırlık
Başarılı bir uygulama için WordPress'in güncel sürümünü (6.x+) kullanıyor olmalısınız. Ayrıca, geliştirme ortamınızda hata ayıklama (debug) modunun açık olması, süreçteki olası aksaklıkları hızlıca görmenizi sağlar.
- WordPress Kurulumu: Yerel veya canlı bir sunucu ortamı.
- PHP Bilgisi: Temel WordPress fonksiyonlarına (get_post_meta, update_post_meta) aşinalık.
- JavaScript/jQuery: Ajax isteklerini yönetmek için temel düzeyde bilgi.
- Güvenlik: Nonce (Number used once) kullanımı ve yetkilendirme kontrolleri.
Adım 1: Yönetim Paneli Arayüzünü Oluşturma
İlk adım, stok verilerini listeleyeceğimiz özel bir WordPress yönetici sayfası oluşturmaktır. Bu sayfa, stokları göreceğimiz ve güncelleyeceğimiz ana merkez olacaktır.
add_action('admin_menu', 'stok_paneli_menu_ekle');
function stok_paneli_menu_ekle() {
add_menu_page(
'Canlı Stok Yönetimi',
'Stok Paneli',
'manage_options',
'stok-paneli',
'stok_paneli_render',
'dashicons-list-view',
20
);
}
Yukarıdaki kod, WordPress yönetici menüsüne "Stok Paneli" adında yeni bir sekme ekler. manage_options yetkisi, sadece yöneticilerin bu sayfaya erişebilmesini sağlar.
Adım 2: Stok Listeleme ve HTML Yapısı
Stok verilerini bir tablo yapısında sunmak, kullanıcı deneyimi açısından en verimli yöntemdir. Aşağıdaki kod, veritabanından ürünleri çeker ve basit bir tablo oluşturur.
function stok_paneli_render() {
$args = array('post_type' => 'product', 'posts_per_page' => 20);
$products = get_posts($args);
echo 'Canlı Stok Yönetimi
';
foreach ($products as $product) {
$stock = get_post_meta($product->ID, '_stock', true);
echo ''.$product->post_title.' ';
echo ' ';
}
echo '
';
}
Burada data-id niteliği, JavaScript tarafında hangi ürünün güncelleneceğini belirlemek için kritik öneme sahiptir.
Adım 3: Ajax İsteği İçin JavaScript Hazırlığı
Sayfa yenilenmeden stok güncellemesi yapabilmek için jQuery kullanarak bir Ajax isteği göndermeliyiz. Bu script, input alanındaki değer değiştiğinde tetiklenir.
jQuery(document).ready(function($) {
$('.stok-input').on('change', function() {
var productId = $(this).data('id');
var newStock = $(this).val();
$.post(ajaxurl, {
action: 'stok_guncelle',
post_id: productId,
stok_miktari: newStock,
nonce: stok_objesi.nonce
}, function(response) {
alert('Stok güncellendi: ' + response.data);
});
});
});
ajaxurl, WordPress'in Ajax işlemlerini yönettiği global değişkendir. nonce kullanımı ise Cross-Site Request Forgery (CSRF) saldırılarını engellemek için zorunludur.
Adım 4: PHP Tarafında Ajax İşleyicisi
JavaScript'ten gelen isteği karşılayacak ve veritabanını güncelleyecek olan fonksiyonu functions.php dosyanıza eklemelisiniz.
add_action('wp_ajax_stok_guncelle', 'stok_guncelle_fonksiyonu');
function stok_guncelle_fonksiyonu() {
check_ajax_referer('stok_guvenlik_anahtari', 'nonce');
$post_id = intval($_POST['post_id']);
$stok = intval($_POST['stok_miktari']);
update_post_meta($post_id, '_stock', $stok);
wp_send_json_success('Stok başarıyla güncellendi.');
}
check_ajax_referer fonksiyonu, gelen isteğin güvenli bir kaynaktan gelip gelmediğini doğrular. intval kullanımı ise SQL injection riskine karşı veriyi temizlememizi sağlar.
Karşılaştırma: Stok Yönetim Yöntemleri
| Yöntem | Avantaj | Dezavantaj |
|---|---|---|
| Standart Form | Basit, güvenli | Sayfa yenileme gerektirir |
| Ajax Canlı Panel | Hızlı, kullanıcı dostu | JavaScript bağımlılığı |
| REST API | Modern, ölçeklenebilir | Daha karmaşık kurulum |
Adım 5: Güvenlik ve Hata Ayıklama
Kritik Uyarı: WordPress eklentilerinde veya özel panellerde her zaman yetki kontrolleri (current_user_can) yapın. Kullanıcıdan gelen verileri asla doğrudan veritabanına göndermeyin; her zaman sanitize (temizleme) ve validate (doğrulama) işlemlerinden geçirin.
Hata ayıklama için tarayıcınızın "Geliştirici Araçları" (F12) -> "Network" sekmesini kullanarak Ajax isteklerinin 200 OK durum koduyla dönüp dönmediğini kontrol edebilirsiniz.
Sıkça Sorulan Sorular
Ajax isteği neden 403 hatası veriyor?
Bu genellikle nonce doğrulaması başarısız olduğunda gerçekleşir. İstemci tarafında gönderdiğiniz nonce ile sunucu tarafındaki nonce'un eşleştiğinden emin olun.
Stok verisi veritabanına neden yazılmıyor?
update_post_meta fonksiyonunun doğru post ID ile çalıştığını ve kullanıcının bu işlemi yapmaya yetkisi olduğunu kontrol edin.
Bu sistem WooCommerce ile çalışır mı?
Evet, WooCommerce stok verilerini _stock meta anahtarında tutar. Bu kod doğrudan WooCommerce ürünleri ile uyumludur.
JavaScript dosyasını nasıl dahil etmeliyim?
wp_enqueue_script fonksiyonunu kullanarak ve wp_localize_script ile Ajax URL ve nonce değerlerini aktararak dahil etmelisiniz.
Canlı stok güncellemesi sunucuyu yorar mı?
Çok yüksek trafikli sitelerde, her stok değişiminde veritabanı yazma işlemi sunucu yükünü artırabilir. Bu durumda bir önbellekleme mekanizması düşünülmelidir.
İleri Seviye İpuçları: Veri Doğrulama ve Kullanıcı Deneyimi
Stok yönetim panelinizi daha profesyonel hale getirmek için sadece veriyi güncellemek yetmez; aynı zamanda kullanıcının işlem sonucunu anlık olarak görmesini sağlamalı ve hatalı girişleri engellemelisiniz. Aşağıdaki yöntemlerle sisteminize bir "işlem durumu" göstergesi ekleyebilirsiniz.
Kullanıcı Geri Bildirim Mekanizması
Ajax isteği gönderilirken butonun durumunu değiştirmek ve işlem bittiğinde kullanıcıyı bilgilendirmek, sistemin profesyonelliğini artırır. JavaScript tarafında beforeSend ve complete callback fonksiyonlarını kullanarak bunu kolayca yönetebilirsiniz.
// JavaScript tarafında geliştirilmiş Ajax isteği
function updateStock(productId, newQuantity) {
const btn = document.querySelector('#btn-' + productId);
$.ajax({
url: ajax_object.ajax_url,
type: 'POST',
data: {
action: 'update_stock_action',
product_id: productId,
quantity: newQuantity,
nonce: ajax_object.nonce
},
beforeSend: function() {
btn.innerText = 'Güncelleniyor...';
btn.disabled = true;
},
success: function(response) {
if(response.success) {
btn.innerText = 'Başarılı!';
btn.style.backgroundColor = '#28a745';
} else {
alert('Hata: ' + response.data);
}
},
complete: function() {
setTimeout(() => {
btn.innerText = 'Güncelle';
btn.disabled = false;
btn.style.backgroundColor = '';
}, 2000);
}
});
}
Sistem Performansını Optimize Etme
Canlı stok yönetimi, özellikle büyük veritabanlarında sorgu yoğunluğuna neden olabilir. Sunucunuzu korumak ve veritabanı üzerindeki yükü hafifletmek için şu stratejileri uygulayabilirsiniz:
- Debounce Uygulaması: Kullanıcı her tuşa bastığında Ajax isteği göndermek yerine, yazmayı bıraktıktan 500ms sonra isteği tetikleyen bir "debounce" fonksiyonu kullanın.
- Transients API Kullanımı: Çok sık değişmeyen stok verilerini WordPress Transients API ile geçici olarak önbelleğe alarak veritabanı sorgu sayısını azaltın.
- Batch Güncelleme: Eğer toplu stok güncellemeleri yapıyorsanız, her ürün için ayrı Ajax isteği yerine tüm değişiklikleri bir dizi (array) olarak tek seferde gönderin.
Veritabanı Sorgu Optimizasyonu
WordPress update_post_meta fonksiyonu her çağrıldığında veritabanında bir işlem başlatır. Eğer tek bir sayfada 50 ürün güncelliyorsanız, WordPress'in wp_cache_set veya doğrudan SQL UPDATE sorgularını kullanarak veritabanı yükünü optimize edebilirsiniz.
İpucu: Çok büyük stok listelerindeWP_Queryyerine doğrudan$wpdbkullanarak sadece gerekli sütunları (ID ve Meta Value) çekmek, bellek kullanımını %40'a kadar düşürebilir.
// Doğrudan SQL kullanımı ile performans artışı
global $wpdb;
$wpdb->query($wpdb->prepare(
"UPDATE {$wpdb->postmeta} SET meta_value = %d WHERE post_id = %d AND meta_key = '_stock'",
$new_quantity,
$product_id
));
Sonuç
WordPress ile özel bir Ajax canlı stok yönetim paneli oluşturmak, e-ticaret operasyonlarınızı hızlandıracak ve manuel iş yükünüzü ciddi oranda azaltacaktır. Bu rehberde, yönetici menüsü oluşturmadan güvenli Ajax isteklerine kadar tüm süreci adım adım tamamladık. Bir sonraki adım olarak, bu paneli WebSocket teknolojisi ile entegre ederek, birden fazla yönetici aynı anda stok güncellediğinde verilerin tüm ekranlarda anlık olarak değişmesini sağlayabilirsiniz.
Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Üretim ortamında kullanmadan önce güvenlik açıklarına karşı test edilmeli ve gerekli yetkilendirme kontrolleri (örneğin: 'manage_woocommerce' yetkisi) özelleştirilmelidir.


Yorumlar (0)
Yorum Yaz