WordPress Yorumlarınız AJAX-ify Nasıl Yapılır

Varsayılan olarak, WordPress yorumlama sistemi oldukça yetersiz - yorum yapmak için en büyük itirazlarımdan biri, sayfanın yenilenmesi gerekiyor. Livefyre veya Disqus gibi bir üçüncü taraf sistemine geçebilirsiniz. 3 Wordpress Blog'unuzdaki Yorumları Teşvik Etmenin 3 Yolu Wordpress Blog'unuzdaki Yorumları Teşvik Etmenin 3 Yolu Blogunuzdaki yorumları almak, sizi uzun süredir devam ettirmek için harika bir motive edicidir. blogging. Sadece birisinin orada olduğunu bilmek, çalışmanızı takdir etmek harika bir şey, ama değil…, ama her şeyi evde tutmayı veya başka bir tür özelleştirme yapmayı tercih ederseniz, AJAX tarafından yorum yapmak en az yapmanız gereken şeydir.

Bunun üzerinde çalışmanın bir örneğini burada görebilirsiniz. Faydalanmak - yorum gönderdiğinizde sayfadan ayrılmayacaksınız - bunun yerine bir AJAX araması yoluyla göndereceğiz ve ardından bir kısa mesaj göndereceğiz. “teşekkür ederim” geri not edin. Tam bir eğitim için okumaya devam edin.

WordPress olmayan işlevleri AJAX olarak kullanmak için, lütfen önceki dersimden birini okuyun A AJAX Kullanımı Üzerine Bir Öğretici WordPress'te AJAX Kullanımı Üzerine Bir Öğretici WordPress'te AJAX, bizi basitliğin ötesine taşıyan olağanüstü bir web teknolojisidir. “linke tıklayın, başka bir sayfaya gidin” İnternetin yapısı 1.0. Web sitelerinin, kullanıcı olmadan dinamik olarak içerik toplamasını ve görüntülemesini sağlar… ve tüm WordPress ile ilgili makaleleri kontrol ettiğinizden emin olun.

Giriş

AJAX WordPress yorumlarının çalışmasını sağlamak için gereken iki ayrı bölüm vardır, bu yüzden önce tüm süreci genel olarak size anlatanları açıklayalım..

• Sayfadaki bazı Javascript, kullanıcının tıklayıp tıkladığı kullanıcıyı engeller Yorum ekle Aynı zamanda onu AJAX araması yapan ve yanıtı da veren gönder düğmesi.
• Comment_post eylemini içine alan bir PHP işleyicisi

JavaScript

Öncelikle, bugünlerde web geliştirmede uzaktan heyecan verici bir şey olduğu gibi, bu jQuery'e ihtiyaç duyacak. Yüklenip yüklenmediğinden emin değilseniz, devam edin ve Javascript koduna geçin ve yine de deneyin - Firebug varsa ve konsol günlüğü varsa “jQuery tanımsız” Sayfayı yenilediğinizde, yüklendiğinden emin olmak için bu satırı functions.php dosyasına ekleyin..

işlevi google_jquery () if (! is_admin ()) wp_deregister_script ('jquery'); wp_register_script ('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"), yanlış); wp_enqueue_script ( 'jquery');  add_action ('wp_print_scripts', 'google_jquery');

Not: Bu, jQuery'i yüklemenin ayrıntılı bir yoludur, çünkü Google CDN'lerden en son sürümü kullanacağız, ki bu, varsayılan olarak WordPress'in içerdiği sürümden daha hızlı ve daha güncel olacak - bu yüzden yine de eklemek iyi bir fikir olabilir. jQuery zaten başka bir yere yüklenmiş olsa bile.

Şimdi, yorum formunu işleyecek asıl Javascript için birkaç seçeneğimiz var. En kolay olan, kodu yalnızca kodunuza yapıştırmaktır. single.php şablon - sayfalar için yorumların etkin olmadığını varsayarsak.

Alternatif olarak, varolanın içine yapıştırabilirsiniz .js Temanız tarafından kullanılan dosyayı veya yeni .js Tema dizininizdeki dosya. Kendi ayrı .js dosyanıza eklemeyi ve doğrudan tema şablonunuza yapıştırmayı seçmezseniz, aşağıdaki satırları telefonunuza eklediğinizden emin olun. functions.php, ve dosya adının kabul edildiği varsayılsın. ajaxcomments.js tema klasörünüzün kökünde.

add_action ('init', 'ajaxcomments_load_js', 10); işlevi ajaxcomments_load_js () wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); 

Yorum formunu işlemek için Javascriptveya pastebin üzerinde görüntüleyebilirsiniz):

