Ajax e WordPress

La tecnica Ajax, come abbiamo spiegato nel nostro articolo introduttivo sull'Ajax, è diventata popolare in quanto ci consente di aggiornare una parte del contenuto della pagina Web senza dover aggiornare la pagina. Ciò migliora l'esperienza dell'utente.

I siti WordPress non fanno ovviamente eccezione. Il modo in cui utilizziamo Ajax in WordPress, tuttavia, è diverso rispetto all'utilizzo su altre applicazioni web.

Che cos'è admin-ajax e come funziona?

WordPress ha già implementato Ajax per le proprie funzionalità di amministrazione, come il salvataggio automatico, gli aggiornamenti istantanei, la moderazione dei commenti, l'aggiunta/eliminazione di post ecc. Ciò significa che è pronto per l'uso semplicemente utilizzando le relative funzioni fornite da WordPress.

Il file chiave per questo scopo è il file admin-ajax.php , che si trova nella cartella wp-admin, che viene utilizzato per creare una connessione tra il client e il server.

All'interno di questo file, intorno alla riga 159, puoi vedere come tutte le richieste Ajax vengono registrate da alcuni action hook.

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

Il wp_ajax_{$action} si riferisce agli utenti che hanno effettuato l'accesso e il wp_ajax_nopriv_{$_REQUEST['action']} ai visitatori del sito. Se vuoi creare una richiesta che includa tutti gli utenti, dovremo utilizzare entrambi gli hook.

Quindi, con l'aiuto di queste azioni, puoi agganciare una funzione personalizzata e passare i tuoi dati a WordPress per fare una richiesta Ajax. Diamo un'occhiata a questo in azione.

Esempio di WordPress Ajax

Useremo lo stesso esempio che abbiamo fatto nel nostro articolo introduttivo Ajax e creeremo un modulo che consente all'utente di cercare nei titoli degli articoli e vedere i risultati suggeriti al volo.

Nello spazio di intestazione del nostro tema, inseriremo l'output HTML per il nostro modulo di ricerca. Usiamo il tema Twenty Twenty-One, quindi abbiamo modificato il file header.php che si trova nella cartella principale del tema e inserito le seguenti righe prima della riga <div id=”content” class=”site-content”>.

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

Ora il modulo che l'utente può utilizzare dovrebbe essere visibile nel front-end.

NOTA: qui, modificheremo direttamente il file header.php del tema senza creare un tema figlio. Questa non è una buona pratica e presenta una serie di inconvenienti. Se vuoi saperne di più sull'importanza dei temi per bambini, leggi il nostro articolo correlato. Ai fini di questo esempio abbiamo mantenuto il codice semplice e tematico. Pertanto, non è consigliabile utilizzare questo codice in un sito Web di produzione.

La prossima cosa è includere la funzione JavaScript che invierà la richiesta. Useremo invece jQuery, poiché viene già fornito con WordPress ed è pronto per l'uso. Ovviamente, dobbiamo includere uno script nel modo di WordPress.

Accoda il nostro copione

Diremo a WordPress dell'esistenza del file JS, modificando il file function.php del tema e accodando lo script in questo modo. Il nostro file sarà il custom.js che abbiamo creato e inserito in una nuova cartella "js" nella cartella principale del tema.

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

Nella funzione ajax_search_script() , abbiamo registrato e localizzato lo script, quindi abbiamo accodato i dati localizzati con la funzione incorporata wp_enqueue_script(). Quindi abbiamo agganciato la funzione ajax_search_script() a wp_enqueue_scripts, che è l'azione corretta da utilizzare quando si accodano gli script in WordPress.

L'uso di wp_localize_script potrebbe confondere qui perché, come funzione di WordPress, è stato originariamente progettato per tradurre qualsiasi stringa utilizzata nello script. Tuttavia viene spesso utilizzato anche per passare dati generici da PHP a JavaScript. Nel nostro caso, per passare l'URL Ajax e l'oggetto nonce.

L'utilizzo di nonce è necessario affinché la richiesta jQuery Ajax possa essere convalidata come richiesta proveniente dal sito web. Se non hai familiarità con l'uso di nonces in WordPress puoi leggere di più nel nostro articolo correlato.

L' ajax_object è il valore del parametro $object_name object_name richiesto della funzione wp_localize_script() ed è ciò che verrà successivamente utilizzato nel codice jQuery.

Grande! Ora riempiamo la nostra funzione con il contenuto giusto.

JavaScript

All'interno del file custom.js abbiamo incluso il nostro jQuery.

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

Questa volta abbiamo usato jQuery e JSON per passare i dati desiderati, action, search_text, nonce, allo script lato server. La funzione di callback get_articles_titles() sarà responsabile dell'elaborazione dei dati nel back-end, della preparazione dei risultati e dell'invio di una risposta.

Inoltre, come puoi vedere, utilizziamo ajax_object da wp_localize_script con i suoi due valori di array, nonce e url.

I ganci

Ora dobbiamo associare le azioni Ajax autenticate con gli hook necessari che abbiamo menzionato in precedenza. Ti ricordiamo che per includere sia gli utenti loggati che quelli non loggati, devi utilizzare entrambi gli hook. Nel tuo file functions.php aggiungi queste due righe sotto il codice aggiunto prima per accodare lo script.

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

Come avrai già notato, il nome dell'hook è in realtà un prefisso seguito dal nome dell'azione. La funzione hooked get_articles_titles è dove recupereremo effettivamente i titoli degli articoli. Definiremo questa funzione anche all'interno di functions.php .

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

Il check_ajax_referer è responsabile della verifica che la richiesta Ajax non venga elaborata esternamente.

I parametri necessari qui sono l'azione, che è correlata a 'nonce' => wp_create_nonce( 'ajax_nonce' ) all'interno della tua funzione ajax_search_script() , insieme al valore relativo a nonce.

E questo è tutto! Abbiamo appena creato un semplice esempio Ajax-PHP. A questo punto, se provi il codice in un ambiente WordPress di prova, dovrebbe funzionare in questo modo.

Dove il servizio 1-5 sono i titoli dei nostri post di prova.

Conclusione

Questo è un articolo su come possiamo aumentare la reattività e le prestazioni su un sito Web WordPress sfruttando i vantaggi di Ajax. Si spera che tu sia pronto ora per utilizzare tecniche simili sul tuo sito Web e divertirti a migliorare l'esperienza dell'utente!