Menggunakan AJAX dengan PHP di Situs WordPress Anda dengan Plugin Anda Sendiri
Diterbitkan: 2021-07-23
Pada artikel ini kita membahas tentang AJAX dengan PHP untuk website WordPress Anda.
AJAX adalah teknik untuk pengembangan web yang membantu pengguna untuk mengembangkan aplikasi interaktif di situs web. Ini memberi pengguna pengalaman web yang lebih cepat dan lebih lancar. Ini memungkinkan pengguna untuk membuat perubahan atau memperbarui konten di halaman web tanpa memuat ulang atau menyegarkan halaman. Seseorang perlu mengetahui berbagai bahasa pemrograman untuk bekerja dengan AJAX.
Apa itu AJAX?
AJAX adalah singkatan dari 'Asynchronous JavaScript and XML'. Seperti disebutkan sebelumnya, ini digunakan untuk membuat aplikasi web yang menghibur, selalu berubah, dan interaktif.
Beberapa contoh aplikasi web populer yang dikembangkan dengan bantuan AJAX dan teknologi terkait adalah Google Maps, fitur pelengkapan otomatis pada pencarian Google, komentar, dan suka di berbagai posting media sosial, dan banyak lainnya.
Dasar-dasar AJAX
Ajax dengan bantuan berbagai bahasa pemrograman seperti JavaScript, HTML, CSS, dan XML mengembangkan aplikasi web dan situs web yang lebih cepat dan lebih baik. Selain bahasa pemrograman ini, untuk pengembangan aplikasi web, AJAX dengan PHP dan bahasa sisi server lainnya juga digunakan.
Ini menggunakan JavaScript untuk tampilan konten, sedangkan CSS membantu dalam presentasi dan Model Objek Dokumen. Lebih lanjut menggunakan XHTML untuk konten.
Dalam aplikasi web atau halaman web tradisional, informasi dipertukarkan dengan server secara sinkron. Di sisi lain, dalam aplikasi web, yang telah dirancang untuk menggunakan AJAX, ketika terjadi peristiwa seperti mengklik tombol atau mengisi formulir, JavaScript membuat permintaan XMLHTTP dan mengirimkannya ke server dalam format XML.
Server memproses permintaan membuat sisi server respons dan mengirimkannya kembali ke browser. JavaScript kemudian memproses respons dan konten di layar tampilan saat ini diperbarui. Karena memuat ulang atau menyegarkan halaman tidak diperlukan, pengguna tidak akan menyadari mentransfer informasi apa pun ke server.
Keterampilan yang dibutuhkan untuk bekerja dengan AJAX di WordPress
Seperti yang dipahami dari diskusi di atas, pengguna memerlukan keterampilan berikut untuk memanfaatkan AJAX dengan benar.
• Pengetahuan tentang bahasa pemrograman seperti JavaScript, HTML, dan CSS
• Kemahiran dalam bahasa sisi server seperti PHP dan lainnya
• Dasar-dasar XML atau JSON
Keuntungan dari AJAX
Berbagai keunggulan AJAX dibahas di bawah ini
• Hampir mendukung semua browser yang digunakan saat ini
• Ini melibatkan waktu respons yang lebih cepat, yang berarti peningkatan pengalaman pengguna dalam hal kecepatan dan kinerja
• Pustaka JavaScript sumber terbuka seperti Prototipe, jQuery, dll tersedia untuk digunakan
• Ini mengurangi waktu antara klien dan server, oleh karena itu waktu kedua pengguna, serta server, disimpan
• Karena server tidak diperlukan untuk memproses banyak data, ini membantu dalam mengurangi penggunaan bandwidth dan mengoptimalkan operasi jaringan.
• Karena permintaan XMLHTTP digunakan untuk mengambil data, pengguna dapat melakukan banyak tugas secara bersamaan.
AJAX di WordPress
AJAX digunakan di backend WordPress, sebagai akibatnya, setiap kali ada perubahan yang dilakukan pada posting atau kategori, atau setiap kali admin memoderasi komentar, pembaruan akan dilakukan secara instan. AJAX sebagian besar digunakan dengan JQuery di WordPress. Proses di mana WordPress menggunakan AJAX adalah sebagai berikut
• Saat permintaan dibuat, permintaan melewati file 'admin-ajax.php' yang terletak di folder 'wp-admin'.
• Permintaan ini diperlukan untuk menyediakan setidaknya sepotong data, yang juga disebut 'aksi' secara umum, dengan menggunakan metode 'dapatkan' atau 'kirim'.
• Tindakan ini meminta kode dalam file 'admin-ajax.php' untuk membuat dua kait, yaitu, 'wp_ajax_my_action' dan 'wp_ajax_nopriv_my_action'. 'my_action' di kait ini menunjukkan nilai variabel 'action' dari metode 'get' atau 'post'.
• Sementara kait pertama dimaksudkan untuk tindakan yang diambil oleh pengguna yang masuk, kait kedua dimaksudkan khusus untuk pengguna yang keluar.
• Fungsi yang terhubung harus direncanakan untuk degradasi yang baik, yang memastikan bahwa meskipun JavaScript dinonaktifkan pada browser, kode akan tetap berfungsi.
Buat Plugin AJAX WordPress
Di bagian ini, mari kita ambil contoh plugin WordPress AJAX dasar yang disebut 'Post Likes Counter'. Plugin ini mencakup fitur-fitur berikut:
• Ini diperbarui secara instan di frontend
• Pengguna yang masuk diizinkan untuk menyukai kiriman.
• Jika pengguna yang keluar mencoba menyukai kiriman, pesan kesalahan akan muncul di layar
• Plugin ini membantu dalam menjaga catatan total jumlah 'suka' dan menampilkannya
Pertama, plugin WordPress kosong harus dibuat dan diaktifkan. Untuk membuat plugin, langkah-langkah berikut perlu dilakukan.
Langkah 1 : Pilih nama unik untuk plugin. Seseorang dapat memeriksa repositori plugin untuk memastikan bahwa nama plugin yang diusulkan sudah tidak digunakan. Biasanya, pengembang plugin memilih nama plugin berdasarkan fungsi yang seharusnya dijalankan.
Langkah 2 : Pada langkah selanjutnya, file PHP diperlukan untuk dibuat menggunakan nama plugin yang dipilih. Sebagai pengguna yang akan menginstal plugin ini, perlu menempatkan file PHP di direktori plugin WordPress 'wp-content/plugins-' untuk instalasinya, plugin tidak dapat berbagi nama yang sama untuk file PHP.
Oleh karena itu, nama file plugin juga harus unik untuk menghindari konflik dengan plugin lain di repositori. Seseorang dapat menggunakan nama mereka atau nama perusahaan mereka di awalan untuk membuat nama unik untuk file PHP.
Langkah 3 : Perlu dicatat bahwa plugin WordPress harus berisi setidaknya satu file PHP bersama dengan JavaScript, CSS, bahasa dan file gambar. Jika ada beberapa file, pilih nama unik untuk direktori dan nama yang disukai untuk file PHP utama.
Tempatkan semua file plugin ke dalam direktori yang dibuat dan minta pengguna plugin untuk mengunggah seluruh direktori ini ke direktori 'wp-content/plugins/'.
Instalasi WordPress dapat dikonfigurasi untuk mengubah direktori plugin standar 'wp-content/plugins/'. Oleh karena itu, seseorang harus menggunakan plugin_dir_path() dan plugin_url() dor path absolut dan URL dalam kode PHP mereka.
Templat Posting Tema
Setelah membuat plugin, seseorang perlu menemukan template posting 'single.php' dari tema mereka. Itu dapat ditemukan di direktori root dari tema yang aktif. Ini digunakan ketika satu posting ditanyakan; di mana seseorang ingin menempatkan plugin 'Post Like Counter' mereka. File harus tetap terbuka untuk diedit.
Siapkan Template Posting yang siap untuk panggilan AJAX
Tautan harus dibuat agar pengguna dapat menyukai postingan. Jika pengguna mengaktifkan JavaScript, mereka dapat menggunakan file JavaScript (yang akan dibuat nanti) atau yang lain, mereka dapat mengikuti tautan secara langsung. Untuk tujuan ini, masukkan kode berikut ke dalam file 'single.php'. Kode ini juga dapat ditambahkan ke salah satu bagian template yang berisi file 'single.php'.
// Nilai kunci meta 'suka' akan menyimpan jumlah suka total untuk posting tertentu, itu akan menunjukkan 0 jika itu adalah string kosong ID, "suka", benar); $suka = ($suka == "") ? 0 : $suka; ?> Postingan ini memiliki <span id='like_counter'></span> suka<br> // Menautkan ke file admin-ajax.php. Termasuk cek nonce untuk keamanan ekstra. Perhatikan kelas "user_like" untuk klien yang mengaktifkan JS. ID.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' . $tautan. '">Suka Postingan ini</a>'; ?>
Mengatasi Panggilan Ajax tanpa JavaScript
Dengan mengklik link yang dibuat pada langkah sebelumnya, satu akan diteruskan ke skrip 'admin-ajax.php'; namun, mereka tidak akan menemukan hasil yang berguna, karena fungsi tidak dibuat untuk menjalankan tindakan. Untuk membuat fungsi di file plugin dan menambahkannya ke hook yang dibuat oleh WordPress, masukkan kode berikut.
<?php // digunakan di sini hanya untuk mengaktifkan penyorotan sintaks. Tinggalkan ini jika sudah disertakan dalam file plugin Anda.
// tentukan tindakan untuk dua kait yang dibuat, pertama untuk pengguna yang masuk dan yang berikutnya untuk pengguna yang keluar
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "please_login");
// tentukan fungsi yang akan diaktifkan untuk pengguna yang masuk
fungsi my_user_like() {
// jangan periksa lapisan keamanan tambahan, fungsi akan keluar jika gagal
if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_like_nonce")) {
exit("Guk Guk Guk");
}
// ambil like_count untuk postingan, set ke 0 jika kosong, tambah 1 saat klik terdaftar
$like_count = get_post_meta($_REQUEST["post_id"], "suka", benar);
$like_count = ($like_count == ') ? 0 : $like_count;
$new_like_count = $like_count + 1;
// Perbarui nilai 'suka' kunci meta untuk posting yang ditentukan, membuat data meta baru untuk posting jika tidak ada
$suka = update_post_meta($_REQUEST["post_id"], "suka", $new_like_count);
// Jika tindakan di atas gagal, jenis hasil disetel ke 'error' dan like_count disetel ke nilai lama, jika berhasil, perbarui ke new_like_count
if($suka === salah) {
$result['type'] = "kesalahan";
$hasil['like_count'] = $like_count;
}
kalau tidak {
$result['type'] = "sukses";
$result['like_count'] = $new_like_count;
}
// Periksa apakah tindakan dipicu melalui panggilan Ajax. Jika ya, kode JS akan dipicu, jika tidak, pengguna akan diarahkan ke halaman posting
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) & amp;& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$hasil = json_encode($hasil);
echo $hasil;
}
kalau tidak {
header("Lokasi: ".$_SERVER["HTTP_REFERER"]);
}
// jangan lupa untuk mengakhiri skrip Anda dengan fungsi die() - sangat penting
mati();
}
// tentukan fungsi yang akan diaktifkan untuk pengguna yang keluar
fungsi silahkan_login() {
echo "Anda harus login untuk menyukai";
mati();
}
Jika semuanya berhasil, ketika pengguna yang masuk akan mengklik tautan 'sukai posting ini', jumlah suka akan diperbarui secara otomatis. Di sisi lain, jika JavaScript dinonaktifkan, halaman akan disegarkan dengan menampilkan jumlah 'suka' yang diperbarui.
Menambahkan dukungan untuk JavaScript
Menambahkan dukungan untuk JavaScript dapat membuat segalanya lebih mudah. Untuk menggunakan AJAX dengan PHP di WordPress, seseorang harus membuat enqueue library jQuery bersama dengan file JavaScript kustom dari plugin. Untuk tujuan ini, tulis kode berikut di plugin.
admin_url('admin-ajax.php' )));
// antrekan perpustakaan jQuery dan skrip yang Anda daftarkan di atas
wp_enqueue_script('jquery');
wp_enqueue_script('suka_skrip');
}
Selanjutnya, file Javascript 'liker_script.js' harus dibuat, yang selanjutnya akan diunggah di folder root plugin. Kode berikut digunakan untuk membuat file 'liker_script.js'.
jQuery(dokumen).siap(fungsi() {
jQuery(".user_like").click( function(e) {
e.preventDefault();
post_id = jQuery(ini).attr("data-post_id");
nonce = jQuery(ini).attr("data-nonce");
jQuery.ajax({
ketik : "posting",
tipe data : "json",
url: myAjax.ajaxurl,
data : {action: "my_user_like", post_id : post_id, nonce: nonce},
sukses: fungsi(respons) {
if(respons.type == "berhasil") {
jQuery("#like_counter").html(response.like_count);
}
kalau tidak {
alert("Suka Anda tidak dapat ditambahkan");
}
}
});
});
});
Bagaimana menerapkan AJAX dalam tema WordPress
Langkah-langkah berikut akan membantu dalam mengimplementasikan AJAX dengan PHP di tema WordPress. Sebagai contoh, mari kita asumsikan bahwa pekerjaan kita adalah menampilkan kategori dalam menu drop-down dan mengklik 'Kategori Induk', subkategori akan muncul di kotak drop-down lain. Tugas ini akan diselesaikan dengan bantuan langkah-langkah berikut:
Langkah 1 : Pilih 'kategori' di sisi kiri dasbor, dan masukkan nama kategori di kotak yang muncul di sisi kanan dan masukkan slug kategori di bawah. Jika kategori induk sedang dibuat, pilih 'tidak ada', atau jika subkategori sedang dibuat, pilih kategori induk dari opsi.
Langkah 2 : Pada langkah ini, template WordPress akan dibuat di mana fungsionalitas AJAX akan diimplementasikan. Buka file PHP baru dan simpan. Masukkan kode berikut di halaman yang dibuat.
Dalam kode di atas, 'Nama Template: Implement Ajax', adalah nama template WordPress dan fungsi 'get_header()' dan 'get_footer()' digunakan untuk menampilkan konten header dan footer halaman.
Pertama, file perpustakaan jQuery diperlukan untuk dimasukkan dalam halaman yang akan membantu dalam menambahkan hal-hal AJAX. AJAX dengan PHP seseorang dapat menggunakan pustaka JavaScript apa pun atau dapat memanggil AJAX dengan JavaScript mentah. Dalam contoh berikut, library JavaScript jQuery digunakan untuk mengimplementasikan AJAX.
Langkah 3 : Tambahkan file jQuery di template dan panggil fungsi 'wp_dropdown_categories' sehingga kategori induk di menu drop-down dapat diambil.
#konten{lebar:otomatis; tinggi: 400 piksel; margin:50px;}
<div>
</div>
<?php
Langkah 4 : Masukkan kode jQuery untuk mendapatkan ID kategori utama yang sedang dipilih. Kirim ke file 'functions.php' untuk mendapatkan subkategori di bawah ID kategori induk yang dipilih. Hasilnya kemudian dapat dikirim kembali ke halaman tanpa menyegarkannya.
$(fungsi(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
// panggil ajax
$("#sub_cat").kosong();
$.ajax({
url:"/wp-admin/admin-ajax.php",
ketik: 'POST',
data:'action=my_special_action&main_catid=' + $mainCat,
sukses:fungsi(hasil)
{
// peringatan(hasil);
$("#sub_cat").removeAttr("dinonaktifkan");
$("#sub_cat").append(hasil);
}
});
}
);
});
Pada kode di atas, kode ditambahkan pada acara perubahan dropdown kategori utama dengan ID '#main_cat'.
var $mainCat=$('#main_cat').val();
Fungsi .val() membantu mendapatkan nilai opsi yang dipilih dari drop-down dan menyimpannya dalam variabel '$mainCat'.
$("#sub_cat").kosong();
Drop-down subkategori '#sub_cat' harus dikosongkan, jika berisi nilai sebelumnya, sebelum memanggil AJAX.
Baris jQuery berikut akan membantu dalam memanggil fungsi AJAX jQuery. Periksa parameter fungsi AJAX yang diberikan di bagian di bawah ini.
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
ketik: 'POST',
Untuk membuat AJAX berfungsi di WordPress, parameter 'URL' digunakan. Oleh karena itu, permintaan akan dikirim ke file 'admin-ajax.php'. Selanjutnya, kait di file 'functions.php' akan dipanggil untuk mendapatkan data yang diposting yang dikirim ke URL: '/wp-admin/admin-ajax.php'
Untuk mengirim nilai bersama dengan permintaan, parameter 'data' digunakan. Dalam contoh ini, dua argumen dengan parameter data digunakan – action dan main_catid.
Langkah 5 : Dalam file 'functions.php', kode berikut digunakan untuk mengaitkan suatu tindakan.
add_action('wp_ajax_my_special_action', 'my_action_callback');
Dalam tindakan di atas ini, hook memiliki dua argumen. Pada argumen pertama 'wp_ajax_my_special_action' , 'wp_ajax_ ' adalah nilai yang dikirimkan bersama dengan parameter data 'action'. Pada argumen kedua 'my_action_callback', data akan diproses dan hasilnya akan dikirim kembali.
Kait tindakan di atas ini untuk pengguna yang masuk. Untuk pengguna yang keluar, seseorang dapat mengaitkan tindakan berikut:
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
Kode terakhir setelah menambahkan kait untuk pengguna dan fungsi panggilan balik adalah sebagai berikut:
fungsi implement_ajax() {
if(isset($_POST['main_catid']))
{
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($kategori sebagai $cat) {
$option .= 'term_id.'">';
$option .= $cat->cat_name;
$option .= ' ('.$cat->category_count.')';
$pilihan .= '';
}
echo 'Scegli...'.$option;
mati();
} // berakhir jika
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//untuk pengguna yang tidak masuk.
Langkah 6 : Pada langkah ini, buat halaman baru di dasbor dan tetapkan template untuk itu. Setelah halaman dimuat di browser, drop-down pertama dengan kategori induk akan dimuat di dalamnya.
Karena drop-down kedua kosong, pilih opsi di drop-down pertama untuk memeriksa, bagaimana cara kerjanya.
Jadi AJAX dengan PHP dapat digunakan di situs WordPress dengan bantuan plugin yang baru dibuat.