// AJAXified yorumlama sistemi jQuery ('document'). Ready (function ($) var commentform = $ ('# commentform'); // önce yorum formunu bulun commentform.prepend (''); // önce bilgi paneli ekle geri bildirim veya hata sağlama formu var statusdiv = $ ('# comment-status'); // infopanel'i tanımlayın commentform.submit (function () // form verilerini değişkenleştirip saklayın var formdata = commentform.serialize ( ); // Bir durum mesajı ekleyin statusdiv.html ('
İşleme… 
'); // Eylem URL'sini commentformdan ayıkla var formurl = commentform.attr ('action'); // $ .ajax veri içeren form formu (type: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) statusdiv.html ('
Alanlardan birini boş bırakmış veya çok hızlı gönderiyor olabilirsiniz.
'); , success: işlev (veri, textStatus) if (data == "success") statusdiv.html ('
Yorumun için teşekkürler. Cevabınızı takdir ediyoruz.
'); else statusdiv.html ('
Bir sonraki yorumunuzu göndermeden önce lütfen biraz bekleyin
'); commentform.find ('textarea [name = comment]'). val (");); false;););

Kodu yıkmak için önce yorum formunun jQuery nesnelerini oluşturduk (yorum formunuzun varsayılan css kimliğine sahip olduğunu varsayar “commentform”), ve üzerine, kullanıcılarına yorumlarını yayınlamanın ilerleyişi hakkında mesajlar görüntülemek için kullanacağımız boş bir bilgi paneli eklemek.

commentform.submit Gönder düğmesini 'kaçırmak' için kullanılır. Daha sonra form verilerini seriledik (bunu uzun bir veri satırına dönüştürün), “İşleme” bu bilgi panelindeki kullanıcıya mesaj bırakın ve bir AJAX isteği ile devam edin. AJAX talebi standart bir formattır, ancak bugün gerçekten bu eğitimin kapsamı dışında değildir - bir başarıya veya hataya tepki verdiğini söylemek yeterlidir ve aynı yorumun yanlışlıkla iki kez yayınlanmasını önlemek için başarılı olursa formu boşaltır. Mesajları ve hataları uygun şekilde ayarlayın veya hata mesajlarının bir şekilde öne çıkmasını istiyorsanız temanızın stil sayfasına uygun bir stil ekleyin. Son satır - yanlış dönüş - formun varsayılan eylemini tamamlamasını engeller.

PHP İşleyicisi

Son olarak, sayfanın yenilenmesini önlemek ve uygun yanıtı kullanıcıya geri göndermek, ayrıca yorumun yönetilmesi gerekiyorsa yöneticiye bildirmek veya yeni bir yorum yazarına bildirmek için bir şeye ihtiyacımız var. Bunun için comment_post veritabanına eklendikten hemen sonra gerçekleşen eylem ve bunun bir AJAX isteği olup olmadığını algıla. Bunu ekle functions.php dosya:

(Ayrıca bu pastörde de mevcut)

add_action ('comment_post', 'ajaxify_comments', 20, 2); işlevi ajaxify_comments ($ comment_ID, $ comment_status) if (! boş ($ _ SUNUCU ['HTTP_X_REQUESTED_WITH'])) comment_status) case '0': // onaylanmamış yorumun moderatörlüğünü bildir wp_notify_moderator ($ comment_ID); case '1': // Onaylı yorum echo "success"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ Sonrası = ve get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); break; varsayılan: echo "hata";  çıkış; 

Spot Problemleri

Sayfa, AJAX aracılığıyla yayınlanmak yerine hala yenileniyorsa, iki sorundan biri olabilir. Bir - jQuery yüklü olmayabilir. Firebug'u Kurun Firebug'u IE, Safari, Chrome ve Opera'ya Kurun Firebug'u IE, Safari, Chrome ve Opera'ya Kurun veya Chrome geliştirici araçlarını etkinleştirin ve hatalar için konsol günlüğünü kontrol edin. JQuery bulunmazsa, JavaScript bölümüne geri dönün ve temanıza jQuery eklemenin ilk bölümünü okuyun. İkinci olasılık, temanızın yorum formuna özel bir şey yapması ve kimliğinin artık olmaması. “commentform”. Kaynak kodunu kontrol edin, ardından var commentform = $ ('# commentform') doğru kimliği olması için JavaScript’teki bir satır.

Her zaman olduğu gibi, elimden geldiğince yardım etmek üzereyim, ancak lütfen hızlıca bakabileceğim bir örnek URL’ye bağlantılar gönderin.