Ajax Kullanarak WordPress'te Veritabanına Veri Ekleme
Yayınlanan: 2021-12-30
Ajax kullanarak WordPress'te bir veritabanına veri eklemenin bir yolunu mu arıyorsunuz? Bunu başarmak için izlemeniz gereken basit adımları paylaşacağımız için okumaya devam edin.
Bu çözümü uygulamak için bazı kodlama becerilerine ihtiyacınız olduğunu unutmamak önemlidir. Ancak, çözümü WordPress sitenize nasıl uygulayabileceğinizi açıklamak için her adımı ayrıntılı olarak açıklamaya çalışacağız.
Ajax, sayfayı yeniden yüklemeden veri tabanına veya sunucuya veri göndermek anlamına gelir. Bu, ziyaretçinin web sitenizden veya mevcut sayfadan ayrılmamasını sağlar. Ayrıca özellikle büyük form doldururken çok zaman kazandırır.
Hemen konuya girelim.
Özet
- Form Oluştur
- JQuery Kullanarak Tüm Form Verilerini Alın ve Ajax Üzerinden Veri Gönderin
- Verileri Getir ve Veritabanına Ekle
Form Oluştur
İlk adım formu oluşturmaktır. WordPress'te Ajax isteği ile form gönderirken, Ajax üzerinden veri gönderebilir ve admin_url('admin-ajax.php'); URL'si üzerinden temanızın içindeki fonksiyona ulaşabilirsiniz. admine güvenli bir şekilde ulaşmak için.
Bu URL hakkında daha fazla bilgiyi WordPress tarafından sağlanan Ajax belgelerinde bulabilirsiniz.
Formu oluşturmak için bu kodu kopyalayıp görüntülemek istediğiniz yere yapıştırın. Bunu index.php, single.php, page.php ve hatta sidebar.php dosyasında görüntüleyebilirsiniz.
<div class="container">
<h1>WordPress AJAX Insert Post Demo</h1>
<form id="enquiry_email_form" action="#" method="POST" data-url="<?php echo admin_url('admin-ajax.php'); ?>" enctype="multipart/form-data">
<div class="form-group">
<label for="">Enter Title</label>
<input type="text" class="form-control" name="post_title" id="post_title" placeholder="Enter Title" />
</div>
<div class="form-group">
<label for="">Enter Description</label>
<textarea name="post_description" id="post_description" cols="30" rows="10" class="form-control" placeholder="Enter Post Description"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i> Submit</button>
</div>
</form>
</div>
JQuery Kullanarak Tüm Form Verilerini Alın ve Ajax Üzerinden Veri Gönderin
Bu bölümde sonuca ulaşmak için jQuery kullanacağız. Alternatif olarak, aynı sonucu elde etmek için Vanilla JavaScript'i de kullanabilirsiniz.
Devam etmeden önce, $.ajax() işlevi içindeki veri nesnesinin içindeki eylem değişkenine dikkat etmeyi unutmayın. Bunun nedeni, Ajax işlevinin içindeki işlevi kullanacağımızdır.
$("#enquiry_email_form").on("submit", function (event) {
event.preventDefault();
var form= $(this);
var ajaxurl = form.data("url");
var detail_info = {
post_title: form.find("#post_title").val(),
post_description: form.find("#post_description").val()
}
if(detail_info.post_title === "" || detail_info.post_description === "") {
alert("Fields cannot be blank");
return;
}
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
post_details : detail_info,
action: 'save_post_details_form' // this is going to be used inside wordpress functions.php
},
error: function(error) {
alert("Insert Failed" + error);
},
success: function(response) {
alert("Insert Success" + response);
}
});
})
Yukarıdaki kod, gönder düğmesine tıkladığınızda verilerin Ajax'a gönderilmesini sağlar. WordPress'in ajax işlevini kullanarak temanın function.php içindeki değerleri getirmemiz gerekiyor.
Verileri Getir ve Veritabanına Ekle
Öncelikle verileri alıp veritabanına eklemek için WordPress Ajax fonksiyonunu yazalım.
//Saving Ajax Data
add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');
Yukarıdaki koddaki string iki ana bölümden oluşmaktadır. Bunlar nopriv ve save_post_details_form'dur.
Nopriv kısmı, kullanıcı oturum açmışsa Ajax'ın başarısız olacağı anlamına gelir. Ancak, kullanıcı oturum açmadıysa, Ajax tetikleyicisi çalışır.
save_post_details_form, veri nesnesindeki $.ajax() içindeki JavaScript koduna yazdığımızdır. Düzgün eşleşmediği takdirde işlevin çalışmayacağını belirtmekte fayda var.
add_action işlevindeki diğer argüman, verileri alıp istediğimiz her şeyi yapmak için işlevin adıdır.
Son adım, sonuca bağlı olarak eylemi doğru veya yanlış olarak döndürmek ve bunu ön uçta görüntülemektir.
function save_enquiry_form_action() {
$post_title = $_POST['post_details']['post_title'];
$post_description = $_POST['post_details']['post_description'];
$args = [
'post_title'=> $post_title,
'post_content'=>$post_description,
'post_status'=> 'publish',
'post_type'=>post',
'post_date'=> get_the_date()
];
$is_post_inserted = wp_insert_post($args);
if($is_post_inserted) {
return "success";
} else {
return "failed";
}
}
Mesajı farklı bir çıktı gösterecek şekilde özelleştirebileceğinizi unutmamak önemlidir.
Çözüm
Bu kısa gönderide, Ajax kullanarak WordPress'te bir veritabanına nasıl veri ekleyebileceğinizi paylaştık. Son bölümdeki 'if else' koşulu Ajax içindeki hileyi yapacak ve sonuç mesajını daha açıklayıcı hale getirebilirsiniz.
Bu çözümü uygulayamıyorsanız, bizimle iletişime geçmekten çekinmeyin. Herhangi bir hata yaparsanız, sitenizi bozabilirsiniz.
Bu gönderinin, sayfayı yeniden yüklemeden veritabanına nasıl veri göndereceğinizi öğrenmenize yardımcı olduğunu umuyoruz.
Benzer Makaleler
- Foreach döngüsü ile WordPress Kayıtlı Kenar Çubukları Nasıl Gidilir?
- Pratik Bir Örnek Kullanarak WordPress'te Kategori Adı Nasıl Görüntülenir
- WordPress'te Oturum Açma Kullanıcı Bilgileri Nasıl Alınır
- WooCommerce Ödeme Sayfasında Onay Kutusu Alanı Nasıl Oluşturulur