Ajax dan WordPress

Teknik Ajax, seperti yang kami jelaskan dalam artikel pengantar kami di Ajax telah menjadi populer karena memungkinkan kami untuk memperbarui bagian dari konten halaman web tanpa harus me-refresh halaman. Ini membuat pengalaman pengguna yang lebih baik.

Situs WordPress tentu saja tidak terkecuali. Namun cara kami menggunakan Ajax di WordPress berbeda dibandingkan dengan penggunaan di aplikasi web lainnya.

Apa itu admin-ajax dan Bagaimana Cara Kerjanya?

WordPress telah mengimplementasikan Ajax untuk fitur adminnya sendiri, seperti penyimpanan otomatis, pembaruan instan, moderasi komentar, penambahan/penghapusan postingan, dll. Artinya siap untuk kita gunakan hanya dengan memanfaatkan fungsi terkait yang disediakan oleh WordPress.

File kunci untuk tujuan ini adalah file admin-ajax.php , yang terletak di bawah folder wp-admin, yang digunakan untuk membuat koneksi antara klien dan server.

Di dalam file ini, sekitar baris 159, Anda dapat melihat bagaimana semua permintaan Ajax didaftarkan oleh beberapa kait tindakan.

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

wp_ajax_{$action} merujuk ke pengguna yang masuk dan wp_ajax_nopriv_{$_REQUEST['action']} ke pengunjung situs. Jika Anda ingin membuat permintaan yang menyertakan semua pengguna, kita harus menggunakan kedua kait.

Jadi dengan bantuan tindakan ini, Anda dapat menghubungkan fungsi kustom dan meneruskan data Anda ke WordPress untuk membuat permintaan Ajax. Mari kita lihat ini dalam aksi.

Contoh WordPress Ajax

Kami akan menggunakan contoh yang sama seperti yang kami lakukan di artikel pengantar Ajax kami dan membuat formulir yang memungkinkan pengguna untuk mencari di judul artikel dan melihat hasil yang disarankan dengan cepat.

Di ruang header tema kami, kami akan memasukkan output HTML untuk formulir pencarian kami. Kami menggunakan tema Twenty Twenty-One jadi kami mengedit file header.php yang terletak di bawah folder utama tema dan memasukkan baris berikut sebelum baris <div id=”content” class=”site-content”>.

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

Sekarang formulir yang dapat digunakan pengguna harus terlihat di ujung depan.

CATATAN: Di sini, kita akan langsung mengedit file header.php theme tanpa membuat child theme. Ini bukan praktik yang baik dan memiliki sejumlah kelemahan. Jika Anda ingin mempelajari lebih lanjut tentang pentingnya tema anak, silakan baca artikel terkait kami. Untuk keperluan contoh ini, kami telah membuat kode tetap sederhana dan sesuai topik. Karena itu, Anda tidak disarankan menggunakan kode ini di situs web produksi.

Hal selanjutnya adalah memasukkan fungsi JavaScript yang akan mengirim permintaan. Kami akan menggunakan jQuery sebagai gantinya, karena sudah hadir dengan WordPress dan siap digunakan. Tentu saja, kita harus menyertakan skrip dengan cara WordPress.

Enqueue Script Kami

Kami akan memberi tahu WordPress tentang keberadaan file JS, dengan mengedit file function.php tema dan membuat skrip seperti ini. File kami akan menjadi custom.js yang telah kami buat dan masukkan ke dalam folder "js" baru di bawah folder utama tema.

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

Dalam fungsi ajax_search_script() , kami mendaftarkan dan melokalkan skrip, lalu mengantrekan data yang dilokalkan dengan fungsi wp_enqueue_script() bawaan. Kemudian kami mengaitkan fungsi ajax_search_script() pada wp_enqueue_scripts, yang merupakan tindakan yang tepat untuk digunakan saat mengantrekan skrip di WordPress.

Penggunaan wp_localize_script mungkin membingungkan di sini karena, sebagai fungsi WordPress, pada awalnya dirancang untuk menerjemahkan string apa pun yang digunakan dalam skrip Anda. Namun juga sering digunakan untuk melewatkan data umum dari PHP ke JavaScript. Dalam kasus kami, untuk meneruskan URL Ajax dan objek nonce.

Penggunaan nonce diperlukan agar permintaan jQuery Ajax dapat divalidasi sebagai permintaan yang berasal dari situs web. Jika Anda tidak terbiasa dengan penggunaan nonces di WordPress, Anda dapat membaca lebih lanjut di artikel terkait kami.

ajax_object adalah nilai dari parameter $object_name yang diperlukan dari fungsi wp_localize_script() dan yang nantinya akan digunakan dalam kode jQuery.

Besar! Sekarang mari kita isi fungsi kita dengan konten yang tepat.

JavaScript

Di dalam file custom.js kami menyertakan jQuery kami.

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

Kali ini kami menggunakan jQuery dan JSON untuk meneruskan data, tindakan, teks_pencarian, nonce yang diinginkan, ke skrip sisi server. Fungsi callback get_articles_titles() , akan bertanggung jawab untuk memproses data di bagian belakang, menyiapkan hasil, dan mengirim kembali respons.

Juga, seperti yang Anda lihat, kami menggunakan ajax_object dari wp_localize_script dengan dua nilai arraynya, nonce dan url.

Kaitnya

Sekarang kita harus mengikat tindakan Ajax yang diautentikasi dengan kait yang diperlukan yang telah disebutkan sebelumnya. Kami mengingatkan Anda bahwa untuk menyertakan pengguna yang masuk dan tidak, Anda harus menggunakan kedua kait. Dalam file functions.php Anda, tambahkan dua baris ini di bawah kode yang ditambahkan sebelumnya untuk membuat skrip enqueuing.

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

Seperti yang mungkin sudah Anda perhatikan, nama hook sebenarnya adalah awalan yang diikuti dengan nama tindakan kami. Fungsi hooked get_articles_titles adalah tempat kita akan benar-benar mengambil judul artikel. Kami akan mendefinisikan fungsi ini di dalam functions.php juga.

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

Check_ajax_referer bertanggung jawab untuk memverifikasi bahwa permintaan Ajax tidak diproses secara eksternal.

Parameter yang diperlukan di sini adalah tindakan, yang terkait dengan 'nonce' => wp_create_nonce( 'ajax_nonce' ) di dalam fungsi ajax_search_script() Anda, bersama dengan nilai yang terkait dengan nonce.

Dan itu saja! Kami baru saja membuat contoh Ajax-PHP yang sangat sederhana. Pada titik ini, jika Anda mencoba kode di lingkungan pengujian WordPress, seharusnya berfungsi seperti ini.

Di mana Layanan 1-5 adalah judul posting pengujian kami.

Kesimpulan

Ini adalah artikel tentang bagaimana kami dapat meningkatkan daya tanggap dan kinerja di situs web WordPress dengan memanfaatkan manfaat Ajax. Semoga, Anda sekarang siap untuk menggunakan teknik serupa di situs web Anda sendiri dan menikmati peningkatan pengalaman pengguna!