Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Meningkatkan teknik Ajax untuk WordPress: pemrograman prosedural

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Arief Syahrir (you can also view the original English article)

Beberapa tahun yang lalu, saya menulis serangkaian post yang membahas bagaimana menggunakan Ajax di WordPress Frontend. Tujuan dari seri ini sederhana:

Kami akan memberikan gambaran singkat apa itu Ajax, cara kerjanya, bagaimana untuk memasangnya di depan, dan memahami hoot yang disediakan WordPress. Kita akan juga benar-benar membangun proyek kecil yang menempatkan teori ke dalam praktek. Kami akan berjalan melalui kode sumber dan kami juga akan membuat yakin itu tersedia di GitHub, juga.

Secara umum, seri memegang baik tapi, seperti halnya dengan semua perangkat lunak pengembangan terus-menerus, teknik, API, dan perubahan pendekatan. Selain itu, seperti tahun-tahun berlalu dan kami terus memperbaiki keterampilan kita, kita lebih baik pengembangan dan kita lebih baik mempekerjakan api baru.

Karena semua hal di atas, saya ingin untuk meninjau kembali konsep Ajax di WordPress sehingga Anda melihat beberapa API baru dan bagaimana untuk mempekerjakan mereka dalam pekerjaan sehari-hari Anda atau bagaimana refactor beberapa kode mungkin anda kerjakan sekarang.

Sebuah kata dari hati-hati sebelum Anda pergi terlalu jauh ke dalam tutorial ini: saya berasumsi bahwa Anda sudah membaca melalui rangkaian yang terhubung dalam pengenalan artikel ini, dan bahwa Anda memiliki beberapa pengalaman dengan membangun WordPress Plugin.

Mendefinisikan Plugin

Sebagai dengan WordPress plugin, itu penting untuk memastikan Anda mendefinisikan header sehingga WordPress akan dapat membaca file untuk memperkenalkan fungsi baru ke dalam inti aplikasi.

Saya menelepon variasi ini plugin Simple Ajax Demo, dan terletak di wp-content/plugin/wp-simple-ajax. Berkas pertama saya menciptakan berada di direktori root dari wp-simple-ajax dan disebut wp-simple-ajax.php.

Tampak seperti ini:

Kode harus jelas, terutama jika Anda digunakan untuk bekerja dengan WordPress Plugin; Namun, hal yang paling penting untuk mengerti adalah bahwa semua informasi di atas adalah apa yang akan mendorong apa yang dilihat pengguna di WordPress dashboard.

Itu adalah, pengguna akan melihat nama, deskripsi, dan versi plugin serta nama penulis (yang akan dihubungkan ke URL tertentu) ketika mereka disajikan dengan pilihan untuk mengaktifkan plugin.

Menambahkan WordPress Ajax File

Pada titik ini, plugin akan muncul di dashboard WordPress Plugin tetapi itu tidak akan benar-benar melakukan apa-apa karena kita tidak menulis kode apapun. Untuk membuat hal itu terjadi, kami akan mendekati plugin ini tertentu menggunakan pendekatan pemrograman prosedural daripada pendekatan berorientasi objek yang saya telah digunakan di sebagian besar tutorial saya.

Bagaimana kita awalnya menambahkan dukungan Ajax

Alasan untuk menghindari berorientasi objek pemrograman sekarang ada dua:

  1. Hal ini karena plugin akan menjadi sangat sederhana. Aku lebih tertarik pada berfokus pada api tertentu yang disediakan oleh WordPress sehingga Anda dapat fokus pada hal yang paling penting untuk fokus pada dalam pekerjaan Anda.
  2. Bagian kedua dari seri ini akan fokus pada refactoring kode ini ke dalam sistem yang berorientasi objek sehingga Anda dapat melihat bagaimana semua ini mungkin terlihat dalam konteks sistem yang lebih besar menggunakan classes.

Pada akhirnya, seri ini akan mencakup kedua jenis pemrograman yang didukung oleh PHP dan WordPress.

Kemungkinan besar, jika Anda telah bekerja dengan Ajax di masa lalu, maka Anda telah melakukan sesuatu seperti ini untuk memberikan dukungan untuk membuat panggilan asynchronous plugin Anda:

Metode khusus ini tidak salah, tapi itu mengabaikan beberapa API baru saya akan membahas sejenak. Ini juga mencampur PHP, HTML, dan JavaScript semua dalam satu fungsi.

Hal ini tidak besar karena mendapat pekerjaan, tetapi ada cara yang bersih untuk melakukan hal ini.

Bagaimana kita menambahkan Ajax Support

