Tutorial Ajax WordPress

Ajax, kependekan dari Asynchronous JavaScript dan XML, adalah bahasa pengaturcaraan yang digunakan untuk menukar data dengan pelayan dan mengemas kini bahagian laman web yang berlainan tanpa memuatkannya semula. Walaupun Ajax disokong oleh WordPress, ia digunakan terutamanya di skrin pentadbiran untuk kemas kini segera. Menambah dan menghapus komen, menambah dan menghapus item dari senarai dan menyimpan skrin penyuntingan secara automatik semuanya dikendalikan oleh Ajax. Anda juga boleh menggunakan Ajax dalam tema WordPress anda. Sebenarnya, anda boleh menggunakan Ajax untuk mengubah banyak ciri tema anda.

1

Buka penyemak imbas Web kegemaran anda dan log masuk ke panel pentadbiran WordPress anda. Gunakan penyemak imbas fail untuk pergi ke folder tema anda. Buat fail HTML baru dan beri nama "test.html." Letakkan kod ini di dalam fail dan simpan:

Halaman ini hanya memaparkan butang standard. Ia mempunyai medan tersembunyi tepat di atas butang, tetapi ia akan memaparkan sesuatu hanya setelah kita membuat fungsi Ajax.

2

Buat folder baru dalam tema anda dan beri nama "skrip." Buat fail JavaScript baru di dalam folder skrip dan beri nama "my-ajax.js." Fail JavaScript ini akan digunakan oleh skrip Ajax.

3

Buka fail "functions.php" dan tambahkan kod ini untuk menambahkan fail JavaScript my-ajax.js ke tema:

fungsi add_myscript () {wp_enqueue_script ('my-ajax.js', get_bloginfo ('template_directory'). "/scripts/my-ajax.js", array ('jquery')); } add_action ('init', 'add_myscript');

4

Buka fail my-ajax.js dan tambahkan fungsi jQuery ajax () untuk membuat panggilan Ajax. Gunakan kod ini sebagai contoh:

jQuery (dokumen). Sudah (fungsi () {var salam = jQuery ("# ​​salam"). val (); jQuery ("# ​​push-me"). klik (function () {jQuery.ajax ({type: ' POST ', url:' //www.yoursite.com/wp-admin/admin-ajax.php ', data: {action:' myAjax ', salam: salam,}, kejayaan: fungsi (data, teksStatus, XMLHttpRequest) {jQuery ("# ​​test-div"). html (''); jQuery ("# ​​test-div"). append (data);}, ralat: fungsi (MLHttpRequest, textStatus, errorThrown) {alert (errorThrown); }});})); });

Ganti "www.yoursite.com" dengan alamat blog WordPress anda. Coretan kod ini menginisialisasi fungsi yang akan dijalankan ketika elemen "# push-me" diklik. Elemen push-me boleh menjadi apa sahaja, dari butang hingga pautan.

5

Buka fail functions.php dan tambahkan fungsi Ajax yang ingin anda laksanakan. Sebagai contoh, gunakan fungsi ringkas ini yang memaparkan mesej ucapan:

fungsi myAjax () {// dapatkan data dari ajax () panggil $ salam = $ _POST ['salam']; $ hasil = "

". $ salam."

"; // Return String die ($ hasil);} // buat panggilan Ajax baru untuk add_action WordPress ('wp_ajax_nopriv_myAjax', 'myAjax'); add_action ('wp_ajax_myAjax', 'myAjax');

Sentiasa gunakan "add_action" untuk membuat fungsi Ajax untuk memastikan mereka dikenali oleh sistem pengurusan kandungan. Ini membolehkan anda menggunakan fail "admin-ajax.php" yang ada.

6

Simpan dan tutup semua fail yang anda gunakan untuk tutorial ini. Navigasi ke "//www.yoursite.com/test.html" dan anda akan melihat butangnya. Klik butang dan "Hai pembaca yang dikasihi!" mesej akan terpapar di atasnya. Perhatikan bahawa halaman tidak dimuat semula, jadi fungsi Ajax anda berfungsi dengan sempurna.