Faceți adaptarea pluginului dvs. WordPress utilizând AJAX
Publicat: 2020-06-02
Ultima actualizare - 8 iulie 2021
AJAX este cea mai recentă metodologie de dezvoltare și cea care câștigă încet avânt datorită ușurinței de utilizare pe care o oferă dezvoltatorilor săi. Prin simpla integrare AJAX în pluginurile dvs. WordPress, reduceți în esență nevoia de a reîncărca în mod constant întreaga pagină web. Cu alte cuvinte, AJAX va face pluginul dvs. WordPress receptiv și va permite utilizatorilor să obțină informații noi reîncărcând doar acea parte specifică, păstrând restul paginii static.
Acest lucru nu numai că face ca paginile web sau pluginurile să fie receptive, ci și reduce timpul de așteptare la jumătate. Există mai multe plugin-uri și aplicații care folosesc Ajax pentru a crea experiențe mai bune pentru utilizatori. De exemplu, WooCommerce folosește caracteristica Ajax pentru a îmbunătăți comportamentul Adaugă în coș.
Având în vedere beneficiile sale, vă vom învăța cum să vă faceți pluginurile WordPress receptive prin AJAX.
Crearea unui plugin
Înainte de a vă putea lucra cu AJAX, trebuie să aveți o bază de plugin de bază pe care să o puteți utiliza pentru a crea un produs avansat și receptiv.
Crearea unui plugin nu este dificilă, deoarece tot ce aveți nevoie este crearea unui fișier care conține conținut de o singură linie. În acest scop, primul pas este să navigați la fișierul wp-content/plugins și să creați un folder nou-nouț cu numele la alegere. Deschideți folderul și creați un nou fișier name_of_the_plugin.php. Acum, vizualizați fișierul în orice editor de text și scrieți următoarele informații:
<?php
/*
Nume plugin: Coolness Inducer
URI plugin: http://coolness-inducer.com
descriere: >-
un plugin perfect pentru a face site-ul dvs. foarte cool.
Versiune: 1.3
Autor: doamna Vader
URI autor: http://msvader.com
Licență: GPL2
*/
?>
Înainte de a face acest lucru, creați un director ajaxloadpost în instalarea pluginului dvs. WordPress. Odată ce faceți acest lucru, creați pluginul și activați-l. După aceasta, includeți următoarele informații în ajaxloadpost.
define('AJAXLOADPOSTURL', WP_PLUGIN_URL.”/”.dirname( plugin_basename( __FILE__ ) ) );
funcția 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);
Apoi, definiți variabila AJAXLOADPOSTURL, deoarece veți avea nevoie de ea pentru a direcționa WordPress către adresa URL a pluginului dvs. Acum trebuie să puneți în coadă scripturile, ceea ce puteți face adăugând ajaxloadpost_enqueuescripts la wp_enqueue_scripts al WordPress.
Rețineți că AJAX nu poate fi utilizat niciodată în forma sa brută. Acesta va fi întotdeauna folosit în combinație cu alte limbaje de programare, adică jQuery sau JavaScript. În acest caz, vom lucra cu JavaScript, așa că trebuie să aveți o înțelegere de bază a acestuia.
Continuând, adăugați JavaScript la ajaxloadpost.js, pe care îl veți găsi în folderul \wp-content\plugins\ajaxloadpost\js\. Urmați această acțiune creând un folder JS și plasați ajaxloadpost.js în el.
Acum, utilizați WordPress wp_localize_script pentru a adăuga variabila JS necesară. Această acțiune va oferi o structură directorului dvs. și va pune în coadă scripturile dvs.
Scrierea AJAX Handler
Pentru a scrie handler-ul AJAX, veți avea nevoie de următoarele coduri:
funcția ajaxloadpost_ajaxhandler() {
dacă ( !wp_verify_nonce( $_POST['nonce'], “ajaxloadpost_nonce”)) {
ieșire(„Nonce greșit”);
}
$rezultate = ”;
$content_post = get_post($_POST['postid']);
$rezultate = $content_post->post_content;
die($rezultate);
}
add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
Finalizarea acestei acțiuni va avea ca rezultat două rezultate. În primul rând, va crea ID-ul postărilor pe care utilizatorii le solicită și, în al doilea rând, va crea nonce. Dar asta nu are rost! Odată ce codurile handler-ului AJAX sunt la locul lor, trebuie să treceți la următorul pas, care este să înregistrați handler-ul AJAX în directorul WordPress. Acest lucru va face ca pluginul WordPress să răspundă la apelurile AJAX. Puteți obține acest lucru prin aceste coduri:
add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
Noțiuni de bază JavaScript și AJAX
Cu apelul AJAX și handler-ul AJAX la locul lor, trebuie să creați o funcție JS care va conecta cele două puncte. Următorul JavaScript vă va ajuta să realizați această acțiune pe care o veți pune în ajaxloadpost.js:
funcția ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
tip: „POST”,
url: ajaxloadpostajax.ajaxurl,
date: {
acțiune: „ajaxloadpost_ajaxhandler”,
postid: postid,
nonce: nonce
},
succes: function(date, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html(”);
jQuery(loadpostresult).append(date);
},
eroare: function(MLHttpRequest, textStatus, errorThrown) {
alert(eroareThrown);
}
});
}
La fel ca și pasul menționat mai sus, această acțiune va crea și două rezultate, adică nonce și post ID.
Următorul pas necesită competență și în jQuery. Deci, dacă abilitățile tale sunt puțin rustice, vei găsi acest articol de ajutor!
Continuând, utilizați funcția jQuery.ajax pentru a efectua un apel AJAX către serverele corespunzătoare. În codurile de mai sus, adresa URL este adresa URL admin-ajax.php care poate fi găsită în variabila JavaScript pe care am înregistrat-o la momentul punerii în coadă a scripturilor. În plus, specificați această acțiune cu numele operatorului de acțiune care a fost înregistrat cu WordPress și, de asemenea, postați nonce și ID-ul postării.
Dacă totul merge bine, puteți actualiza <div> al ID-ului #loadpostresult și puteți înlocui conținutul preluat cu handler AJAX.
Pune o față codului tău
Acum, este timpul să creați coduri care să afișeze titlurile postărilor corespunzătoare și să afișeze informațiile pe care utilizatorii le doresc printr-un apel AJAX. Iată următoarele coduri:
funcția ajaxloadpost_show_latest_posts($number = '5'){
$rezultate =”;
$the_query = new WP_Query( 'posts_per_page='.$number );
while ($the_query->have_posts()):
$the_query->the_post();
$nonce = wp_create_nonce(“ajaxloadpost_nonce”);
$argumente = get_the_ID().”,'”.$nonce.”'”;
$link = ' <a onclick="ajaxloadpost_loadpost('.$arguments.');”>'. get_the_title().'</a>';
$rezultat.= '<li>' . $link . „</li>”;
sfârşitul timpului;
wp_reset_postdata();
$rezultat.= '<div id="loadpostresult”></div>';
returnează $rezultat;
}
funcția ajaxloadpost_shortcode_function($atts){
returnează ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function');
Sperăm că acest articol v-a ajutat să vă faceți adaptabil pluginul WordPress. Lăsați-ne un comentariu dacă aveți o întrebare.
Lectură în continuare
- Designul receptiv vă ajută să îmbunătățiți ratele de conversie.
- Cele mai bune teme WooCommerce receptive