Rendi il tuo plugin WordPress reattivo usando AJAX

WordPress è un'eccellente piattaforma per la creazione di siti Web; tuttavia, lo strumento di gestione dei contenuti ha i suoi svantaggi. Se hai creato il tuo sito Web su WordPress, non è raro dover affrontare il problema della bassa velocità di caricamento. A causa del gran numero di plugin aggiunti insieme all'afflusso di database e codebase, in realtà non è raro. Tuttavia, è importante concentrarsi sulla soluzione. Non vuoi che il tuo pubblico diventi impaziente e se ne vada a causa della bassa velocità e perda potenziali affari!

E se ti dicessimo che potresti ottimizzare la velocità del tuo sito Web WordPress integrando una semplice funzionalità nei tuoi plugin, nota come AJAX. Il termine AJAX è l'abbreviazione di JavaScript asincrono e XML. AJAX ti aiuta a migliorare la velocità del tuo sito web. Caricherà solo una certa parte della pagina e manterrà statica la pagina rimanente, migliorando così il tempo di caricamento. Diversi plugin e app stanno già utilizzando questa funzione per migliorare la velocità delle loro pagine web anche oggi.

In poco tempo, AJAX ha guadagnato un'eccellente reputazione nel mondo del marketing digitale ed è utilizzato dalla maggior parte dei proprietari di siti web. Fortunatamente, WordPress fornisce un eccellente supporto per AJAX, semplificando la scrittura di plug-in integrati in AJAX. Con il supporto di WordPress e del nostro articolo, dovresti essere in grado di integrare AJAX nei tuoi plugin in pochissimo tempo.

Di seguito è riportata una guida passo passo per guidarti attraverso il processo.

Passaggio 1: crea il tuo plug-in

Il primo passo è creare un semplice plugin che puoi poi utilizzare per sviluppare un prodotto più avanzato che sia più reattivo e riduca il tempo di caricamento della tua pagina web. La buona notizia è che non avrai alcuna difficoltà a creare il plugin perché tutto ciò che devi fare è creare un file che includa dati one-liner.

Puoi farlo cercando nel file "wp-content/plugins" e generando una cartella con il nome che preferisci. Una volta fatto ciò, ora devi aprire la cartella e creare un file con il nome: “name_of_the_plugin.php”. Dopo aver aperto questo file nell'editor di testo, digitare il codice seguente nell'editor di testo.

<?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
*/

Passaggio 2: aggiungi la libreria JavaScript

Inizi questo passaggio creando una directory "ajaxloadpost". Come farlo? È piuttosto semplice poiché puoi installarlo insieme al plugin di WordPress. Una volta completato questo passaggio, ora puoi creare il plug-in che hai codificato ed eseguirlo. Devi quindi aggiungere il codice qui sotto nel tuo ajaxloadpost:

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);

Devi indirizzare WordPress attraverso l'URL del plugin creato; questo perché è necessario definire la variabile con il nome di AJAXLOADPOSTURL.

AJAX viene sempre utilizzato con una combinazione di linguaggi di programmazione, lavoreremo con JavaScript nel nostro articolo rimanente. Cerca ajaxloadpost.js nella cartella \wp-content\plugins\ajaxloadpost\js\ e aggiungi JavaScript. Ora puoi aggiungere la variabile JavaScript al tuo script.

Passaggio 3: integrazione del gestore AJAX

Una volta che tutto quanto sopra è stato ordinato, puoi finalmente passare all'integrazione del gestore AJAX nel tuo plugin. Quello che segue è il codice per il tuo gestore AJAX:

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);
}

Il codice sopra adempirà sostanzialmente a due compiti. Prima svilupperà un ID per i post richiesti dall'utente. Il secondo compito è creare "nonce". Per il momento non devi preoccuparti del secondo elemento (è stato descritto in dettaglio alla fine dell'articolo).

Invece, dovresti passare al secondo passaggio che consiste nel registrare il tuo gestore AJAX nella directory di WordPress. Ciò consentirà di chiamare la funzione AJAX una volta richiesta. Questa azione può essere raggiunta attraverso il codice indicato di seguito:

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

Avere una conoscenza di base su JavaScript è un enorme vantaggio per te, se non sei esperto di questo linguaggio di programmazione chiedi aiuto a un esperto che ti guidi attraverso l'intero processo. Puoi anche perfezionare le tue abilità JavaScript tramite un tutor web o leggendo articoli qui .

Passaggio #4: utilizzo di JavaScript per AJAX

La prossima cosa di cui hai bisogno è scrivere una funzione che consenta ad AJAX di chiamare e aggiornare i dati che sono stati restituiti tramite il gestore AJAX. La funzione è generalmente ajacloadpost.js. Il codice seguente può essere utilizzato per determinare l'azione sopra descritta.

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);
}
});

La funzione sopra prenderà due input, uno di questi è l'id del post e il secondo è nonce. È possibile utilizzare la funzione jQuery.ajax per effettuare la chiamata al server. Una volta eseguito correttamente, aggiorna il <div> di id #loadpostresult con i dati che sono stati restituiti tramite il gestore AJAX. L'ultimo bit del codice è una condizione in caso di errore. Se si verifica un errore, il sistema viene avvisato con un pop-up.

Passaggio 5: visualizzazione degli elenchi

Una volta che tutte le funzioni sono state ordinate, puoi passare all'ultimo passaggio che è visualizzare il titolo del post. Tieni presente che ogni clic potrebbe essere diretto a un titolo di post diverso e il tuo codice dovrebbe essere in grado di recuperare il codice che è stato chiamato. Il codice seguente può aiutarti a raggiungere questo obiettivo:

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' );

Che cos'è "non una volta"?

Un nonce viene utilizzato per verificare se la richiesta proviene da una fonte autentica o meno. Un nonce può essere generato utilizzando una semplice funzione di WordPress: “wp_create_nonce”. Può essere ulteriormente verificato tramite un gestore AJAX utilizzando la funzione: "wp_verify_nonce". L'utilizzo di questa funzione è estremamente importante se stai svolgendo un'attività delicata sul tuo WordPress.

  Conclusione

  L'integrazione di AJAX con i tuoi plug-in può aiutare a migliorare visibilmente la reattività delle tue pagine. Se non ti senti a tuo agio con JavaScript, puoi optare per un linguaggio di programmazione con cui trovi più facile codificare o trovare un esperto che possa aiutarti a programmare per il tuo plugin. Prova a integrare AJAX nei tuoi plugin e non rimarrai deluso!