Cara Menggunakan Ajax di WordPress

Jika Anda memiliki basis pelanggan yang terlibat dan aktif untuk situs web Anda, Anda mungkin bertanya-tanya bagaimana Anda dapat memberikan pengalaman web yang benar-benar interaktif dan diperkaya untuk mereka. Menawarkan interaktivitas waktu nyata dapat menjadi daya tarik besar bagi audiens Anda.

Untungnya, JavaScript Asinkron dan XML (Ajax) adalah metode yang dapat didekati untuk menambahkan fitur interaktif ke situs web Anda. Untuk WordPress, Anda bahkan dapat menyederhanakan proses menggunakan plugin berbasis Ajax.

Pada artikel ini, kami akan memperkenalkan Anda ke Ajax dan cara kerjanya. Kami juga akan memandu Anda memulai dengan Ajax di WordPress. Ayo langsung masuk!

Apa Itu Ajax dan Bagaimana Cara Kerjanya?

Ajax menyatukan sejumlah bahasa pemrograman yang berbeda, seperti HTML, CSS, JavaScript, dan banyak lagi. Dalam aksinya, ia bekerja di belakang layar untuk menerima permintaan dari browser web, mengirimkannya ke server, dan mentransfer hasilnya kembali ke browser.

Sebagai pengguna web, Anda tidak akan tahu bahwa Ajax sedang bekerja. Anda hanya akan mendapatkan pengalaman yang sangat interaktif. Di situs Anda sendiri, misalnya, Anda dapat menggunakan Ajax untuk menerima suka pada kiriman dari pengguna yang masuk, dan menampilkan penghitungan waktu nyata.

Mengapa Ajax Berguna?

Dengan Ajax, pengguna tidak perlu memuat ulang halaman untuk melihat perubahan tertentu. Ini berarti situs Anda akan tetap cepat, dan memberikan pengalaman pengguna yang lebih lancar. Karena Ajax efisien, hanya mengirimkan data yang diperlukan bolak-balik, itu dapat memaksimalkan bandwidth dan menghindari transfer data yang lebih berat.

Sebagai pengguna web, kami menuai keuntungan dari Ajax sepanjang waktu. Salah satu contohnya adalah fungsi pencarian pelengkapan otomatis Google.

Contoh lain yang mungkin Anda kenal termasuk komentar Facebook dan suka Instagram. Ajax kemungkinan bekerja di mana pun Anda dapat berinteraksi dengan halaman web dan menerima informasi sebagai imbalan secara instan.

Memulai dengan Ajax di WordPress

Ketika datang ke WordPress, ada beberapa cara Ajax berguna. Pertama, kita akan melihat URL Ajax dan cara menggunakannya bersama hook fungsi WordPress.

URL Ajax di WordPress

Karena WordPress menggunakan Ajax secara default di dasbor admin, menambahkan lebih banyak fungsi Ajax di sana tidaklah sulit. Namun, jika Anda ingin menggunakan Ajax di ujung depan situs Anda, Anda perlu memahami cara kerja URL Ajax.

Di WordPress, file admin-ajax.php Anda memiliki URL. Ini memberikan informasi yang diperlukan untuk mengirim data untuk diproses, dan sangat penting untuk pengembangan Ajax front-end. WordPress menggunakan panggilan wp_localize_script() untuk menggunakan URL Ajax untuk menghubungkan fungsi JavaScript dan PHP, karena PHP tidak dapat secara langsung mencerminkan ini tanpa bantuan.

Cara Menggunakan Ajax Action Hook di WordPress

WordPress menggunakan pengait dalam pemrogramannya, sebagai cara bagi plugin dan tema untuk berinteraksi dengan WordPress Core. Hooks terdiri dari dua jenis: 'actions' dan 'filters'. Dengan Ajax, Anda akan menggunakan action hook untuk menjalankan fungsi.

Tindakan memungkinkan Anda menambahkan data ke WordPress atau mengubah cara kerjanya. Dengan Ajax, Anda akan menggunakan tindakan wp_ajax_(action). Fungsi khusus kemudian dapat dihubungkan ke ini, untuk dieksekusi selama panggilan Ajax.

