AJAX-ify Your WordPress Hakkında Yorumlar

İlan

Varsayılan olarak, WordPress yorum sistemi acımasızca yetersizdir - en büyük itirazlarım yorum göndermek için sayfanın yenilenmesi gerekiyor. Livefyre [Bozuk URL Kaldırıldı] gibi bir üçüncü taraf sistemine geçebilirsiniz veya Disqus Wordpress Blogunuzdaki Yorumları Teşvik Etmenin 3 YoluBlogunuz hakkında yorum almak, bloglamadaki uzun mesafe ile devam etmenizi sağlamak için harika bir motivasyon kaynağıdır. Sadece birinin orada olduğunu bilmek, işini takdir etmek harika hissettiriyor, ama değil ... Daha fazla oku , ancak her şeyi evde tutmayı veya başka bir özelleştirme yapmayı tercih ediyorsanız, AJAX tarafından yorum göndermek en az yapmanız gereken şeydir.

Burada bunun bir örneğini görebilirsiniz Faydalanmak - bir yorum gönderdiğinizde sayfadan ayrılmazsınız - bunun yerine onu bir AJAX çağrısı yoluyla gönderir ve ardından hızlı bir "teşekkür ederim”Not edin. Tam bir eğitim için okumaya devam edin.

WordPress olmayan işlevleri AJAX olarak kullanmak için, lütfen önceki eğitim WordPress'te AJAX Kullanımı Hakkında Bir Eğitim

AJAX, bizi basit "tıklama bağlantısının, başka bir sayfaya git" in ötesine taşıyan dikkat çekici bir web teknolojisidir. İnternetin Yapısı 1.0. Web sitelerinin içeriği olmadan dinamik olarak getirmesini ve görüntülemesini sağlar. kullanıcı ... Daha fazla oku ve WordPress ile ilgili tüm 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 ilk önce tüm sürecin genel görünümünü vermek için bunları açıklayalım.

• Sayfadaki bazı kullanıcıları Javascript tıklayan Yorum ekle Gönder düğmesi, bu da onu AJAX çağrısı yapar ve yanıtı işler.
• Comment_post eylemine bağlanan bir PHP işleyicisi

JavaScript

Öncelikle, bunun gerekecek jQuery, günümüzde web geliştirmede uzaktan heyecan verici bir şey olduğu gibi. Yüklü olup olmadığından emin değilseniz, devam edip Javascript koduna atlayın ve yine de deneyin - Firebug'ınız varsa ve konsol günlüğü “jQuery tanımsız”Sayfasını yenilediğinizde, yüklendiğinden emin olmak için bu satırı function.php dosyanıza ekleyin.

işlev 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');

Bu, jQuery'yi yüklemenin ayrıntılı bir yolu olduğunu unutmayın, çünkü Google CDN'lerin en son sürümünü daha hızlı ve daha fazla kullanacağız. WordPress ile varsayılan olarak dahil olandan daha uzun bir tarih - bu nedenle jQuery zaten yüklenmiş olsa bile bunu eklemek iyi bir fikir olabilir Başka yerde.

Şimdi, yorum formunu işleyecek gerçek Javascript için birkaç seçeneğimiz var. En kolayı kodu sadece single.php şablonu - sayfalar için de yorum yapma özelliğini etkinleştirmediğiniz varsayılarak.

Alternatif olarak, mevcut bir js temanız tarafından kullanılan bir dosya oluşturun veya yeni .js dosyasını tema dizininizde bulabilirsiniz. Kendi ayrı .js dosyanıza koymayı ve doğrudan tema şablonunuza yapıştırmamayı seçerseniz, aşağıdaki satırları functions.phpve dosya adının ajaxcomments.js tema klasörünüzün kökünde.

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

İşte yorum formunu işlemek için Javascript (ya da yapabilirsin macunta görüntüle):

 // AJAXified yorumlama sistemi. jQuery ('belge'). hazır (işlev ($) { var commentform = $ ('# commentform'); // yorum formunu bulun. commentform.prepend ('
 