Pertama, untuk memastikan plugin yang tidak dapat langsung diakses oleh siapa saja, tambahkan bersyarat berikut hanya di bawah plugin header:

Catatan pembukaan PHP tag tidak akan diperlukan karena kode ini akan datang nanti dalam file PHP yang sudah ada sebelumnya (itu diperlukan untuk penyorotan sintaks sekarang).

Selanjutnya, mari kita mengatur fungsi untuk menyertakan WordPress dukungan Ajax melalui beberapa API yang sudah ada yang tidak melibatkan pencampuran bahasa.

Berikut adalah apa yang kita harus lakukan:

  1. Kita akan membuat fungsi bertanggung jawab untuk menambahkan dukungan Ajax.
  2. Kita akan menghubungkan fungsi ke dalam action wp_enqueue_script.
  3. Kami akan mengambil keuntungan dari panggilan wp_localize_script API dalam rangka untuk enqueue WordPress dukungan untuk Ajax (yang berasal dari admin-ajax.php).

Tampaknya mudah, bukan? Catatan Jika Anda memiliki pertanyaan, Anda selalu dapat menambahkan mereka di komentar. Memeriksa kode berikut untuk melihat jika Anda dapat mengikuti bersama:

Sekali lagi, perhatikan pembukaan PHP tag tidak akan diminta dalam versi final plugin, karena di sini hanya untuk mengambil keuntungan dari sintaks menyoroti fungsionalitas.

Dengan mengatakan itu, lihatlah wp_localize_script. Sebelum memeriksa setiap parameter, mari kita meninjau tujuan dari fungsi ini. Dari Codex, versi pendek adalah sebagai berikut:

Melokalisasi script terdaftar dengan data untuk variabel JavaScript.

Deskripsi lagi sangat penting, meskipun:

Hal ini memungkinkan Anda menawarkan terjemahan lokal yang benar setiap string yang digunakan dalam script Anda. Hal ini diperlukan karena WordPress saat ini hanya menawarkan lokalisasi API dalam PHP, tidak secara langsung dalam JavaScript.
Meskipun lokalisasi utama digunakan, dapat digunakan untuk membuat data yang tersedia bagi Anda script yang Anda biasanya dapat hanya mendapatkan dari sisi server Wordpress.

Sekarang meninjau parameter yang diterima:

  1. Parameter pertama adalah dirujuk sebagai handle dan digunakan untuk secara unik mengidentifikasi script yang sedang ditambahkan ke halaman.
  2. Parameter kedua adalah name, dan hal ini penting karena itu adalah bagaimana Anda akan mengidentifikasi script seluruh kode Anda. Anda akan melihat ini secara lebih rinci nanti dalam tutorial.
  3. Parameter ketiga adalah data parameter. Ia merujuk kepada sebuah array yang akan dikirim ke browser sebagai objek JavaScript. Karena kita melewati URL path ke file, dukungan Ajax akan diberikan.

Perhatikan parameter pertama adalah ajax script. Ini tetap diingat ketika kita mengalihkan perhatian kita untuk menulis dan enqueuing JavaScript kita sendiri, seperti yang kita harus menggunakan handle ini sekali lagi.

Juga ingat untuk membuat catatan dari nama yang telah Anda pilih untuk panggilan ke API, seperti yang kita akan menggunakan ini ketika bekerja dengan kode client-side kemudian dalam tutorial ini.

Catatan penting tentang Ajax Support

Perhatikan kita hanya menggunakan wp_enqueue_script hook dan kami tidak menggunakan admin_enqueue_script. Hal ini karena ajaxurl sudah didefinisikan di dashboard.

Ini berarti jika Anda ingin membuat request Ajax dalam wilayah administrasi Wordpress, maka Anda tidak perlu enqueue apa-apa. Segala sesuatu yang kita lakukan dalam konteks tutorial ini adalah khusus untuk front-end situs web.

Menyiapkan kode Server-Side Anda

Sekarang saatnya untuk menulis fungsi JavaScript yang akan dipanggil melalui Ajax. Ini bisa apa saja yang Anda inginkan, tetapi untuk tujuan plugin ini kita akan mengatur fungsi yang akan mengembalikan informasi tentang pengguna yang login ke situs.

Plugin akan melakukan hal berikut:

  • Membuat request ke server meminta informasi tentang pengguna saat ini.
  • Jika pengguna log in ke situs, itu akan kembali mengembalikan JSON informasi pengguna.
  • Jika pengguna tidak masuk, itu akan mengembalikan kode kesalahan.

Kita akan menggunakan objek console yang tersedia di sebagian besar browser modern, jadi pastikan Anda menggunakan Chrome, Safari, atau Firefox ketika bekerja dengan sumber JavaScript Anda akan menulis.

