(PHP) WordPress ile Ajax Post Gönderme ve Fonksiyon Yapımı

WordPress ile php ve ajax kullanarak post gönderme sonucunda fonksiyon ve işlem yapma detaylarını paylaştığımız yazıya hoş geldiniz.

Çoğu wordpress geliştiricisi özgün wp kodlarına dokunmadan ve sistemin işleyişini değiştirmeden, oluşturduğu temaya ajax yani dinamik post gönderme işlemi eklemeyi merak ediyor kuşkusuz.


Bu işlemi klasik yöntemle, yazılıma ek dosyalar entegre ederek ve en basit yolla index.php içerisine post yakalama kodlarını gömerek de yapabilirsiniz. Ancak işin doğru yolu, wordpress çekirdeğini ve işleyişini bozmadan, sistemin desteklediği şekilde dinamik komutu entegre etmektir.


WordPress, ajax komutlarını yakalayabilen bir çekirdeğe sahip. Yani hiçbir dosyaya dokunup özgünlüğünü bozmadan, tema kodlarınız ile wordpress içerisine ajax komutu gömebilirsiniz.


Ajax post göndererek sayfa üzerinde dinamik yapılabilen işlemlere en basit örnekler şunlar olarak gösterilebilir;

  • Ajax ile sayfa yenilenmeden yorum (comment) gönderimi
  • Post beğenme (like) yapımı
  • Dinamik post yükleme ve ajax ile daha fazla post göster seçeneği
  • Ajax ile session ve cookie değerlerini sayfa üzerinde kaydetme

Buna benzer bir çok örnek daha mevcuttur. En yaygın olanlardan bir tanesi de WordPress ile ajax search (arama) kutucuğu yapımıdır.


Anlatımı bitirdikten sonra, siz de hayal gücünüzü kullanarak WordPress üzerinde ajax ile dilediğiniz şekilde post gönderebilir ve dönen kaynağı yakalayarak sayfa üzerinde dinamik işlemler yapabilirsiniz.


Şimdi geçelim anlat artık nasıl yapılır diyen arkadaşların en merak ettiği kısıma… Öncelikle, tema klasöründe bulunan functions.php dosyasını açın ve en alttan şu iki satır kodu ekleyin;

add_action(“wp_ajax_yorum_yolla“, “yorumyolla“);

add_action(“wp_ajax_nopriv_yorum_yolla“, “yorumyolla“);

Eklediğiniz bu iki satırı açıklayalım hemen. Kırmızı olarak gösterilen kısımlar, komut adına göre değiştirmeniz gereken yerler. Peki neden 2 satır diye soruyorsunuzdur muhtemelen veya neden iki farklı şekilde aynı kodu ekliyoruz diye. Hemen söyleyelim… İlk satır, giriş yapmamış olan ziyaretçi, ikinci satır ise giriş yapan içindir. Şöyle ki, eğer giriş yapmayan ve yapan için farklı işlemler yapacaksanız farklı komutlar kullanabilirsiniz. Burada ikinci satırdaki kırmızı alanı farklı bir komuta yönlendirmeniz yeterli. Eğer herkese aynı işlem yapılacaksa ikisi de bu şekilde kalabilir.


Peki sol ve sağ tırnaklar içerisinde yazılanların farkı ne? Sol tarafta yazan wp_ajax_yorum_yolla kısmındaki kırmızı yazan alan, sizin ajax ile yollayacağınız action koduna karşılık geliyor onu da birazdan anlatacağız. Yani ajax ile post ederken action parametresi yalnızca “yorum_yolla” olacak anlamına geliyor bu. Sağ tarafta yazan “yorumyolla” ise php ile işleyeceğiniz komuta yönlendirmeniz oluyor. Yani php ile ajax post geldiğinde, postu işleyecek komut yorumyolla komutu olmalı bunu da yine functions.php içerisinde, bu eklediğiniz 2 satır kodun hemen altına açıyorsunuz. Şimdi ona geçelim…


Eklediğiniz iki satırdan sonra şu şekilde bir komut oluşturun; (post alanları örnek olarak yazılmıştır, siz kendinize uygun olan nameleri yazıyorsunuz)


