AJAX'ı PHP ile Kendi Eklentinizle WordPress Sitenizde Kullanma
Yayınlanan: 2021-07-23
Bu yazıda WordPress web siteniz için PHP ile AJAX hakkında tartışacağız.
AJAX, kullanıcıların web sitesinde etkileşimli uygulamalar geliştirmelerine yardımcı olan bir web geliştirme tekniğidir. Kullanıcılara daha hızlı ve sorunsuz bir web deneyimi sunar. Kullanıcıların sayfaları yeniden yüklemeden veya yenilemeden web sayfasındaki içeriği değiştirmesine veya güncellemesine olanak tanır. AJAX ile çalışmak için çeşitli programlama dillerini bilmek gerekir.
AJAX nedir?
AJAX, 'Eşzamansız JavaScript ve XML' anlamına gelir. Daha önce de belirtildiği gibi, eğlenceli, sürekli değişen ve etkileşimli web uygulamaları oluşturmak için kullanılır.
AJAX ve ilgili teknolojilerin yardımıyla geliştirilen web uygulamasının popüler örneklerinden bazıları, Google'ın aramasında otomatik tamamlama özelliği olan Google Haritalar, çeşitli sosyal medya gönderilerinde yapılan yorumlar ve beğeniler ve diğerleri.
AJAX'ın Temelleri
Ajax, JavaScript, HTML, CSS ve XML gibi çeşitli programlama dillerinin yardımıyla daha hızlı ve geliştirilmiş web uygulamaları ve web siteleri geliştirir. Bu programlama dillerinin dışında web uygulamalarının geliştirilmesi için PHP ile AJAX ve diğer sunucu tarafı dilleri de kullanılmaktadır.
İçeriğin görüntülenmesi için JavaScript kullanır, CSS ise sunum ve Belge Nesne Modelinde yardımcı olur. Ayrıca içerik için XHTML kullanır.
Geleneksel web uygulamalarında veya web sayfalarında sunucu ile senkronize olarak bilgi alışverişi yapılır. Öte yandan, AJAX kullanmak üzere tasarlanmış web uygulamalarında, bir butona tıklamak veya bir form doldurmak gibi bir olay meydana geldiğinde JavaScript, bir XMLHTTP isteği oluşturur ve bunu sunucuya XML formatında gönderir.
Sunucu, isteği işler ve sunucu tarafında bir yanıt oluşturur ve bunu tarayıcıya geri gönderir. JavaScript daha sonra yanıtı işler ve mevcut ekrandaki içerik güncellenir. Sayfaların yeniden yüklenmesi veya yenilenmesi gerekmediğinden kullanıcılar, sunucuya herhangi bir bilgi aktarıldığından haberdar olmayacaktır.
WordPress'te AJAX ile çalışmak için gereken beceriler
Yukarıdaki tartışmadan da anlaşılacağı gibi, kullanıcılar AJAX'ı doğru kullanmak için aşağıdaki becerilere ihtiyaç duyarlar.
• JavaScript, HTML ve CSS gibi programlama dilleri bilgisi
• PHP ve diğerleri gibi sunucu tarafı dillerinde yeterlilik
• XML veya JSON'un Temelleri
AJAX'ın Avantajları
AJAX'ın çeşitli avantajları aşağıda tartışılmaktadır
• Günümüzde kullanılan tüm tarayıcıları neredeyse destekler.
• Daha hızlı yanıt süresi içerir, bu da hız ve performans açısından daha iyi bir kullanıcı deneyimi anlamına gelir.
• Prototype, jQuery vb. gibi açık kaynaklı JavaScript kitaplıkları kullanıma hazırdır
• İstemci ile sunucu arasındaki süreyi azaltır, böylece hem kullanıcının hem de sunucunun süresinden tasarruf edilir.
• Sunucunun çok sayıda veriyi işlemesi gerekmediğinden, bant genişliği kullanımının azaltılmasına ve ağ operasyonunun optimize edilmesine yardımcı olur.
• Veri almak için XMLHTTP isteği kullanıldığından, kullanıcılar aynı anda birden fazla görevi gerçekleştirebilir.
WordPress'te AJAX
AJAX, WordPress'in arka ucunda kullanılır, bunun bir sonucu olarak, gönderi veya kategorilerde herhangi bir değişiklik yapıldığında veya yönetici yorumları denetlediğinde, güncellemeler anında yapılır. AJAX, çoğunlukla WordPress'te JQuery ile birlikte kullanılır. WordPress'in AJAX kullandığı süreç aşağıdaki gibidir
• Bir istek yapıldığında, 'wp-admin' klasöründe bulunan 'admin-ajax.php' dosyasından geçer.
• Bu isteklerin, genellikle 'eylem' olarak da adlandırılan en az bir veri parçasını 'get' veya 'post' yöntemini kullanarak sağlaması gerekir.
• Bu eylem, 'admin-ajax.php' dosyasındaki kodu, 'wp_ajax_my_action' ve 'wp_ajax_nopriv_my_action' olmak üzere iki kanca oluşturmak için ister. Bu kancalardaki 'my_action', 'get' veya 'post' yönteminin 'action' değişkeninin değerini gösterir.
• İlk kanca, oturum açmış kullanıcılar tarafından gerçekleştirilen eylemler için kullanılırken, ikinci kanca yalnızca oturumu kapatmış kullanıcılar içindir.
• Bağlantılı işlevler, tarayıcılarda JavaScript devre dışı bırakılsa bile kodların çalışmaya devam etmesini sağlayan zarif bozulma için planlanmalıdır.
Bir WordPress AJAX Eklentisi Oluşturun
Bu bölümde, 'Post Likes Counter' adlı temel bir WordPress AJAX eklentisi örneğini ele alalım. Bu eklenti aşağıdaki özellikleri içerir:
• Ön uçta anında güncellenir
• Giriş yapan kullanıcıların gönderileri beğenmesine izin verilir.
• Çıkış yapan kullanıcılar gönderiyi beğenmeye çalışırsa, ekranda bir hata mesajı belirir.
• Bu eklenti, 'beğeni' sayısının toplam kaydını tutmaya yardımcı olur ve bunları görüntüler.
Öncelikle boş bir WordPress eklentisinin oluşturulması ve etkinleştirilmesi gerekir. Bir eklenti oluşturmak için aşağıdaki adımların gerçekleştirilmesi gerekir.
Adım 1 : Eklenti için benzersiz bir ad seçin. Eklentinin önerilen adının halihazırda kullanımda olmadığından emin olmak için eklenti depoları kontrol edilebilir. Genellikle, eklenti geliştiricileri, gerçekleştirmesi gereken işleve göre bir eklentinin adını seçer.
Adım 2 : Bir sonraki adımda, seçilen eklenti adını kullanarak oluşturmak için bir PHP dosyası gerekir. Bu eklentiyi kuracak kullanıcıların, kurulumu için PHP dosyasını WordPress eklenti dizinine 'wp-content/plugins-' yerleştirmeleri gerekeceğinden, eklentiler PHP dosyaları için aynı adı paylaşamaz.
Bu nedenle, depodaki başka bir eklentiyle çakışmayı önlemek için eklenti dosya adı da benzersiz olmalıdır. PHP dosyası için benzersiz bir ad oluşturmak için adlarını veya şirketlerinin adını önek içinde kullanabilirsiniz.
Adım 3 : WordPress eklentisinin JavaScript, CSS, diller ve resim dosyaları ile birlikte en az bir PHP dosyası içermesi gerektiğine dikkat edilmelidir. Birden fazla dosya varsa, dizin için benzersiz bir ad ve ana PHP dosyası için tercih edilen bir ad seçin.
Tüm eklenti dosyalarını oluşturulan dizine yerleştirin ve eklenti kullanıcılarından bu dizinin tamamını 'wp-content/plugins/' dizinine yüklemelerini isteyin.
WordPress kurulumu, standart eklenti dizini 'wp-content/plugins/' değiştirilecek şekilde yapılandırılabilir. Bu nedenle, PHP kodlarında plugin_dir_path() ve plugin_url() veya mutlak yol ve URL'ler kullanılmalıdır.
Temanın Yazı Şablonu
Eklentiyi oluşturduktan sonra, temalarının 'single.php' yazı şablonunu bulması gerekiyor. Aktif temanın kök dizininde bulunabilir. Tek bir gönderi sorgulandığında kullanılır; birinin 'Benzer Gönderi Sayacı' eklentisini yerleştirmek istediği yer. Dosya düzenleme için açık tutulmalıdır.
AJAX çağrısı için Gönderi Şablonunu hazırlayın
Kullanıcıların gönderileri beğenebilmesi için bir bağlantı oluşturulması gerekir. Kullanıcılar JavaScript'i etkinleştirmişse, JavaScript dosyalarını (daha sonra oluşturulacak) kullanabilirler veya aksi takdirde bağlantıyı doğrudan takip edebilirler. Bunun için aşağıdaki kodu 'single.php' dosyasına ekleyin. Bu kod aynı zamanda 'single.php' dosyasının içerdiği herhangi bir şablon parçasına da eklenebilir.
// 'beğeniler' meta anahtarı değeri, belirli bir gönderi için toplam beğeni sayısını saklar, boş bir dize ise 0 gösterir Kimlik, "beğeniler", doğru); $beğeni = ($beğeni == "") ? 0 : $beğeni; ?> Bu gönderide <span id='like_counter'></span> beğeni var<br> // admin-ajax.php dosyasına bağlanma. Ekstra güvenlik için nonce çek dahildir. JS etkin istemciler için "user_like" sınıfına dikkat edin. Kimlik.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' . $bağlantı. '">Bu Gönderiyi Beğenin</a>'; ?>
JavaScript olmadan Ajax Çağrısını Adresleme
Önceki adımda oluşturulan bağlantıya tıklandığında 'admin-ajax.php' betiğine yönlendirilir; ancak, işlev eylemi çalıştırmak için oluşturulmadığı için yararlı bir sonuç bulamayacaklar. İşlevi eklenti dosyasında oluşturmak ve WordPress tarafından oluşturulan kancalara eklemek için aşağıdaki kodu girin.
<?php // burada yalnızca sözdizimi vurgulamayı etkinleştirmek için kullanılır. Eklenti dosyanıza zaten dahil edilmişse, bunu dışarıda bırakın.
// oluşturulan iki kancanın eylemlerini tanımlayın, ilk olarak oturum açmış kullanıcılar için ve bir sonraki oturumu kapatmış kullanıcılar için
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "Please_login");
// oturum açmış kullanıcılar için çalıştırılacak işlevi tanımlayın
işlev my_user_like() {
// ekstra bir güvenlik katmanı olup olmadığını kontrol edin, başarısız olursa işlev kapanır
if ( !wp_verify_nonce( $_REQUEST[#039;nonce#039;], "my_user_like_nonce")) {
çıkış("Wooof Woof Woof");
}
// bir gönderi için like_count getir, boşsa 0'a ayarla, bir tıklama kaydedildiğinde 1 artır
$like_count = get_post_meta($_REQUEST["post_id"], "beğeniler", true);
$like_count = ($like_count == ') ? 0 : $like_count;
$new_like_count = $like_count + 1;
// 'beğeni#039; değerini güncelle belirtilen gönderi için meta anahtar, yoksa gönderi için yeni meta veriler oluşturur
$like = update_post_meta($_REQUEST["post_id"], "beğeniler", $new_like_count);
// Yukarıdaki işlem başarısız olursa, sonuç türü 'hata#039; ve like_count eski değere ayarlanır, başarılı olursa new_like_count olarak güncellenir
if($like === yanlış) {
$sonuç[#039;type#039;] = "hata";
$sonuç[#039;like_count#039;] = $like_count;
}
Başka {
$result[#039;type#039;] = "başarılı";
$result[#039;like_count#039;] = $new_like_count;
}
// Eylemin Ajax çağrısı yoluyla başlatılıp başlatılmadığını kontrol edin. Evet ise, JS kodu tetiklenir, aksi takdirde kullanıcı gönderi sayfasına yönlendirilir.
if(!empty($_SERVER[#039;HTTP_X_REQUESTED_WITH#039;]) && strtolower($_SERVER[#039;HTTP_X_REQUESTED_WITH#039;]) == 'xmlhttprequest#039;) {
$sonuç = json_encode($sonuç);
yankı $sonuç;
}
Başka {
header("Yer: ".$_SERVER["HTTP_REFERER"]);
}
// betiklerinizi die() işleviyle sonlandırmayı unutmayın - çok önemli
ölmek();
}
// çıkış yapan kullanıcılar için çalıştırılacak işlevi tanımlayın
function lütfen_login() {
echo "Beğenmek için giriş yapmalısınız";
ölmek();
}
Her şey yolunda giderse, oturum açmış bir kullanıcı 'bu gönderiyi beğen' bağlantısını tıkladığında, beğeni sayısı otomatik olarak güncellenecektir. Öte yandan, JavaScript devre dışı bırakılırsa, 'beğeni'nin güncellenmiş sayıları görüntülenerek sayfa yenilenecektir.
JavaScript desteği ekleme
JavaScript desteği eklemek işleri kolaylaştırabilir. AJAX'ı WordPress'te PHP ile kullanmak için, eklentinin özel JavaScript dosyasıyla birlikte jQuery kitaplığının kuyruğa alınması gerekir. Bunun için eklentiye aşağıdaki kodu yazın.
admin_url('admin-ajax.php' )));
// jQuery kitaplığını ve yukarıda kaydettiğiniz betiği kuyruğa alın
wp_enqueue_script('jquery');
wp_enqueue_script('liker_script');
}
Ardından, eklentinin kök klasörüne daha fazla yüklenecek olan 'liker_script.js' Javascript dosyasının oluşturulması gerekir. 'liker_script.js' dosyası oluşturmak için aşağıdaki kod kullanılır.
jQuery(belge).ready( function() {
jQuery(".user_like").click( function(e) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("veri-nonce");
jQuery.ajax({
yazın: "gönder",
dataType : "json",
url : myAjax.ajaxurl,
data : {action: "my_user_like", post_id : post_id, nonce: nonce},
başarı: işlev(yanıt) {
if(response.type == "başarılı") {
jQuery("#like_counter").html(response.like_count);
}
Başka {
alert("Beğeniniz eklenemedi");
}
}
});
});
});
AJAX WordPress temalarında nasıl uygulanır?
Aşağıdaki adımlar, WordPress temalarında AJAX'ın PHP ile uygulanmasına yardımcı olacaktır. Örneğin, işimizin bir açılır menüde kategorileri görüntülemek olduğunu varsayalım ve 'Üst Kategori' tıklandığında alt kategoriler başka bir açılır kutuda görünecektir. Bu görev, aşağıdaki adımların yardımıyla gerçekleştirilecektir.
Adım 1 : Gösterge panelinin sol tarafında 'kategoriler'i seçin ve sağ tarafta görünen kutuya kategorilerin adını girin ve kategori bilgisini aşağıya ekleyin. Ana kategori oluşturuluyorsa 'yok'u seçin veya alt kategoriler oluşturuluyorsa seçeneklerden ana kategoriyi seçin.
Adım 2 : Bu adımda, AJAX işlevselliğinin uygulanacağı bir WordPress şablonu oluşturulacaktır. Yeni bir PHP dosyası açın ve kaydedin. Oluşturulan sayfaya aşağıdaki kodu ekleyin.
Yukarıdaki kodda, 'Template Name: Implement Ajax', WordPress şablonunun adıdır ve sayfanın üstbilgi ve altbilgi içeriğini görüntülemek için 'get_header()' ve 'get_footer()' işlevleri kullanılır.
İlk olarak, AJAX öğelerinin eklenmesine yardımcı olacak jQuery kitaplık dosyasının sayfaya eklenmesi gerekir. PHP ile AJAX, herhangi bir JavaScript kitaplığını kullanabilir veya ham JavaScript ile AJAX'ı çağırabilir. Aşağıdaki örnekte, AJAX'ı uygulamak için jQuery JavaScript kitaplığı kullanılmıştır.
Adım 3 : jQuery dosyasını şablona ekleyin ve açılır menüdeki ana kategorilerin alınabilmesi için 'wp_dropdown_categories' işlevini çağırın.
#content{width:otomatik; yükseklik:400 piksel; kenar boşluğu:50 piksel;}
<div>
</div>
<?php
Adım 4 : Seçilen ana kategorinin kimliğini almak için jQuery kodunu girin. Seçilen ana kategori kimliği altındaki alt kategorileri almak için onu 'functions.php' dosyasına gönderin. Sonuçlar daha sonra yenilemeden sayfaya geri gönderilebilir.
$(işlev(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
// ajax'ı çağır
$("#sub_cat").empty();
$.ajax({
url:"/wp-admin/admin-ajax.php",
tür:'POST',
data:'action=my_special_action&main_catid=' + $mainCat,
başarı:işlev(sonuçlar)
{
// uyarı(sonuçlar);
$("#sub_cat").removeAttr("devre dışı");
$("#sub_cat").append(sonuçlar);
}
});
}
);
});
Yukarıdaki bu kodda, kod '#main_cat' kimliğiyle ana kategoriler açılır listesinin change olayına eklenir.
var $mainCat=$('#main_cat').val();
.val() işlevi, açılır menüden seçilen seçenek değerinin alınmasına ve '$mainCat' değişkeninde saklanmasına yardımcı olur.
$("#sub_cat").empty();
AJAX'ı çağırmadan önce, '#sub_cat' alt kategorisi açılır listesinin, önceki herhangi bir değeri içeriyorsa boşaltılması gerekir.
Aşağıdaki jQuery satırı, AJAX jQuery işlevlerini çağırmada yardımcı olacaktır. Aşağıdaki bölümde verilen AJAX fonksiyonunun parametrelerini kontrol edin.
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
tür:'POST',
AJAX'ın WordPress'te çalışmasını sağlamak için 'URL' parametresi kullanılır. Bu nedenle istekler 'admin-ajax.php' dosyasına gönderilecektir. Ardından, URL'ye gönderilen gönderilen verileri almak için 'functions.php' dosyasındaki kancalar çağrılır: '/wp-admin/admin-ajax.php'
Değerleri istekle birlikte göndermek için 'data' parametresi kullanılır. Bu örnekte, data parametresiyle iki argüman kullanılmıştır – action ve main_catid.
Adım 5 : 'functions.php' dosyasında, bir eylemi kancalamak için aşağıdaki kod kullanılır.
add_action('wp_ajax_my_special_action', 'my_action_callback');
Yukarıdaki bu eylemde, kancanın iki argümanı vardır. İlk argümanda 'wp_ajax_my_special_action', 'wp_ajax_', 'action' veri parametresiyle birlikte gönderilen değerdir. 'my_action_callback' ikinci argümanında, veriler işlenecek ve sonuçlar geri gönderilecektir.
Bu yukarıdaki eylem kancası, oturum açmış kullanıcılar içindir. Oturumu kapatan kullanıcılar için aşağıdaki eylem yapılabilir
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
Hem kullanıcılar hem de geri arama işlevi için kancalar ekledikten sonraki son kod aşağıdaki gibidir.
function uygulama_ajax() {
if(isset($_POST['main_catid']))
{
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categories as $cat) {
$option .= 'term_id.'">';
$seçenek .= $kedi->kedi_adı;
$option .= ' ('.$cat->category_count.')';
$seçenek .= '';
}
echo 'Scegli...'.$seçenek;
ölmek();
} // eğer son
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//oturum açmamış kullanıcılar için.
Adım 6 : Bu adımda, gösterge tablosunda yeni bir sayfa oluşturun ve şablonu ona atayın. Sayfa tarayıcıya yüklendikten sonra, üst kategorileri içeren ilk açılır menü ona yüklenecektir.
İkinci açılır menü boş olduğundan, nasıl çalıştığını kontrol etmek için ilk açılır menüdeki seçeneği seçin.
Böylece PHP ile AJAX, yeni oluşturulan bir eklenti yardımıyla WordPress sitesinde kullanılabilir.