Cara AJAX-ify Komentar WordPress Anda

Iklan

Secara default, sistem komentar WordPress sangat tidak memadai - salah satu keberatan terbesar saya adalah bahwa untuk mengirim komentar, halaman perlu di-refresh. Anda dapat beralih ke sistem pihak ketiga seperti Livefyre [Broken URL Dihapus] atau Disqus 3 Cara untuk Mendorong Komentar di Blog Wordpress AndaMendapatkan komentar di blog Anda adalah motivator yang bagus untuk membuat Anda terus melanjutkan perjalanan panjang blogging. Hanya mengetahui bahwa ada seseorang di luar sana, menghargai pekerjaan Anda terasa hebat, tetapi tidak ... Baca lebih banyak , tetapi jika Anda lebih suka menyimpan semuanya di rumah atau melakukan beberapa jenis penyesuaian lainnya, maka memposting komentar oleh AJAX adalah yang paling harus Anda lakukan.

Anda dapat melihat contohnya di sini Menggunakan - ketika Anda memposting komentar, Anda tidak akan meninggalkan halaman - sebagai gantinya kami akan mengirimkannya melalui panggilan AJAX, dan kemudian mengirim cepat “Terima kasih”Catat kembali. Baca terus untuk tutorial lengkap.

Untuk menggunakan fungsi non-WordPress sebagai AJAX, baca saya tutorial sebelumnya Tutorial Menggunakan AJAX Di WordPressAJAX adalah teknologi web luar biasa yang menggerakkan kami melampaui “tautan klik, buka halaman lain” yang sederhana struktur Internet 1.0. Ini memungkinkan situs web untuk secara dinamis mengambil dan menampilkan konten tanpa pengguna ... Baca lebih banyak , dan pastikan untuk memeriksa semua artikel terkait WordPress.

pengantar

Ada dua bagian terpisah yang diperlukan untuk membuat komentar WordPress AJAX bekerja, jadi mari kita jelaskan yang pertama untuk memberi Anda gambaran umum dari keseluruhan proses.

• Beberapa Javascript pada halaman yang mencegat pengguna mengklik Tambahkan komentar tombol kirim, yang juga membuatnya menjadi panggilan AJAX dan juga menangani respons.
• Pawang PHP yang menghubungkan ke aksi comment_post

Javascript

Pertama, ini akan dibutuhkan jQuery, Seperti halnya apa pun yang jauh menarik dalam pengembangan web saat ini. Jika Anda tidak yakin apakah itu sudah dimuat, lanjutkan dan lewati ke kode Javascript dan coba lagi - jika Anda memiliki Firebug dan log konsol mengatakan "jQuery tidak terdefinisi”Ketika Anda menyegarkan halaman, lalu tambahkan baris ini ke file functions.php Anda untuk memastikannya dimuat.

function 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"), Salah); wp_enqueue_script ('jquery'); }} add_action ('wp_print_scripts', 'google_jquery');

Perhatikan, itu cara rumit memuat jQuery karena kami akan menggunakan versi terbaru dari Google CDN, yang lebih cepat dan lebih banyak lagi hingga tanggal daripada yang disertakan secara default dengan WordPress - jadi mungkin ide yang baik untuk menambahkannya meskipun jQuery sudah dimuat di tempat lain.

Sekarang, untuk Javascript aktual yang akan menangani formulir komentar, kami memiliki beberapa opsi. Cara termudah adalah dengan hanya menempelkan kode ke single.php template - dengan asumsi Anda tidak mengaktifkan komentar untuk halaman juga.

Atau, Anda dapat menempelkan yang sudah ada .js file yang digunakan oleh tema Anda, atau buat a .js baru file dalam direktori tema Anda. Jika Anda memilih untuk memasukkannya ke file .js Anda sendiri dan tidak menempelkannya langsung ke template tema Anda, pastikan untuk menambahkan baris berikut ke file Anda. functions.php, dan perhatikan nama file diasumsikan ajaxcomments.js di root folder tema Anda.

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

Berikut ini adalah Javascript untuk menangani formulir komentar (atau kamu bisa lihat di pastebin):

 // sistem komentar AJAXified. jQuery ('document'). ready (function ($) { var commentform = $ ('# commentform'); // temukan formulir komentar. commentform.prepend ('
 
