Membuat Plugin WordPress Anda Responsif dengan menggunakan AJAX
Diterbitkan: 2020-06-02
Terakhir diperbarui - 8 Juli 2021
AJAX adalah metodologi pengembangan terbaru dan yang perlahan mendapatkan momentum karena kemudahan penggunaan yang diberikannya kepada pengembangnya. Dengan hanya mengintegrasikan AJAX dalam plugin WordPress Anda, Anda pada dasarnya mengurangi kebutuhan untuk memuat ulang seluruh halaman web secara konstan. Dengan kata lain, AJAX akan membuat Plugin WordPress Anda Responsif dan memungkinkan pengguna untuk mendapatkan informasi baru dengan hanya memuat ulang bagian tertentu sambil menjaga sisa halaman tetap statis.
Ini tidak hanya membuat halaman web atau plugin responsif tetapi juga mengurangi waktu tunggu hingga setengahnya. Ada beberapa plugin dan aplikasi yang menggunakan Ajax untuk menciptakan pengalaman yang lebih baik bagi pengguna. Misalnya, WooCommerce menggunakan fitur Ajax untuk meningkatkan perilaku Tambahkan ke Keranjang.
Mempertimbangkan manfaatnya, kami akan mengajari Anda cara membuat plugin WordPress Anda responsif melalui AJAX.
Membuat Plugin
Sebelum Anda dapat mengerjakan keajaiban Anda dengan AJAX, Anda harus memiliki fondasi plugin dasar yang dapat Anda gunakan untuk membuat produk yang canggih dan responsif.
Membuat plugin tidak sulit karena yang Anda butuhkan hanyalah membuat file yang berisi konten satu baris. Untuk tujuan ini, langkah pertama adalah menavigasi ke file wp-content/plugins dan membuat folder baru dengan nama pilihan Anda. Buka folder dan buat file baru name_of_the_plugin.php. Sekarang, lihat file di editor teks apa pun dan tulis informasi berikut:
<?php
/*
Nama Plugin: Induser Kesejukan
URI Plugin: http://coolness-inducer.com
keterangan: >-
sebuah plugin yang sempurna untuk membuat situs web Anda lebih keren.
Versi: 1.3
Pengarang: Ms. Vader
Penulis URI: http://msvader.com
Lisensi: GPL2
*/
?>
Sebelum melakukan ini, buat direktori ajaxloadpost di instalasi plugin WordPress Anda. Setelah Anda melakukan ini, buat plugin dan aktifkan. Setelah ini, sertakan informasi berikut dalam ajaxloadpost Anda.
define('AJAXLOADPOSTURL', WP_PLUGIN_URL.”/”.dirname( plugin_basename( __FILE__ ) ) );
fungsi ajaxloadpost_enqueuescripts() {
wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));
wp_localize_script( 'ajaxloadpost', 'ajaxloadpostajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);
Kemudian, tentukan variabel AJAXLOADPOSTURL karena Anda akan membutuhkannya untuk mengarahkan WordPress ke URL plugin Anda. Sekarang Anda harus membuat enqueue skrip Anda yang dapat Anda lakukan dengan menambahkan ajaxloadpost_enqueuescripts ke wp_enqueue_scripts dari WordPress.
Perlu diingat bahwa AJAX tidak pernah dapat digunakan dalam bentuk mentahnya. Itu akan selalu digunakan dalam kombinasi dengan bahasa pemrograman lain, yaitu jQuery atau JavaScript. Dalam hal ini, kami akan bekerja dengan JavaScript sehingga Anda perlu memiliki pemahaman dasar tentangnya.
Selanjutnya, tambahkan JavaScript ke ajaxloadpost.js yang akan Anda temukan di folder \wp-content\plugins\ajaxloadpost\js\. Ikuti tindakan ini dengan membuat folder JS dan tempatkan ajaxloadpost.js di dalamnya.
Sekarang, gunakan wp_localize_script WordPress untuk menambahkan variabel JS yang diperlukan. Tindakan ini akan memberikan struktur ke direktori Anda dan mengantrekan skrip Anda.
Menulis AJAX Handler
Untuk menulis handler AJAX, Anda memerlukan kode berikut:
fungsi ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], “ajaxloadpost_nonce”)) {
exit("Nonce salah");
}
$hasil = ”;
$content_post = get_post($_POST['postid']);
$hasil = $content_post->post_content;
mati($hasil);
}
add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
Menyelesaikan tindakan ini akan menghasilkan dua hasil. Pertama, itu akan membuat ID posting yang dibutuhkan pengguna dan kedua adalah itu akan membuat nonce. Tapi itu tidak penting! Setelah kode handler AJAX berada di tempatnya, Anda perlu pindah ke langkah berikutnya yaitu mendaftarkan handler AJAX di direktori WordPress. Melakukan ini akan membuat plugin WordPress responsif terhadap panggilan AJAX. Anda dapat mencapai ini melalui kode-kode ini:
add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
Dasar-dasar JavaScript dan AJAX
Dengan panggilan AJAX dan penangan AJAX, Anda perlu membuat fungsi JS yang akan menghubungkan dua titik. JavaScript berikut akan membantu Anda mencapai tindakan ini yang akan Anda masukkan ke ajaxloadpost.js Anda:
fungsi ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
ketik: 'POSTING',
url: ajaxloadpostajax.ajaxurl,
data: {
tindakan: 'ajaxloadpost_ajaxhandler',
posid: posid,
nonce: nonce
},
sukses: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html(");
jQuery(loadpostresult).append(data);
},
kesalahan: function(MLHttpRequest, textStatus, errorThrown) {
waspada (errorThrown);
}
});
}
Sama seperti langkah yang disebutkan di atas, tindakan ini juga akan membuat dua hasil, yaitu nonce dan post ID.
Langkah selanjutnya membutuhkan kemahiran dalam jQuery juga. Jadi, jika keterampilan Anda sedikit kasar, Anda akan menemukan artikel ini bermanfaat!
Selanjutnya, gunakan fungsi jQuery.ajax untuk membuat panggilan AJAX ke server yang sesuai. Pada kode-kode di atas, URL adalah URL admin-ajax.php yang dapat ditemukan di variabel JavaScript yang kita daftarkan pada saat mengantrekan skrip. Selain itu, tentukan tindakan ini dengan nama pengendali tindakan yang terdaftar di WordPress dan juga poskan nonce dan ID posnya.
Jika semuanya berjalan dengan baik, Anda dapat memperbarui <div> id #loadpostresult dan mengganti konten yang diambil dengan AJAX handler.
Menempatkan Wajah pada Kode Anda
Sekarang, saatnya untuk membuat kode yang akan menampilkan judul posting yang sesuai dan memunculkan informasi yang diinginkan pengguna melalui panggilan AJAX. Berikut adalah kode-kode berikut:
fungsi ajaxloadpost_show_latest_posts($number = '5'){
$hasil =”;
$the_query = new WP_Query( 'posts_per_page='.$number );
while ( $the_query->have_posts() ):
$the_query->the_post();
$nonce = wp_create_nonce(“ajaxloadpost_nonce”);
$arguments = get_the_ID().”,'”.$nonce.”'”;
$link = ' <a onclick=”ajaxloadpost_loadpost('.$arguments.');”>'. get_the_title().'</a>';
$hasil.= '<li>' . $tautan. '</li>';
sementara;
wp_reset_postdata();
$result.= '<div id=”loadpostresult”></div>';
kembali $hasil;
}
fungsi ajaxloadpost_shortcode_function( $atts ){
kembali ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );
Semoga artikel ini membantu Anda dalam membuat Plugin WordPress Anda Responsif. Tinggalkan kami komentar jika Anda memiliki pertanyaan.
Bacaan lebih lanjut
- Desain responsif membantu Anda meningkatkan tingkat konversi.
- Tema WooCommerce responsif terbaik