'); // geri bildirim veya hatalar sağlamak için formun önüne bilgi paneli ekleyin. var statusdiv = $ ('# comment-status'); // infopanel commentform.submit (function () { // form verilerini bir değişkende serileştirin ve saklayın. var formdata = commentform.serialize (); // Bir durum mesajı ekleyin. statusdiv.html ( '
 İşleme...  p>'); // İşlem URL'sini yorum formundan çıkarın. var formurl = commentform.attr ('eylem'); // Verileri içeren Formu Gönder. {(.Ajax, $ tür: 'post', url: formurl, veri: formdata, hata: işlev (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Alanlardan birini boş bırakmış veya çok hızlı gönderiyor olabilirsiniz 
'); }, başarı: işlev (veri, textStatus) { if (veri == "başarı") statusdiv.html ('
 Yorumunuz için teşekkür ederiz. Yanıtınız için teşekkür ederiz. 
 '); Başka. statusdiv.html ('
 Lütfen bir sonraki yorumunuzu göndermeden önce bir süre bekleyin 
'); commentform.find ( 'metinalanı [adı = açıklama]') val ( ''); } }); yanlış döndür; }); });

Kodu parçalamak için önce yorum formunun jQuery nesnelerini oluşturuyoruz (yorum formunuzun varsayılan "commentform" css kimliğine sahip olduğunu varsayar)ve daha sonra kullanıcıya yorumlarını gönderme ilerlemesiyle ilgili iletileri görüntülemek için kullanacağımız boş bir bilgi paneli ekliyoruz.

commentform.submit Gönder düğmesini "ele geçirmek" için kullanılır. Daha sonra form verilerini serileştiririz (uzun bir veri satırına dönüştürür);İşleme"Mesajını kullanıcıya iletin ve AJAX isteğiyle devam edin. AJAX isteği standart boyut, ama gerçekten bugün bu eğitimin kapsamı dışında değil - ya bir başarıya ya da hatası verir ve aynı yorumun yanlışlıkla yayınlanmasını önlemek için başarılı olursa formu temizler iki defa. Mesajları ve hataları uygun şekilde ayarlayın veya hata mesajlarının bir şekilde göze çarpmasını istiyorsanız temanızın stil sayfasına uygun bir stil ekleyin. Son satır - yanlış döndür - formun varsayılan işlemi tamamlamasını önler.

PHP İşleyici

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

(Ayrıca mevcut bu hamurda)

add_action ('comment_post', 'ajaxify_comments', 20, 2); işlev ajaxify_comments ($ comment_ID, $ comment_status) { if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // AJAX Talebi Varsa. Anahtar ($ comment_status) { case '0': // onaylanmamış yorumu moderatöre bildir. wp_notify_moderator ($ comment_ID); case '1': // Onaylanmış yorum. yankı "başarı"; $ 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 "error"; } çıkış; } }

Spot Sorunları

Sayfa AJAX aracılığıyla yayınlamak yerine hala yenileniyorsa, muhtemelen iki sorundan biri olabilir. Bir - jQuery yüklü olmayabilir. Yüklemek kundakçı Firebug'u IE, Safari, Chrome ve Opera'ya Yükleme Daha fazla oku veya Chrome geliştirici araçlarını etkinleştirin ve konsol günlüğünde hata olup olmadığı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 "yorum formu" olmamasıdır. Kaynak kodunu kontrol edin, ardından var commentform = $ (‘# yorum formu’) JavaScript'te doğru kimliğin doğru olmasını sağlayın - bu işe yarayabilir.

Her zamanki gibi elimden geldiğince daha fazla yardım etmek üzereyim, ancak lütfen hızlı bir şekilde bakabileceğim örnek bir URL'ye bağlantılar gönderin.