Rendi il tuo plugin WordPress reattivo usando AJAX
Pubblicato: 2020-06-02
Ultimo aggiornamento - 8 luglio 2021
AJAX è l'ultima metodologia di sviluppo e quella che sta lentamente guadagnando slancio grazie alla facilità d'uso che fornisce ai suoi sviluppatori. Semplicemente integrando AJAX all'interno dei tuoi plugin WordPress, stai essenzialmente riducendo la necessità di ricaricare costantemente l'intera pagina web. In altre parole, AJAX renderà il tuo plugin WordPress reattivo e consentirà agli utenti di ottenere nuove informazioni ricaricando solo quella parte specifica mantenendo statico il resto della pagina.
Ciò non solo rende reattive le pagine Web o i plug-in, ma riduce anche il tempo di attesa della metà. Esistono diversi plugin e applicazioni che utilizzano Ajax per creare esperienze migliori per gli utenti. Ad esempio, WooCommerce utilizza la funzione Ajax per migliorare il comportamento di Aggiungi al carrello.
Considerando i suoi vantaggi, ti insegneremo come rendere reattivi i tuoi plugin WordPress tramite AJAX.
Creazione di un plug-in
Prima di poter lavorare con AJAX, devi disporre di una base di plug-in di base che puoi utilizzare per creare un prodotto avanzato e reattivo.
La creazione di un plug-in non è difficile in quanto tutto ciò di cui hai bisogno è la creazione di un file che contenga contenuti one-liner. A tal fine, il primo passo è passare al file wp-content/plugins e creare una nuova cartella con un nome a tua scelta. Apri la cartella e crea un nuovo file name_of_the_plugin.php. Ora, visualizza il file in qualsiasi editor di testo e scrivi le seguenti informazioni:
<?php
/*
Nome del plug-in: Induttore di freddezza
URI del plug-in: http://coolness-inducer.com
descrizione: >-
un plugin perfetto per rendere il tuo sito web ancora più cool.
Versione: 1.3
Autore: Sig.ra Vader
URI dell'autore: http://msvader.com
Licenza: GPL2
*/
?>
Prima di farlo, crea una directory ajaxloadpost nell'installazione del plugin di WordPress. Fatto ciò, crea il plugin e attivalo. Successivamente, includi le seguenti informazioni nel tuo ajaxloadpost.
define('AJAXLOADPOSTURL', WP_PLUGIN_URL."/".dirname(plugin_basename( __FILE__ )));
funzione 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);
Quindi, definisci la variabile AJAXLOADPOSTURL perché ti servirà per indirizzare WordPress all'URL del tuo plugin. Ora devi accodare i tuoi script che puoi fare aggiungendo ajaxloadpost_enqueuescripts a wp_enqueue_scripts di WordPress.
Tieni presente che AJAX non può mai essere utilizzato nella sua forma grezza. Verrà sempre utilizzato in combinazione con altri linguaggi di programmazione, ad esempio jQuery o JavaScript. In questo caso, lavoreremo con JavaScript, quindi è necessario averne una conoscenza di base.
Andando avanti, aggiungi JavaScript a ajaxloadpost.js che troverai nella cartella \wp-content\plugins\ajaxloadpost\js\. Segui questa azione creando una cartella JS e inserisci ajaxloadpost.js in essa.
Ora, usa WordPress wp_localize_script per aggiungere la variabile JS richiesta. Questa azione fornirà una struttura alla tua directory e accoderà i tuoi script.
Scrivendo il gestore AJAX
Per scrivere il gestore AJAX, avrai bisogno dei seguenti codici:
funzione ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], “ajaxloadpost_nonce”)) {
exit(“Nonce sbagliato”);
}
$risultati = ”;
$content_post = get_post($_POST['postid']);
$risultati = $contenuto_post->post_contenuto;
muori($risultati);
}
add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
Il completamento di questa azione comporterà due risultati. In primo luogo, creerà l'ID dei post richiesti dagli utenti e in secondo luogo creerà nonce. Ma non è questo il punto! Una volta che i codici del gestore AJAX sono a posto, devi passare al passaggio successivo che consiste nel registrare il gestore AJAX nella directory di WordPress. In questo modo il plug-in di WordPress risponderà alle chiamate AJAX. Puoi ottenerlo attraverso questi codici:
add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
Nozioni di base su JavaScript e AJAX
Con la chiamata AJAX e il gestore AJAX in atto, è necessario creare una funzione JS che collegherà i due punti. Il seguente JavaScript ti aiuterà a ottenere questa azione che inserirai nel tuo ajaxloadpost.js:
funzione ajaxloadpost_loadpost(postid, nonce) {
jQuery.ajax({
digitare: 'POST',
URL: ajaxloadpostajax.ajaxurl,
dati: {
azione: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
successo: funzione(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(risultato di caricamento).html(”);
jQuery(risultato di caricamento).append(dati);
},
errore: funzione(MLHttpRequest, textStatus, errorThrown) {
avviso(errorThrown);
}
});
}
Proprio come il passaggio sopra menzionato, anche questa azione creerà due risultati, ovvero nonce e post ID.
Il passaggio successivo richiede anche la conoscenza di jQuery. Quindi, se le tue abilità sono un po' rustiche, troverai questo articolo utile!
Andando avanti, usa la funzione jQuery.ajax per effettuare una chiamata AJAX ai server appropriati. Nei codici sopra, l'URL è l'URL admin-ajax.php che può essere trovato nella variabile JavaScript che abbiamo registrato al momento dell'accodamento degli script. Inoltre, specifica questa azione con il nome del gestore dell'azione che è stato registrato con WordPress e pubblica anche il nonce e l'ID del post.
Se tutto va bene, puoi aggiornare <div> dell'id #loadpostresult e sostituire il contenuto recuperato con il gestore AJAX.
Dare un volto al tuo codice
Ora è il momento di creare codici che visualizzeranno i titoli dei post appropriati e porteranno le informazioni che gli utenti desiderano tramite una chiamata AJAX. Ecco i seguenti codici:
funzione ajaxloadpost_show_latest_posts($numero = '5'){
$risultati =”;
$the_query = new WP_Query('post_per_page='.$numero);
mentre ( $the_query->have_posts() ) :
$la_query->il_post();
$nonce = wp_create_nonce(“ajaxloadpost_nonce”);
$argomenti = get_the_ID().”,'”.$nonce.”'”;
$link = ' <a onclick="ajaxloadpost_loadpost('.$arguments.');">'. get_the_title().'</a>';
$risultato.= '<li>' . $ collegamento . '</li>';
nel frattempo;
wp_reset_postdata();
$risultato.= '<div id="loadpostresult"></div>';
restituisce $risultato;
}
funzione ajaxloadpost_shortcode_function($atts){
restituisce ajaxloadpost_show_latest_posts();
}
add_shortcode('AJAXLOADPOST', 'ajaxloadpost_shortcode_function');
Si spera che questo articolo ti abbia aiutato a rendere il tuo plugin WordPress reattivo. Lasciaci un commento se hai una domanda.
Ulteriori letture
- Il design reattivo ti aiuta a migliorare i tassi di conversione.
- I migliori temi WooCommerce reattivi