Misalnya, contoh kode WordPress ini menunjukkan bagaimana panggilan Ajax dan objek JavaScript dapat digabungkan dalam file yang sama untuk menjalankan suatu tindakan:

<?php

add_action( 'wp_ajax_my_action', 'my_action' );

fungsi my_action() {
global $wpdb; // beginilah cara Anda mendapatkan akses ke database

$terserah = intval( $_POST['terserah'] );

$terserah += 10;

gema $terserah;

wp_mati(); // ini diperlukan untuk segera mengakhiri dan mengembalikan respons yang tepat
}

Anda juga dapat membuat file JavaScript terpisah untuk tindakan Ajax Anda. Anda hanya perlu memastikan untuk menggunakan URL Ajax, sehingga panggilan tidak hilang.

Cara Menggunakan Ajax dengan Menggunakan Contoh Plugin (3 Langkah)

Jika Anda ingin bereksperimen dengan Ajax, cara terbaik adalah membuat plugin dengannya. Untungnya, ada banyak contoh kode atau plugin telanjang di luar sana yang bisa Anda mulai. Untuk contoh ini, kita akan menggunakan beberapa contoh kode WordPress Plugin Boilerplate yang dapat diunduh.

Langkah 1: Buat Struktur File yang Sesuai

Pertama, Anda harus memberi nama plugin Anda dan membuat struktur file yang sesuai untuknya. Nama harus unik, dan tidak bertentangan dengan alat lain di Direktori Plugin WordPress. Itu karena ketika pengguna mengunggah plugin Anda, itu akan masuk ke direktori wp-content/plugins/ mereka.

Setelah Anda memutuskan nama, Anda perlu membuat setidaknya tiga file berikut di direktori wp-content/plugins/ Anda sendiri:

• nama-plugin.php
• nama-plugin.js
• nama-plugin.css

Anda ingin meletakkan file .php di folder plugin baru Anda, dan membuat subfolder terpisah untuk tempat tinggal file JavaScript dan CSS. Semua file yang diperlukan agar plugin Anda berfungsi harus ditempatkan di folder master yang sama.

Pada langkah selanjutnya, Anda akan melihat bahwa kode contoh yang kami gunakan dilengkapi dengan struktur file yang telah dibuat sebelumnya. Namun, menurut kami penting untuk memahami cara memulai dari awal, dan mengapa file Anda perlu disusun dengan cara tertentu.

Langkah 2: Pilih Beberapa Contoh Kode untuk Memulai

Menggunakan file kode sampel adalah tempat yang baik untuk memulai saat mencoba Ajax pada plugin pertama Anda. Namun, Anda selalu ingin memeriksa ulang kode sampel Anda untuk memastikannya aman dan tidak mengandung kesalahan.

Seperti yang kami sebutkan sebelumnya, kami akan menggunakan WordPress Plugin Boilerplate untuk contoh kami. Kode contoh ini dikemas dengan file yang Anda perlukan untuk melengkapi plugin Anda.

Plugin sampel ini juga mematuhi standar pengkodean dan dokumentasi WordPress. Anda dapat mengunduh file .zip plugin dari situs web boilerplate untuk memulai.

Langkah 3: Kaitkan Tindakan ke dalam Kode Anda

Kode sampel plugin yang kami gunakan dibuat dengan Pemrograman Berorientasi Objek (OOP). Ini membantu pemrogram mengatur kode mereka, dan menciptakan pola pengembangan yang mudah dibagikan dan digunakan kembali.

Selain itu, kode dikemas dengan semua file yang diperlukan untuk pengembangan plugin, termasuk file aktivasi dan deaktivasi di direktori /includes/ . Anda juga akan mudah menemukan file yang menghadap publik dan yang menghadap admin sesuai kebutuhan.

Mari kita lihat contoh plugin kita, dengan melihat bagian awal dari file plugin-name.php :

<?php