Membuat Request

Sekarang bahwa kita telah diuraikan persis bagaimana kode akan bekerja setiap kali pengguna membuat request Ajax ke server, mari kita mulai menulis fungsi untuk melakukan hal itu. Kita akan memanggilnya sa_get_user_information.

Implementasi fungsi akan datang kemudian dalam tutorial ini, tetapi takeaway utama dari kode di atas adalah bahwa kita telah terhubung ke wp_ajax_get_current_user_info dan wp_ajax_nopriv_get_current_user_info.

dua hook ini bagus didokumentasikan dalam Codex, tapi hook pertama akan memungkinkan orang-orang yang masuk ke situs untuk mengakses fungsi ini. Hook kedua akan memungkinkan orang-orang yang tidak login ke situs ini untuk mengakses fungsi ini.

Juga perhatikan semuanya setelah wp_ajax_ dan wp_ajax_nopriv_ adalah Anda, sebagai pengembang, untuk menentukan. Ini akan menjadi nama fungsi Anda menghubungi dari sisi klien seperti yang Anda lihat kemudian dalam tutorial ini.

Penanganan Request yang salah

Sebelum mengimplementasikan fungsi, sumber JavaScript file (yang belum ditulis) telah dipnaggil, dan kita perlu memastikan bahwa kita sudah mampu menangani kesalahan yang mungkin terjadi.

Dalam kasus kami, potensi kesalahan mungkin:

  1. Tidak ada yang masuk.
  2. ID pengguna tidak ada dalam sistem.

Hal ini sangat tidak mungkin kasus kedua akan menjadi kenyataan, tetapi ini akan membantu kami untuk mempelajari lebih lanjut tentang beberapa lagi api WordPress dan bagaimana kita dapat mengambil keuntungan dari mereka untuk menangani request yang keliru.

Hal pertama untuk memahami adalah WP_Error. Sebagaimana dengan banyak api, ini akan tersedia dalam Codex:

Instance WP_Error kode galat dan pesan yang mewakili satu atau lebih error, dan apakah variabel adalah instance dari WP_Error dapat ditentukan menggunakan fungsi is_wp_error().

Konstruktor akan menerima hingga tiga parameter (meskipun kita hanya akan menggunakan dua yang pertama):

  1. Argumen pertama adalah kode kesalahan. Ini adalah apa yang kita dapat menggunakan pada client-side untuk mengurai dan menentukan apa yang salah. Hal ini juga memungkinkan kita untuk menulis informasi ke log file dan seterusnya.
  2. Argumen kedua adalah pesan yang dapat menyertai kode kesalahan. Hal ini berguna jika kita ingin menampilkan pesan kepada pengguna.
  3. Argumen terakhir adalah array informasi, biasanya kode galat dan pesan. Terlepas dari itu, kami tidak akan menggunakan ini selama membuat kode kita.

Selanjutnya, kami akan mengirimkan hasil kesalahan kembali ke klien menggunakan fungsi yang disebut wp_send_json_error. Ini sangat mudah digunakan:

Kirim respons JSON kembali ke request Ajax, menunjukkan kegagalan. Objek respon akan selalu memiliki kunci sukses dengan nilai false. Jika sesuatu yang dilewatkan ke fungsi dalam $data parameter, itu akan di encoded sebagai nilai data Key.

Dengan menggabungkan WP_Error dan wp_send_json_error, kita dapat membuat fungsi yang akan membantu kita memberikan kode kesalahan JavaScript yang dipanggil di sisi server.

Sebagai contoh, katakanlah kita memiliki fungsi memberikan kesalahan jika pengguna tidak login ke situs web. Ini dapat dicapai dengan menggunakan fungsi berikut:

Pemberitahuan fungsi ditandai sebagai private meskipun dalam global namespace. Diawali dengan tanda garis bawah untuk menunjukkan fungsi ini harus dipertimbangkan menjadi private.

Kami akan meninjau kembali ini dalam artikel berikutnya.

Kedua, kita perlu untuk menangani kasus jika pengguna tidak ada. Untuk melakukan ini, kita dapat membuat sebuah fungsi yang melakukan berikut:

Kami sekarang memiliki dua fungsi, yang masing-masing akan mengirim informasi ke klien jika sesuatu telah gagal, tapi apa yang kita lakukan jika keduanya fungsi ini sukses?

Penanganan Request yang berhasil dipenuhi

Jika fungsi di atas tidak menghasilkan kesalahan, maka kita perlu memiliki cara untuk mengirimkan permintaan ke klien dengan pesan sukses dan informasi yang diminta.

