Ajax, o Asynchronous JavaScript and XML, viene utilizzato per comunicare con gli script lato server e consente di caricare contenuti dinamici senza dover ricaricare la pagina.

Diciamo, ad esempio, che stai costruendo a sito web per un ente di beneficenza locale e vuoi incoraggiare un'atmosfera positiva. Puoi aggiungere un pulsante con l'etichetta "Mostra un po 'd'amore! »Con un contatore in home page e, grazie ad AJAX, ogni volta che si attiva il pulsante (cliccato da a visitatore), il contatore aumenta senza ricaricare la pagina.

Questo è l'esempio che costruiremo in questo tutorial.

In questo tutorial imparerai di più su cos'è AJAX, come può essere utilizzato e come creare fantastiche funzionalità con esso su WordPress.

Cominciamo.

Le basi di AJAX

• Il feed AJAX di solito segue i seguenti passi:
• Avvia una chiamata AJAX a causa dell'azione dell'utente
• Ricevere e elaborare la richiesta sul server
• Cattura la risposta ed esegui tutte le azioni necessarie tramite JavaScript
• Creazione di un nuovo ambiente a tema

Mettiamolo in pratica su WordPress. Il nostro primo esempio mostra un semplice popup contenente il numero di commenti per un articolo quando facciamo clic sul titolo. Useremo un tema figlio basato su " venti Sedici Da WordPress.

Ecco cosa dovete fare:

Crea una nuova cartella nella directory Temi nell'installazione di WordPress in " wp-content "E chiamalo" ajax-test ", crea i due file richiesto da WordPress, vale a dire " functions.php "," Styles.css "e aggiungi un nuovo file chiamato" script.js ". Aggiungi il seguente codice all'intestazione del tuo foglio di stile CSS (style.css).

/ * Nome Tema: URI Ajax Testing Tema: http://premium.wpmudev.com Descrizione: Un tema per testare la nostra conoscenza AJAX Autore: Daniel Pataki Autore URI: http://danielpataki.com Template: twentysixteen Versione: 1.0.0 licenza GNU General Public License o poi v2 licenza URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Il foglio di stile del tema principale deve essere caricato dal tema figlio. In passato questo veniva fatto importando il file CSS nel child theme, ma il modo consigliato per farlo è usare "enqueueing". Ricorda, ti abbiamo mostrato come utilizzare questa funzione.

Quindi aggiungiamo direttamente il foglio di stile padre e il nostro file JavaScript:

add_action ( 'wp_enqueue_scripts', 'ajax_test_scripts'); Funzione ajax_test_scripts () {wp_enqueue_style (genitore-style ', get_template_directory_uri ()' /style.css '.); wp_enqueue_script (. get_stylesheet_directory_uri 'ajax-test-script' () '/scripts.js', array ( 'jquery'), 1.0.0 ', true); }

Se ritieni di avere l'energia per fare un ulteriore passo avanti, trova una bella immagine, ritagliala a 880px per 660px e inseriscila nella cartella del tema del bambino, quindi rinominala " screenshot.png ". Apparirà nella sezione aspetto, quando si desidera attivare il tema.

Poiché questo tema child è basato su " venti Sedici E che non abbiamo cambiato nulla (ancora!), Il sito dovrebbe apparire esattamente come un tema classico con il tema " venti Sedici '.

Aggiunta di un pulsante

Per iniziare, aggiungeremo il pulsante " Mostra unpeu amore! ". Un ottimo posto per visualizzarlo sarebbe nella barra laterale degli articoli a tema.

Dopo alcune ricerche, si scopre che la barra laterale è creata da una funzione denominata " twentysixteen_entry_meta () »Che risiede nella directory« inc / template-tags.php '.

Questa funzione è " collegabile Il che significa che possiamo modificarlo definendolo nel nostro file functions.php. Il primo passo è copiare e incollare l'intera funzione nel nostro file functions.php:

funzione twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Autore', 'Usato prima del nome dell'autore del post.', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), array ('post', 'attachment'))) {twentysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('post-format', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Used before post format.', ' twentysixteen ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Lascia un commento su% s ', 'twentysixteen'), get_the_title ())); echo ' '; }}

Aggiungiamo la nostra chiave in fondo a tutti i metadati:

$ love = get_post_meta (get_the_ID (), 'show_some_love', true); $ amore = (vuoto ($ amore))? 0: $ love; eco ' '. $ amore. ' ';

Spiegare tutto questo codice:

La prima riga recupera il numero di amori che l'articolo ha ricevuto. In alcuni casi, questi dati non esisteranno, ovvero quando il pulsante non è stato ancora cliccato. Per questo motivo usiamo

la seconda riga nel codice per impostare il valore su 0 se il valore è vuoto.

La terza riga fornisce il pulsante, che consiste in un intervallo contenente un'immagine e il numero di amori. Ho lasciato l'origine dell'immagine vuota perché voglio usare un SVG lì dentro. È possibile utilizzare un SVG con codifica base64 per creare una linea di immagine. Questo ti salva dal fare richieste e renderà il tuo sito web più efficiente.

Ho usato questa piccola immagine gratuita disponibile questo link. Copia e incolla il codice che ricevi nell'immagine sorgente in questo modo:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

Ho anche usato un po 'di CSS per lo stile del pulsante per dargli un effetto al passaggio del mouse. Non è molto ovvio se si tratta di un pulsante, ma lo sarà per il nostro semplice test.

.amore pulsante img {margin-right: 6px; Opacità: 0.7; cursor: pointer; .amore pulsante} img: hover {opacità: 1; }

Attivazione di un'azione

Finalmente arriviamo al nostro JavaScript! Dobbiamo scegliere come target il nostro articolo e rilevare un clic su di esso. Ecco come farlo:

(function ($) {$ (document) .on ('click', '.love-button img', function () {alert ("l'amore è condiviso");})}) (jQuery);

Se fai clic sul pulsante a questo punto, dovresti vedere un avviso JavaScript con il testo "L'amore è condiviso". "

Requisiti dei dati

Invece di questo testo, dobbiamo attivare una chiamata AJAX. Prima di scrivere il nostro codice, capiremo cosa dobbiamo inviare.

L'URL AJAX

Prima di tutto, abbiamo bisogno di un posto dove inviare i dati. Il luogo in cui inviamo i dati elaborerà i dati e risponderà alla chiamata. WordPress ha un posto integrato per gestire le chiamate AJAX, che possiamo usare: il " admin-ajax.php " dentro " wp-admin ". Non possiamo aggiungere questo URL al nostro script (l'utilizzo di codici "grezzi" non è accettabile), Quindi cerchiamo di usare un po 'di WordPress astuzia.

La funzione wp_localize_script () Originariamente era destinato a tradurre stringhe in file JavaScript, cosa che fa bene. Possiamo anche usarlo per passare variabili ai nostri file JavaScript, in questo caso l'URL del nostro file AJAX. Aggiungi il seguente codice al nostro file " funzioni Come segue:

wp_localize_script ('ajax-test-scripts', 'ajaxTest', array ('ajax_url' => admin_url ('admin-ajax.php')));

Il risultato di quest'ultimo oggetto verrà chiamato ajaxTest, che conterrà una determinata matrice nell'ultimo parametro come proprietà. Per inserire il valore che possiamo usare ajaxTest.ajax_url nel nostro codice JavaScript.

L'identificatore dell'articolo

Invieremo dati arbitrari come identificatore dell'articolo (che useremo per identificare l'articolo su cui vogliamo "aggiungere un po 'di amore"). Questo può essere recuperato dal DOM. Dai un'occhiata alla struttura utilizzata nel tema "Twenty Sixteen" di seguito:

Il nostro pulsante ha un "articolo" come uno dei suoi antenati. Questo elemento ha la classe e contiene l'identificatore numerico dell'articolo. Anche se non è la soluzione più elegante, possiamo prendere l'ID da lì.

$ (Document) .on ( 'click', '.amore-tasto img', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). Attr ( 'id') .Rimontare ( 'post', '')); console.log (id)})

L'azione

WordPress richiede anche l'invio di un parametro denominato action. Poiché tutte le azioni verranno inviate ad admin-ajax, abbiamo bisogno di un modo per differenziare tali richieste, da qui l'uso di questo parametro.

Invio di una richiesta AJAX

Ora possiamo mettere tutto insieme. Dobbiamo creare un invito AJAX per " wp-admin / admin-ajax.php Che contiene l'ID articolo e un'azione. Ecco come dovrebbe apparire.