/**
* File bootstrap plugin
*
* File ini dibaca oleh WordPress untuk menghasilkan informasi plugin di plugin
*bidang administrasi. File ini juga menyertakan semua dependensi yang digunakan oleh plugin,
* mendaftarkan fungsi aktivasi dan penonaktifan, dan mendefinisikan suatu fungsi
* mendaftarkan fungsi aktivasi dan penonaktifan, dan mendefinisikan suatu fungsi
* yang memulai plugin.
*
* @tautan http://contoh.com
* @sejak 1.0.0
* @paket Plugin_Name
*
* @wordpress-plugin
* Nama Plugin: Boilerplate Plugin WordPress
* Plugin URI: http://example.com/plugin-name-uri/
* Deskripsi: Ini adalah deskripsi singkat tentang apa yang dilakukan plugin. Itu ditampilkan di area admin WordPress.
* Versi: 1.0.0
* Penulis: Nama Anda atau Perusahaan Anda
* Penulis URI: http://example.com/
* Lisensi: GPL-2.0+
* URI Lisensi: http://www.gnu.org/licenses/gpl-2.0.txt
* Domain Teks: nama plugin
* Jalur Domain: / bahasa
*/

Semua informasi yang terkandung dalam bagian kode ini penting untuk mendaftarkan plugin Anda ke WordPress. Ini adalah bagaimana direktori plugin akan mengetahui apa yang ditampilkan untuk plugin Anda.

Sekarang Anda harus melakukan beberapa hal untuk menghubungkan semua titik, termasuk:

• Pastikan URL Ajax Anda tersedia untuk skrip Anda. Anda dapat menggunakan wp_localize_script() untuk melakukannya.
• Buat kelas plugin-name dengan class Plugin-Name{} di file plugin-name.php Anda. Di sinilah Anda akan menentukan kait tindakan Anda.
• Buat fungsi JavaScript yang sesuai di file plugin-name.js Anda.

Salah satu elemen penting dari pendekatan Ajax adalah menentukan siapa yang dapat menggunakan setiap fungsi, terutama saat membuat interaktivitas front-end. Kami akan mengaitkan aksi front-end dengan beberapa contoh kode dari WordPress:

jika ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action' );
// Tambahkan kait aksi back-end lainnya di sini
} kalau tidak {
// Tambahkan hook aksi front-end non-Ajax di sini
}

Mari perhatikan beberapa hal dalam contoh ini. Pertama, tindakan ini akan tersedia untuk semua orang di situs, apakah mereka masuk ke akun atau tidak. Itu ditunjukkan dengan panggilan 'wp_ajax_nonpriv_()'. Kedua, Anda dapat melihat bahwa ada juga back-end, tindakan administratif yang dikaitkan selama tindakan front-end.

Untuk memahami proses yang terjadi dalam rangkaian tindakan ini, penting juga untuk mengetahui bahwa my_frontend_action akan memicu fungsi PHP my_frontend_action_callback().

Langkah 4: Uji dan Debug Plugin Anda

Setelah Anda mengatur semua kait tindakan dan fungsi terkait yang Anda perlukan, Anda akan ingin menguji dan berpotensi men-debug plugin Anda (jika ada masalah). Host web Anda mungkin menawarkan alat debugging sebagai bagian dari paket hostingnya.

Di sini, di WP Engine, kami menyediakan WP Engine Error Log untuk membantu Anda menemukan titik masalah.

Log kesalahan kami menyediakan panduan berkode warna dari setiap kesalahan dalam kode situs Anda, dan di mana mereka berinteraksi dengan server kami atau bagian lain dari situs Anda. Ini membuat pemecahan masalah jauh lebih mudah, apakah Anda bekerja dengan Ajax atau yang lainnya sama sekali.

Jelajahi Sumber Daya & Alat Mesin WP Lainnya

Sekarang Anda sedang dalam proses membuat plugin WordPress yang luar biasa dengan Ajax, Anda mungkin ingin menilai alat apa lagi yang Anda perlukan. WP Engine menawarkan Digital Experience Platform (DXP) yang lengkap, dan hadir untuk membantu Anda membuat plugin baru untuk WordPress.

Apakah Anda tertarik dengan WP Engine Error Log kami sehingga Anda dapat menjalankan plugin bebas bug, atau Anda hanya memerlukan hosting WordPress yang solid dan aman, kami menawarkan beragam paket dan sumber daya untuk Anda gunakan!