Yaitu, kita perlu mengirim informasi ke klien yang mencakup informasi pengguna saat ini dalam JSON format.

Untuk melakukan ini, kita dapat mengambil keuntungan dari pesan wp_send_json_success. Itu persis apa yang Anda pikirkan itu akan dilakukan, terlalu:

Kirim respons JSON kembali ke request Ajax, menunjukkan keberhasilan. Objek respon akan selalu memiliki kunci sukses dengan nilai yang true. Jika semuanya sukses ke fungsi ini akan dikodekan sebagai nilai data Key.

Mari kita menggabungkan pekerjaan yang kita lakukan sejauh menulis fungsi JavaScript akan akhirnya memanggil dan yang memanfaatkan dua fungsi kecil kami telah meletakkan di atas. Pada kenyataannya, ini akan menjadi implementasi fungsi kita ditinggalkan sebelumnya dalam tutorial ini:

Jika pengguna masuk dan pengguna yang ada, maka kami akan mengirimkan pesan sukses kepada klien yang mengandung JSON representasi dari pengguna. Pada titik ini, itu adalah waktu untuk menulis beberapa JavaScript.

Request Client-Side

Pertama, tambahkan file bernama frontend.js ke root direktori plugin Anda. Pada awalnya, itu harus mencakup kode berikut:

Implementasi fungsi akan dibahas sejenak, tetapi kita perlu membuat yakin kita enqueuing ini JavaScript file dalam plugin, juga. Kembali ke sa_add_ajax_support fungsi dan tambahkan berikut di atas panggilan ke wp_localize_script:

Ingat script ini harus menangani sama seperti yang didefinisikan dalam wp_localize_script. Sekarang kita dapat mengunjungi kembali file JavaScript kami dan membuat panggilan ke kode server-side kami telah bekerja pada seluruh seluruh artikel ini.

Dalam frontend.js, tambahkan kode berikut:

Mengingat jumlah komentar dalam kode dan mengasumsikan Anda akrab dengan menulis WordPress Plugin dan memiliki beberapa pengalaman dengan Ajax, itu harus relatif mudah untuk diikuti.

Singkatnya, kode di atas membuat panggilan ke server-side ketika halaman load dan kemudian menulis informasi ke konsol peramban pengguna saat ini.

Jika pengguna log in, maka informasi ditulis ke konsol dalam bentuk objek JavaScript karena sudah di parsing dari JSON.

Jika, di sisi lain, pengguna tidak log in, maka objek lain akan ditulis keluar menampilkan kode galat bersama dengan pesan, semua yang Anda akan dapat lihat di konsol.

Kesimpulan

Sekarang, Anda harus jelas pemahaman tentang WordPress api telah tersedia untuk bekerja dengan request Ajax untuk pengguna yang masuk ke situs, dan untuk mereka yang tidak.

Pada akhirnya, tujuan kami seharusnya untuk menulis kode terbersih, paling maintainable mungkin sehingga kita memiliki kemampuan untuk terus bekerja dengan kode ini seperti kita bisa bergerak ke masa depan. Selain itu, kita harus menulis kode seperti ini sehingga orang lain yang dapat menyentuh basis kode yang kami memiliki pemahaman yang jelas tentang apa yang kita coba lakukan dan juga menggunakan praktek-praktek terbaik yang diberikan environment kita.

Dalam tutorial ini, saya menggunakan bentuk prosedural pemrograman untuk semua kode yang berbagi, menunjukkan, dan disediakan melalui GitHub. Seperti dijelaskan sebelumnya, tidak ada yang salah dengan ini, tapi saya pikir it's worth melihat apa yang ini tampak seperti dari perspektif object-oriented.

Dalam tutorial berikutnya, kita akan melihat refactoring kode ini ke dalam paradigma object-oriented yang juga mempekerjakan WordPress coding standard untuk lebih lanjut mendokumentasikan pekerjaan kami, dan yang menggunakan file jelas organisasi untuk membuat tulisan kita menajdi bersih dan jelas sebanyak mungkin .

Ingat, Anda dapat menangkap semua mata kuliah dan tutorial pada halaman profil saya, dan Anda dapat mengikuti saya di blog saya dan/atau Twitter di @tommcfarlin mana saya berbicara tentang pengembangan perangkat lunak dalam konteks Wordpress dan senang bercakap-cakap dengan orang lain tentang topik yang sama (serta sebagai hal-hal lain, terlalu).

Sementara itu, jangan ragu untuk meninggalkan pertanyaan atau komentar di feed di bawah dan saya akan merespon untuk menanggapinya masing-masing.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.