(Function ($) {$ (document) .on ( 'click', '.amore-tasto img', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') sostituire ( 'post', '')); $ .ajax ({url: tipo ajaxTest.ajax_url 'post', i dati: {azione: 'add_love' post_id: post_id} , il successo: la funzione (risposta) {alert ( 'successo, il nuovo conteggio è' + risposta)}})})}) (jQuery);

$ .ajax () è la funzione usata che accetta un sacco di parametri. L'URL contiene il target che è attualmente il nostro file ajax-url.php ". Il tipo è impostato su " settimana » come tutte le richieste inviate da a forma. Il parametro data è un oggetto che contiene " valore-chiave Che vogliamo inviare al server. Successivamente potremo leggerli con $ _POST ['action'] e $ _POST ['post_id'].

l'elaborazione delle applicazioni

Normalmente è necessario modificare il file " admin-ajax.php », Perché la richiesta viene inviata lì. È un file di sistema, quindi non lo modificheremo. WordPress ti consente di passare le richieste AJAX utilizzando parentesi quadre con il parametro action. Il modello è il seguente:

Se hai chiamato la tua azione add_love È necessario associare una funzione a un hook denominato " wp_ajax_add_love E / o wp_ajax_nopriv_add_love ". Le azioni NoPriv "Viene eseguito per gli utenti disconnessi, uno viene eseguito solo per gli utenti registrati. Nel nostro caso, vorremmo utilizzare entrambi. Come test rapido, imposteremo un valore di ritorno predefinito:

Il parametro success è una funzione, che verrà eseguita quando la chiamata AJAX sarà completata. Mostreremo un semplice avviso che mostra "Ben fatto! Il nuovo account è "con la nostra risposta aggiunta alla fine.

add_action ( 'wp_ajax_add_love', 'ajax_test_add_love'); add_action ( 'wp_ajax_nopriv_add_love', 'ajax_test_add_love'); funzione ajax_test_add_love () {echo 4; die (); }

Abbiamo collegato la nostra funzione a entrambe le parentesi, una fatta eco 4 e quindi ha utilizzato la funzione " die () ". Questo è necessario su WordPress, altrimenti riceverai un 0 alla fine di ogni risposta. Se fai clic sul pulsante ora dovresti vedere quanto segue:

Per ottenere il conteggio effettivo dei "Mi piace", tutto ciò che dobbiamo fare è recuperare il numero corrente, incrementarlo di uno, salvarlo nel database e visualizzare il nuovo numero.

Funzione ajax_test_add_love () {$ amore = get_post_meta ($ _POST [ 'post_id'] 'show_some_love', true); Amore = $ (empty ($ amore))? 0: $ amore; $ Amore ++; update_post_meta ($ _ POST [ 'post_id'], 'show_some_love' amore $); echo $ amore; die (); }

Se fai clic sul pulsante ora dovresti vedere la finestra pop-up che mostra "1". Se aggiorni la pagina, dovresti vedere il nuovo numero visualizzato. Fare di nuovo clic sul pulsante lo farà 2 ". Tutto quello che dobbiamo fare ora è assicurarci che il numero si rifletta direttamente nell'interfaccia utente.

Apportare modifiche all'interfaccia utente utilizzando la risposta

Questa parte sembra facile (perché lo è), ma generalmente è il più difficile da mettere insieme. Per ora tutto ciò che dobbiamo fare è individuare l'elemento che contiene il numero corrente e modificarne il contenuto tramite la risposta.

(Function ($) {$ (document) .On ( 'click', '.amore-tasto img', function () {var = parseInt post_id ($ (questo) .parents ( 'article.post:first'). . attr ( 'id') sostituire ( 'post', '')); var $ numero = $ (this) .parent () trova (. 'numero') $ .ajax ({url :. ajaxTest.ajax_url, tipo: 'post', i dati: {azione: 'add_love' post_id: post_id,}, il successo: la funzione (risposta) {$ number.text (risposta);}})})}) (jQuery);

Ho aggiunto solo due righe al nostro codice JS precedente. Alla riga 5 memorizzo l'elemento che contiene il numero sulla variabile numero di $. Sulla riga 14, modifico il testo di questo elemento per visualizzare la risposta, che è il nuovo numero.

Ecco fatto, in pratica dovresti essere in grado di vedere questa nuova funzionalità in azione sul tuo tema personalizzato. Se hai qualche problema, faccelo sapere. Hai un altro suggerimento che vuoi condividere? Fallo nella sezione commenti.