Membuat Plugin WordPress Anda Responsif dengan menggunakan AJAX

WordPress adalah platform yang sangat baik untuk membangun situs web; namun, alat pengelola konten dilengkapi dengan kekurangannya. Jika Anda telah membangun situs web Anda di WordPress, maka tidak jarang menghadapi masalah kecepatan memuat yang lambat. Karena banyaknya plugin yang ditambahkan seiring dengan masuknya database dan basis kode, sebenarnya tidak jarang. Namun, penting untuk fokus pada solusi. Anda tidak ingin audiens Anda menjadi tidak sabar dan pergi karena kecepatan lambat dan kehilangan bisnis potensial!

Bagaimana jika kami memberi tahu Anda bahwa Anda dapat mengoptimalkan kecepatan situs WordPress Anda dengan mengintegrasikan fitur sederhana ke dalam plugin Anda, yang dikenal sebagai AJAX. Istilah AJAX adalah kependekan dari Asynchronous JavaScript and XML. AJAX membantu Anda meningkatkan kecepatan situs web Anda. Ini hanya akan memuat bagian tertentu dari halaman dan membuat halaman yang tersisa tetap statis, sehingga meningkatkan waktu buka. Beberapa plugin dan aplikasi sudah menggunakan fitur ini untuk membantu meningkatkan kecepatan halaman web mereka bahkan hingga hari ini.

Hanya dalam waktu singkat, AJAX telah mendapatkan reputasi yang sangat baik di dunia Pemasaran Digital dan digunakan oleh sebagian besar pemilik situs web. Untungnya, WordPress menyediakan dukungan yang sangat baik untuk AJAX, membuatnya lebih mudah untuk menulis plugin yang terintegrasi ke dalam AJAX. Dengan dukungan dari WordPress dan artikel kami, Anda seharusnya dapat mengintegrasikan AJAX ke dalam plugin Anda dalam waktu singkat.

Di bawah ini adalah panduan langkah demi langkah untuk memandu Anda melalui prosesnya.

Langkah #1 – Buat Plugin Anda

Langkah pertama adalah membuat plugin sederhana yang kemudian dapat Anda gunakan untuk mengembangkan produk yang lebih canggih yang lebih responsif dan mengurangi waktu pemuatan halaman web Anda. Kabar baiknya adalah Anda tidak akan mengalami kesulitan dalam membuat plugin karena yang perlu Anda lakukan hanyalah membuat file yang menyertakan data satu baris.

Anda dapat melakukan ini dengan mencari file "wp-content/plugins" dan membuat folder dengan nama apa pun yang cocok untuk Anda. Setelah Anda melakukan ini, Anda sekarang perlu membuka folder dan membuat file dengan nama: "name_of_the_plugin.php". Setelah Anda membuka file ini di editor teks, ketik kode berikut di editor teks.

<?php
/*
Plugin Name: Your choice
Plugin URI: http://yout-choice.com
Description: This loads post via ajax
Author: Your name
Author URI: http://yourname.com
Version: 1
*/

Langkah #2 – Tambahkan Pustaka JavaScript

Anda memulai langkah ini dengan membuat direktori "ajaxloadpost". Bagaimana melakukannya? Ini cukup sederhana karena Anda dapat menginstalnya bersama dengan plugin WordPress. Setelah langkah ini selesai, Anda sekarang dapat membuat plugin yang telah Anda kodekan dan menjalankannya. Anda kemudian perlu menambahkan kode di bawah ini ke ajaxloadpost Anda:

define('AJAXLOADPOSTURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
function 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);

Anda harus mengarahkan WordPress melalui URL plugin yang dibuat; inilah mengapa Anda perlu mendefinisikan variabel dengan nama AJAXLOADPOSTURL.

AJAX selalu digunakan dengan kombinasi bahasa pemrograman, kami akan bekerja dengan JavaScript di artikel kami yang tersisa. Cari ajaxloadpost.js di folder \wp-content\plugins\ajaxloadpost\js\ dan tambahkan JavaScript ke dalamnya. Anda sekarang dapat menambahkan variabel JavaScript ke skrip Anda.

Langkah #3 – Mengintegrasikan AJAX Handler

Setelah semua hal di atas diurutkan, Anda akhirnya dapat melanjutkan untuk mengintegrasikan handler AJAX ke dalam plugin Anda. Berikut ini adalah kode untuk penangan AJAX Anda:

function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}

$results = '';
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;

die($results);
}

Kode di atas pada dasarnya akan memenuhi dua tugas. Ini pertama-tama akan mengembangkan ID untuk posting yang dibutuhkan oleh pengguna. Tugas kedua adalah membuat "nonce". Anda tidak perlu khawatir tentang elemen kedua untuk saat ini (Sudah dijelaskan secara rinci di akhir artikel).

Sebagai gantinya, Anda harus beralih ke langkah kedua yaitu mendaftarkan penangan AJAX Anda di dalam direktori WordPress. Ini akan memungkinkan fungsi AJAX dipanggil setelah diminta. Tindakan ini dapat dicapai melalui kode yang disebutkan di bawah ini:

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

Memiliki latar belakang pengetahuan tentang JavaScript merupakan nilai tambah yang besar bagi Anda, jika Anda tidak mahir dalam bahasa pemrograman ini, mintalah bantuan dari seorang ahli untuk memandu Anda melalui seluruh proses. Anda juga dapat memoles keterampilan JavaScript Anda melalui tutor web atau dengan membaca artikel di sini .

Langkah #4 – Menggunakan JavaScript untuk AJAX

Hal berikutnya yang Anda butuhkan adalah menulis sebuah fungsi yang akan memungkinkan AJAX untuk memanggil dan memperbarui data yang telah dikembalikan melalui AJAX handler. Fungsinya umumnya ajacloadpost.js. Kode berikut dapat digunakan untuk menentukan tindakan yang dijelaskan di atas.

function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
type: 'POST',
url: ajaxloadpostajax.ajaxurl,
data: {
action: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
success: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html('');
jQuery(loadpostresult).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});

Fungsi di atas akan mengambil dua input, salah satunya adalah id posting dan yang kedua adalah nonce. Anda dapat menggunakan fungsi jQuery.ajax untuk melakukan panggilan ke server. Setelah berhasil, perbarui <div> id #loadpostresult dengan data yang dikembalikan melalui AJAX handler. Bit terakhir dari kode adalah kondisi jika terjadi kesalahan. Jika terjadi kesalahan, sistem diperingatkan dengan pop-up.

Langkah #5 – Menampilkan daftar

Setelah semua fungsi telah diurutkan, Anda dapat melanjutkan ke langkah terakhir yaitu menampilkan judul posting. Ingatlah bahwa setiap klik mungkin mengarah ke judul posting yang berbeda dan kode Anda harus dapat mengambil kode yang telah dipanggil. Kode berikut dapat membantu Anda mencapai ini:

function ajaxloadpost_show_latest_posts($number = '5'){  

$results ='';
$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>'. get_the_title().'</a>';  

$result.= '<li>' . $link . '</li>';
endwhile;
wp_reset_postdata();  

$result.= '<div></div>';  

return $result;
}  

function ajaxloadpost_shortcode_function( $atts ){
return ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

Apa itu "nonce"?

Sebuah nonce digunakan untuk memeriksa apakah permintaan tersebut berasal dari sumber yang otentik atau tidak. Nonce dapat dibuat menggunakan fungsi WordPress sederhana: “wp_create_nonce”. Itu dapat diperiksa lebih lanjut melalui penangan AJAX menggunakan fungsi: "wp_verify_nonce". Menggunakan fitur ini sangat penting jika Anda melakukan tugas sensitif di WordPress Anda.

  Kesimpulan

  Mengintegrasikan AJAX dengan plugin Anda dapat membantu meningkatkan daya tanggap halaman Anda secara nyata. Jika Anda tidak nyaman dengan JavaScript, Anda dapat memilih bahasa pemrograman yang menurut Anda lebih mudah untuk dikodekan atau mencari ahli yang dapat membantu Anda membuat kode untuk plugin Anda. Cobalah untuk mengintegrasikan AJAX ke dalam plugin Anda dan Anda tidak akan kecewa!