'); // tambahkan panel info sebelum formulir untuk memberikan umpan balik atau kesalahan. var statusdiv = $ ('# comment-status'); // tentukan infopanel commentform.submit (function () { // membuat serial dan menyimpan data formulir dalam sebuah variabel. var formdata = commentform.serialize (); // Tambahkan pesan status. statusdiv.html ('
 Memproses... 
'); // Ekstrak URL tindakan dari bentuk komentar. var formurl = commentform.attr ('action'); // Formulir Posting dengan data. $ .ajax ({ ketik: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Anda mungkin mengosongkan salah satu bidang, atau memposting terlalu cepat 
'); }, sukses: fungsi (data, textStatus) { jika (data == "sukses") statusdiv.html ('
 Terima kasih atas komentar Anda. Kami menghargai tanggapan Anda. 
 '); lain. statusdiv.html ('
 Harap tunggu beberapa saat sebelum memposting komentar Anda berikutnya 
'); commentform.find ('textarea [name = comment]'). val (''); } }); return false; }); });

Untuk memecah kode, pertama-tama kita membuat objek jQuery dari formulir komentar (yang mengasumsikan bentuk komentar Anda memiliki ID css default dari "commentform"), dan menambahkan panel info kosong di atasnya yang nantinya akan kami gunakan untuk menampilkan pesan kepada pengguna tentang kemajuan memposting komentar mereka.

komentarform.submit digunakan untuk 'membajak' tombol kirim. Kami kemudian membuat cerita bersambung data formulir (mengubahnya menjadi satu garis panjang data), memberikan "Pengolahan”Pesan kepada pengguna di panel info itu, dan lanjutkan dengan permintaan AJAX. Permintaan AJAX adalah a format standar, tetapi tidak benar-benar dalam lingkup tutorial ini hari ini - cukup untuk mengatakan itu bereaksi terhadap kesuksesan atau kesalahan, dan mengosongkan formulir jika berhasil mencegah komentar yang sama diposting secara tidak sengaja dua kali. Sesuaikan pesan dan kesalahan yang sesuai, atau tambahkan beberapa gaya yang sesuai ke stylesheet tema Anda jika Anda ingin pesan kesalahan menonjol. Baris terakhir - kembali salah - mencegah formulir agar tidak menyelesaikan tindakan defaultnya.

Penangan PHP

Terakhir, kami membutuhkan sesuatu untuk mencegah penyegaran halaman dan mengirim respons yang sesuai kembali ke pengguna serta memberi tahu admin jika komentar perlu dimoderasi, atau memberi tahu penulis tentang komentar baru. Untuk ini, kami menghubungkan ke comment_post tindakan yang terjadi tepat setelah ditambahkan ke database, dan mendeteksi apakah itu permintaan AJAX. Tambahkan ini ke functions.php mengajukan:

(Juga tersedia di pastebin ini)

add_action ('comment_post', 'ajaxify_comments', 20, 2); function ajaxify_comments ($ comment_ID, $ comment_status) { if (! kosong ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Jika AJAX Meminta Maka. beralih ($ comment_status) { huruf '0': // beri tahu moderator tentang komentar yang tidak disetujui. wp_notify_moderator ($ comment_ID); huruf '1': // Komentar yang disetujui. gema "sukses"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); istirahat; default: echo "error"; } keluar; } }

Masalah Tempat

Jika halaman masih menyegarkan dan bukannya memposting melalui AJAX, itu mungkin salah satu dari dua masalah. Satu - Anda mungkin tidak memuat jQuery. Install Pembakar Cara Memasang Firebug di IE, Safari, Chrome & Opera Baca lebih banyak , atau aktifkan alat pengembang Chrome, dan periksa log konsol untuk kesalahan. Jika jQuery tidak ditemukan, kembali ke bagian JavaScript dan baca bit pertama tentang menambahkan jQuery ke tema Anda. Kemungkinan kedua adalah bahwa tema Anda melakukan sesuatu yang istimewa pada formulir komentar dan ID itu tidak lagi berupa "bentuk komentar". Periksa kode sumber, lalu sesuaikan var commentform = $ (‘# commentform’) baris dalam JavaScript untuk menjadi ID yang benar - yang mungkin berfungsi.

Seperti biasa, saya ada untuk membantu lebih lanjut sebanyak yang saya bisa, tapi tolong kirim tautan ke contoh URL tempat saya bisa melihat sekilas.