AJAX është një mjet i fuqishëm në WordPress, që lejon ndërveprime dinamike dhe në kohë reale në faqen tuaj pa nevojën për ta rifreskuar atë. Pavarësisht nëse po krijoni një formë kontakti, një filtër produktesh, apo ngarkoni postime në mënyrë dinamike, AJAX ofrojn një përvojë më të lehtë dhe më të shpejtë për përdoruesit e faqes suaj.
Në këtë guidë, do të kalojmë përmes një shembulli të thjeshtë të WordPress AJAX duke përdorur si JavaScript ashtu edhe PHP. Në fund, do të jeni të përgatitur të shtoni funksionalitete AJAX të personalizuara në çdo faqe WordPress.
Çfarë është AJAX në WordPress?
AJAX është shkurtim për Asynchronous JavaScript and XML. Në thelb, lejon shkëmbimin e të dhënave midis klientit (shfletuesit) dhe serverit pa rifreskuar të gjithë faqen. Në WordPress, kërkesat AJAX trajtohen përmes skedarit admin-ajax.php. Kjo e bën të lehtë dërgimin e të dhënave nga dhe drejt serverit me vetëm disa rreshta kodi.
Pikat që do të mbulojmë në këtë tutorial:
- Si të ngarkoni skedarët JavaScript në WordPress
- Si të dërgoni një kërkesë AJAX nga front-end
- Si të procesoni kërkesën dhe të ktheni të dhënat nga serveri
Hapi 1: Ngarkimi i Skedarit JavaScript
Hapi i parë për të konfiguruar AJAX është ngarkimi i skedarit tuaj JavaScript. Në WordPress, kjo bëhet duke përdorur funksionin wp_enqueue_script. Shtoni kodin e mëposhtëm në skedarin functions.php të temës suaj:
function sajdoko_ajax_enqueue() {
// Ngarko skedarin JavaScript në front-end.
wp_enqueue_script(
'sajdoko-ajax-script', // Emri për skedarin.
get_template_directory_uri() . '/js/simple-ajax-sajdoko.js',
array('jquery') // Varësitë.
);
// Kalon URL-në AJAX në JavaScript
wp_localize_script('sajdoko-ajax-script', 'ajaxurl', admin_url('admin-ajax.php'));
}
// Lidheni funksionin me veprimin 'wp_enqueue_scripts'.
add_action('wp_enqueue_scripts', 'sajdoko_ajax_enqueue');
Ky kod bën dy gjëra:
- Ngarkon skedarin JavaScript
simple-ajax-example.js, duke siguruar që të ngarkohet në front-end. - Përdor
wp_localize_scriptpër të kaluar variablinajaxurlnë skript, i cili referon skedarinadmin-ajax.php. Kjo URL është e nevojshme për të procesuar kërkesën AJAX në server.
Hapi 2: Krijimi i Kërkesës AJAX në JavaScript
Tani, duhet të konfigurojmë JavaScript që dërgon kërkesën AJAX drejt WordPress. Më poshtë është skedari simple-ajax-example.js që merret me këtë proces:
// Prit derisa DOM të ngarkohet plotësisht para se të ekzekutoni skriptin
document.addEventListener("DOMContentLoaded", function () {
var fruti = "Banane";
// Krijoni një objekt të ri XMLHttpRequest
var xhr = new XMLHttpRequest();
// Inicioni një kërkesë GET me URL-në dhe parametrat e pyetjes
xhr.open("GET", ajaxurl + "?action=sajdoko_ajax_request&fruti=" + fruti, true);
// Përkufizoni një funksion që do të thirret kur kërkesa të përfundojë me sukses
xhr.onload = function () {
// Kontrolloni nëse kodi i statusit është në intervalin 200-299 (përgjigjet e suksesshme)
if (xhr.status >= 200 && xhr.status < 300) {
// Printoni tekstin e përgjigjes në console
console.log(xhr.responseText);
} else {
// Printoni një mesazh gabimi me kodin e statusit nëse kërkesa nuk ishte e suksesshme
console.log("Gabim: " + xhr.status);
}
};
// Përkufizoni një funksion që do të thirret nëse kërkesa dështon
xhr.onerror = function () {
// Printoni një mesazh gabimi në console
console.log("Kërkesa dështoi");
};
// Dërgoni kërkesën
xhr.send();
});
Ky kod JavaScript pret që faqja të ngarkohet dhe më pas dërgon një kërkesë GET drejt serverit. Ai kalon parametrin GET sajdoko_ajax_request dhe vlerën e frutit Banane për t’u procesuar nga serveri.
Përgjigja e serverit shfaqet në consolen e shfletuesit, ose shfaqet një mesazh gabimi nëse diçka shkon keq.
Hapi 3: Procesimi i Kërkesës AJAX në PHP
Tani që kemi konfiguruar kërkesën AJAX në front-end, duhet të krijojmë një funksion PHP që e proceson kërkesën dhe kthen një përgjigje. Në WordPress, ne përdorim hook-et wp_ajax_ për të regjistruar veprimet AJAX.
function sajdoko_ajax_request() {
// $_REQUEST përmban të gjitha të dhënat e dërguara me ajax
if (isset($_REQUEST)) {
$fruti = $_REQUEST['fruti'];
// Përpunojmë të dhënat e dërguara
if ($fruti == 'Banane') {
$fruti = 'Apple';
}
// Tani do t'i kthejmë të dhënat funksionit JavaScript
// Çdo gjë që printohet do të kthehet në përgjigje
echo 'Fruti juaj i preferuar është: ' . $fruti;
// Nëse po bëni debug, mund të jetë e dobishme të shihni çfarë u dërgua në $_REQUEST
// print_r($_REQUEST);
}
// Gjithmonë përdorni die() në funksionet që ekzekutojnë përmbajtje ajax
die();
}
add_action('wp_ajax_sajdoko_ajax_request', 'sajdoko_ajax_request');
// Nëse dëshironi ta përdorni këtë funksion edhe për përdoruesit e pa loguar
add_action('wp_ajax_nopriv_sajdoko_ajax_request', 'sajdoko_ajax_request');
Funksioni sajdoko_ajax_request merr parametrin fruti të dërguar nga skedari JavaScript, e përpunon dhe e kthen një përgjigje mbrapsht. Përdorimi i wp_die() është i nevojshëm për të mbyllur saktë kërkesën AJAX.
Hapi 4: Trajtimi i Përdoruesve të Loguar dhe të Pa Loguar
Në WordPress, kërkesat AJAX duhet të trajtohen ndryshe për përdoruesit e loguar dhe ata të pa loguar. Për këtë arsye kemi shtuar dy hooks:
wp_ajax_sajdoko_ajax_requestpër përdoruesit e loguarwp_ajax_nopriv_sajdoko_ajax_requestpër përdoruesit e pa loguar
Kjo siguron që funksionaliteti AJAX të funksionojë për të gjithë, pavarësisht nëse janë të loguar në faqen tuaj apo jo.
Hapi 5: Testimi i Kërkesës Suaj AJAX
Me gjithçka të konfiguruar, është koha të testoni kërkesën tuaj AJAX. Hapni console të shfletuesit tuaj (shtypni F12 ose Cmd+Opt+I), shkoni te skeda Console dhe rifreskoni faqen. Duhet të shihni një mesazh si Fruti juaj i preferuar është: Banane në console, gjë që konfirmon që kërkesa juaj AJAX po funksionon saktë!
Zgjerimi i Shembullit
Pasi të keni zotëruar këtë konfigurim bazë të AJAX, mund ta zgjeroni atë për raste më të avancuara. Ja disa ide:
- Dërgimi i Formave: Përdorni AJAX për të dërguar format pa rifreskuar faqen.
- Ngarkimi i Më Shumë Postimeve: Ngarkoni postime dinamike kur përdoruesi lëviz poshtë ose klikon një buton.
- Filtrimi i Produkteve: Lejoni përdoruesit të filtrojnë produktet WooCommerce pa rifreskuar faqen.
Si gjithmonë, praktika është çelësi. Provoni të integroni AJAX në projektet tuaja për të kuptuar plotësisht potencialin e tij. Nëse kjo guidë ju ka ndihmuar, mos hezitoni ta ndani me zhvillues të tjerë!