function yorumyolla(){

$yorumcu = $_POST[‘author’];

$eposta = $_POST[‘mail’];

$yorum = $_POST[‘comment’];
if($yorumcu!=””&&$eposta!=””&&$yorum!=””)

{

…commenti veritabanına girdik…

echo “gonderildi”;

exit();

} else {

echo “hata mesajı (örn: alanları doldurmadınız?)”;

exit();

}

}



Şimdi bu komutu biraz anlatalım. İlk başta add_action ile ajaxdan yorum_yolla actionu ile gönderilen postu yorumyolla() fonksiyonuna atadık. Daha sonra da bu fonksiyon ile gelen post verisini yakalayıp alanlar boş değilse işlemi yapıp echo ile sonuç verdik. Alanlar boş gelirse de yine uyarı verdirdik.


Temanın bu kısmı tamam. Şimdi geçelim ajax bölümüne.


Comment formunu bulalım ve <form> etiketine onsubmit attributesi ekleyelim. Şu şekilde olabilir;


<form … onsubmit=”return ajax_yorum_yolla(this);“>


Tema dosyalarımız arasında yer alan custom.js veya hangi isimle açtıysanız o javascript dosyasını açalım şimdi.


İçerisine aşağıdaki komutu oluşturalım…

function ajax_yorum_yolla(o)

{

var gonderen = $(“#author”).val();

var mail = $(“#eposta”).val();

var texts = $(“#yorum”).val();
$.ajax({

type: ‘POST’,

url: “/wp-admin/admin-ajax.php”,

data: {

action: ‘yorum_yolla‘,

author: gonderen,

eposta: mail,

yorum: texts

},

success: function( data ) {

data = data.replace(/W/g, ”);

if(data==”gonderildi“)

{

alert(“Yorumunuz atıldı, teşekkürler!”);

//burada form gönderildikten sonraki işlemler de yapılabilir…

} else {

alert(data); //hata durumundaki işlemler yapılıyor!

}

}

});

              return false; 

}



Şimdi de yukarıdaki kodu anlatalım hemen… Burada dikkat etmeniz gereken en önemli kısım data kısmındaki action: “yorum_yolla” kısmıdır. Bunun önce anlattığımız komut eşleştirmesi ile birebir uyması gerekiyor.


Öncelikle, post değerlerini jQuery ile aldık ve post verisine ekledik. Ardından da gönderimi yaptık. Tabi burada yükleniyor tarzı veya loader.gif gibi bir şeyler eklemek artık sizin hayal gücünüze kalıyor. Postu göndermeden önce veya $ajax içerisinde before: ve after: kullanarak çeşitli işlemler yapabilirsiniz.


Post gitti ve php ile echo ettiğimiz değeri temizleyerek eşleme yaptık. Burada gonderildi mesajı gönderse yorumun kaydedildiğini anlıyoruz. Bundan sonra örnek olarak bir mesaj gösterebilir, yorum formunu gizleyebilir ve benzeri şeyler yapabiliriz. Size kalmış işlemler…


İşte hepsi bu kadar. WordPress çekirdek koduna hiç dokunmadan kendi tema dosyalarımız ile ajax post gönderme işlemini hallettik.


Yalnızca yorum için değil bunu her türlü dinamik işlem için düşünebilirsiniz. İhtiyacınız olan ve unutmamanız gereken functions.php dosyasında öncelikle ajax komutunu add_action ile register (kayıt) etmek.


Ve tabi ki kodların güncel halini sürekli takip edebilmek için, yaptığınız her değişiklikten sonra tarayıcıda CTRL + F5 yapmayı ihmal etmeyin.


Dip not olarak şunu da yazalım. Eğer “wordpress ajax returns 0” hatası alıyorsanız veya Türkçe karşılığıyla wordpress ajax komutundan sıfır değeri dönüyorsa komutları doğru register edip eşleştirme yapamadınız anlamına geliyor. Yukarıda kırmızı ile yazan bölümleri iyi inceleyip deneyin.


Herhangi bir sorun yaşarsanız, yorum yazmaktan çekinmeyin yardımcı olalım arkadaşlar.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir