Utilizzo di AJAX con PHP sul tuo sito WordPress con il tuo plug-in
Pubblicato: 2021-07-23
In questo articolo discutiamo di AJAX con PHP per il tuo sito Web WordPress.
AJAX è una tecnica per lo sviluppo web che aiuta gli utenti a sviluppare applicazioni interattive sul sito web. Fornisce agli utenti un'esperienza web più veloce e fluida. Consente agli utenti di apportare modifiche o aggiornare i contenuti della pagina Web senza ricaricare o aggiornare le pagine. È necessario conoscere vari linguaggi di programmazione per lavorare con AJAX.
Cos'è l'AJAX?
AJAX sta per 'JavaScript asincrono e XML'. Come accennato in precedenza, viene utilizzato per creare applicazioni Web divertenti, in continua evoluzione e interattive.
Alcuni degli esempi popolari di applicazioni web sviluppate con l'aiuto di AJAX e tecnologie correlate sono Google Maps, la funzione di completamento automatico sulla ricerca di Google, commenti e Mi piace su vari post sui social media e molti altri.
Nozioni di base di AJAX
Ajax con l'aiuto di vari linguaggi di programmazione come JavaScript, HTML, CSS e XML sviluppa applicazioni Web e siti Web più veloci e migliorati. Oltre a questi linguaggi di programmazione, per lo sviluppo di applicazioni web vengono utilizzati anche AJAX con PHP e altri linguaggi lato server.
Utilizza JavaScript per la visualizzazione dei contenuti, mentre i CSS aiutano nella presentazione e nel Document Object Model. Utilizza inoltre XHTML per il contenuto.
Nelle applicazioni Web tradizionali o nelle pagine Web, le informazioni vengono scambiate con il server in modo sincrono. D'altra parte, nelle applicazioni web, che sono state progettate per utilizzare AJAX, quando si verifica un evento come il clic di un pulsante o la compilazione di un modulo, JavaScript crea una richiesta XMLHTTP e la invia al server in formato XML.
Il server elabora la richiesta crea una risposta lato server e la rimanda al browser. JavaScript quindi elabora la risposta e il contenuto della schermata di visualizzazione corrente viene aggiornato. Poiché non è necessario ricaricare o aggiornare le pagine, gli utenti non saranno a conoscenza del trasferimento di alcuna informazione al server.
Competenze necessarie per lavorare con AJAX in WordPress
Come si comprende dalla discussione di cui sopra, gli utenti richiedono le seguenti abilità per utilizzare correttamente AJAX.
• Conoscenza di linguaggi di programmazione come JavaScript, HTML e CSS
• Competenza in linguaggi lato server come PHP e altri
• Nozioni di base su XML o JSON
Vantaggi dell'AJAX
I vari vantaggi di AJAX sono discussi di seguito
• Supporta quasi tutti i browser utilizzati al momento
• Implica un tempo di risposta più rapido, il che significa una migliore esperienza dell'utente in termini di velocità e prestazioni
• Sono disponibili librerie JavaScript open source come Prototype, jQuery, ecc
• Riduce il tempo tra il client e il server, quindi il tempo di entrambi gli utenti, così come il server, viene salvato
• Poiché il server non è tenuto a elaborare carichi di dati, aiuta a ridurre l'utilizzo della larghezza di banda e ottimizzare il funzionamento della rete.
• Poiché la richiesta XMLHTTP viene utilizzata per recuperare i dati, gli utenti possono eseguire più attività contemporaneamente.
AJAX in WordPress
AJAX viene utilizzato nel backend di WordPress, di conseguenza, ogni volta che vengono apportate modifiche ai post o alle categorie, o ogni volta che l'amministratore sta moderando i commenti, gli aggiornamenti verranno effettuati all'istante. AJAX è utilizzato principalmente con JQuery su WordPress. Il processo in cui WordPress utilizza AJAX è il seguente
• Quando viene effettuata una richiesta, questa passa attraverso il file 'admin-ajax.php' che si trova nella cartella 'wp-admin'.
• Queste richieste devono fornire almeno un dato, generalmente chiamato anche 'azione', utilizzando il metodo 'get' o 'post'.
• Questa azione richiede al codice nel file 'admin-ajax.php' di creare due hook, ovvero 'wp_ajax_my_action' e 'wp_ajax_nopriv_my_action'. 'my_action' in questi hook indica il valore della variabile 'action' del metodo 'get' o 'post'.
• Mentre il primo hook è inteso per le azioni intraprese dagli utenti che hanno effettuato il login, il secondo hook è destinato esclusivamente agli utenti che hanno effettuato il logout.
• Le funzioni agganciate dovrebbero essere pianificate per il degrado grazioso, che assicura che anche se JavaScript è disabilitato sui browser, i codici funzioneranno comunque.
Crea un plugin AJAX per WordPress
In questa sezione, prendiamo l'esempio di un plug-in AJAX di base per WordPress chiamato "Post Likes Counter". Questo plugin include le seguenti funzionalità:
• Viene aggiornato istantaneamente sul frontend
• Gli utenti che hanno effettuato l'accesso possono mettere mi piace ai post.
• Se gli utenti disconnessi provano a mettere mi piace al post, sullo schermo apparirà un messaggio di errore
• Questo plugin aiuta a mantenere il record totale del numero di "Mi piace" e li mostra
Innanzitutto, è necessario creare e attivare un plug-in WordPress vuoto. Per creare un plug-in, è necessario eseguire i seguenti passaggi.
Passaggio 1 : seleziona un nome univoco per il plug-in. È possibile controllare i repository dei plug-in per assicurarsi che il nome proposto per il plug-in non sia già in uso. Di solito, gli sviluppatori di plugin selezionano il nome di un plugin in base alla funzione che dovrebbe svolgere.
Passaggio 2 : nel passaggio successivo è necessario creare un file PHP utilizzando il nome del plug-in selezionato. Poiché gli utenti che installeranno questo plugin, dovranno inserire il file PHP nella directory del plugin di WordPress 'wp-content/plugins-' per la sua installazione, i plugin non possono condividere lo stesso nome per i file PHP.
Pertanto, anche il nome del file del plug-in dovrebbe essere univoco per evitare conflitti con un altro plug-in nel repository. È possibile utilizzare il proprio nome o il nome della propria azienda nel prefisso per creare un nome univoco per il file PHP.
Passaggio 3 : Va notato che il plug-in di WordPress deve contenere almeno un file PHP insieme a JavaScript, CSS, lingue e file immagine. Se sono presenti più file, selezionare un nome univoco per la directory e un nome preferito per il file PHP principale.
Inserisci tutti i file del plug-in nella directory creata e chiedi agli utenti del plug-in di caricare l'intera directory nella directory 'wp-content/plugins/'.
L'installazione di WordPress può essere configurata per modificare la directory dei plug-in standard 'wp-content/plugins/'. Pertanto, è necessario utilizzare plugin_dir_path() e plugin_url() per percorso assoluto e URL nel loro codice PHP.
Post modello del tema
Dopo aver creato il plug-in, è necessario trovare il modello di post "single.php" del proprio tema. Potrebbe essere trovato nella directory principale del tema attivo. Viene utilizzato quando viene interrogato un singolo post; dove si vuole posizionare il plug-in "Post Like Counter". Il file deve essere mantenuto aperto per la modifica.
Prepara il Post Template pronto per la chiamata AJAX
È necessario creare un collegamento in modo che gli utenti possano apprezzare i post. Se gli utenti hanno abilitato JavaScript, possono utilizzare i file JavaScript (che verranno creati in seguito) oppure possono seguire direttamente il collegamento. A tale scopo, inserisci il seguente codice nel file 'single.php'. Questo codice può anche essere aggiunto a qualsiasi parte del modello contenuta nel file 'single.php'.
// Il valore della meta chiave "Mi piace" memorizzerà il conteggio totale dei Mi piace per un post specifico, mostrerà 0 se è una stringa vuota ID, "mi piace", vero); $mi piace = ($mi piace == "") ? 0 : $ mi piace; ?> Questo post ha <span id='like_counter'></span> mi piace<br> // Collegamento al file admin-ajax.php. Nonce check incluso per una maggiore sicurezza. Nota la classe "user_like" per i client abilitati JS. ID.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' . $ collegamento . '">Mi piace a questo post</a>'; ?>
Affrontare la chiamata Ajax senza JavaScript
Facendo clic sul collegamento creato nel passaggio precedente, si verrà inoltrati allo script 'admin-ajax.php'; tuttavia, non troveranno alcun risultato utile, poiché la funzione non viene creata per eseguire l'azione. Per creare la funzione nel file del plugin e aggiungerla agli hook creati da WordPress, inserisci il codice seguente.
<?php // qui usato solo per abilitare l'evidenziazione della sintassi. Lascialo fuori se è già incluso nel file del plug-in.
// definisce le azioni per i due hook creati, il primo per gli utenti loggati e il successivo per gli utenti disconnessi
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "per favore_login");
// definisce la funzione da attivare per gli utenti che hanno effettuato l'accesso
funzione my_user_like() {
// nonce controlla un ulteriore livello di sicurezza, la funzione uscirà se fallisce
if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_like_nonce")) {
exit("Woof Woof Woof");
}
// recupera like_count per un post, impostalo a 0 se è vuoto, incrementa di 1 quando viene registrato un clic
$like_count = get_post_meta($_REQUEST["post_id"], "Mi piace", vero);
$like_count = ($like_count == ') ? 0 : $ come_conteggio;
$nuova_conte_mi piace = $conte_mi piace + 1;
// Aggiorna il valore di 'Mi piace' meta chiave per il post specificato, crea nuovi metadati per il post se non ne esistono
$like = update_post_meta($_REQUEST["post_id"], "Mi piace", $new_like_count);
// Se l'azione precedente non riesce, il tipo di risultato è impostato su 'error' e like_count impostato sul vecchio valore, in caso di successo, aggiornato a new_like_count
if($like === falso) {
$risultato['tipo'] = "errore";
$risultato['like_count'] = $like_count;
}
altro {
$risultato['tipo'] = "successo";
$risultato['like_count'] = $nuovo_like_count;
}
// Controlla se l'azione è stata attivata tramite una chiamata Ajax. In caso affermativo, verrà attivato il codice JS, altrimenti l'utente verrà reindirizzato alla pagina del post
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$risultato = json_encode($risultato);
eco $risultato;
}
altro {
header("Posizione: ".$_SERVER["HTTP_REFERER"]);
}
// non dimenticare di terminare i tuoi script con una funzione die() - molto importante
morire();
}
// definisce la funzione da attivare per gli utenti disconnessi
funzione please_login() {
echo "Devi accedere per mettere mi piace";
morire();
}
Se tutto funziona, quando un utente che ha effettuato l'accesso farà clic sul link "Mi piace questo post", il numero di Mi piace verrà aggiornato automaticamente. Se invece JavaScript è disabilitato, la pagina verrà aggiornata visualizzando i conteggi aggiornati dei 'mi piace'.
Aggiunta del supporto per JavaScript
L'aggiunta del supporto per JavaScript può semplificare le cose. Per utilizzare AJAX con PHP su WordPress, è necessario accodare la libreria jQuery insieme al file JavaScript personalizzato del plugin. A tale scopo, scrivi il seguente codice nel plugin.
admin_url( 'admin-ajax.php' )));
// accoda la libreria jQuery e lo script che hai registrato sopra
wp_enqueue_script('jquery');
wp_enqueue_script( 'liker_script' );
}
Successivamente, è necessario creare il file Javascript "liker_script.js", che verrà ulteriormente caricato nella cartella principale del plug-in. Il codice seguente viene utilizzato per creare il file "liker_script.js".
jQuery(documento).ready( funzione() {
jQuery(".user_like").click( funzione(e) {
e.preventDefault();
post_id = jQuery(questo).attr("data-post_id");
nonce = jQuery(questo).attr("data-nonce");
jQuery.ajax({
digita: "posta",
tipo di dati: "json",
URL: myAjax.ajaxurl,
data: {azione: "my_user_like", post_id: post_id, nonce: nonce},
successo: funzione(risposta) {
if(response.type == "successo") {
jQuery("#like_counter").html(response.like_count);
}
altro {
alert("Impossibile aggiungere il tuo like");
}
}
});
});
});
Come implementare AJAX nei temi WordPress
I seguenti passaggi aiuteranno nell'implementazione di AJAX con PHP nei temi di WordPress. Ad esempio, supponiamo che il nostro lavoro sia quello di visualizzare le categorie in un menu a discesa e facendo clic su 'Categoria padre', le sottocategorie appariranno in un'altra casella a discesa. Questo compito sarà portato a termine con l'aiuto dei seguenti passaggi
Passaggio 1 : seleziona "categorie" sul lato sinistro della dashboard, inserisci il nome delle categorie nella casella che appare sul lato destro e inserisci lo slug della categoria qui sotto. Se la categoria principale è in fase di creazione, selezionare 'nessuna', oppure se le sottocategorie sono in fase di creazione, seleziona la categoria principale dalle opzioni.
Passaggio 2 : in questo passaggio, verrà creato un modello WordPress in cui verrà implementata la funzionalità AJAX. Apri un nuovo file PHP e salvalo. Inserisci il seguente codice nella pagina creata.
Nel codice sopra, "Nome modello: Implementa Ajax", è il nome del modello WordPress e le funzioni "get_header()" e "get_footer()" vengono utilizzate per visualizzare il contenuto dell'intestazione e del piè di pagina della pagina.
In primo luogo, è necessario includere il file della libreria jQuery nella pagina che aiuterà ad aggiungere il materiale AJAX. AJAX con PHP è possibile utilizzare qualsiasi libreria JavaScript o chiamare AJAX con JavaScript grezzo. Nell'esempio seguente, la libreria JavaScript jQuery viene utilizzata per l'implementazione di AJAX.
Passaggio 3 : aggiungi il file jQuery nel modello e chiama la funzione 'wp_dropdown_categories' in modo che le categorie principali nel menu a discesa possano essere recuperate.
#contenuto{larghezza:auto; altezza: 400px; margine:50px;}
<div>
</div>
<?php
Passaggio 4 : inserire il codice jQuery per ottenere l'ID della categoria principale che viene selezionata. Invialo al file 'functions.php' per ottenere le sottocategorie sotto l'ID della categoria principale selezionata. I risultati possono essere quindi rinviati alla pagina senza aggiornarla.
$(funzione(){
$('#gatto_principale').cambia(funzione(){
var $mainCat=$('#main_cat').val();
// chiama ajax
$("#sub_cat").vuoto();
$.ajax({
URL:"/wp-admin/admin-ajax.php",
digita: 'POST',
data:'action=my_special_action&main_catid=' + $mainCat,
successo: funzione (risultati)
{
// avviso(risultati);
$("#sub_cat").removeAttr("disabilitato");
$("#sub_cat").append(risultati);
}
});
}
);
});
In questo codice sopra, il codice viene aggiunto all'evento di modifica del menu a discesa delle categorie principali con l'ID '#main_cat'.
var $mainCat=$('#main_cat').val();
La funzione .val() aiuta a ottenere il valore dell'opzione selezionato dal menu a discesa e memorizzarlo nella variabile '$mainCat'.
$("#sub_cat").vuoto();
Il menu a discesa della sottocategoria '#sub_cat' deve essere lasciato libero, se contiene un valore precedente, prima di chiamare l'AJAX.
La seguente riga jQuery aiuterà a chiamare le funzioni jQuery di AJAX. Controllare i parametri della funzione AJAX forniti nella sezione seguente.
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
digita: 'POST',
Per far funzionare AJAX in WordPress, viene utilizzato il parametro 'URL'. Pertanto, le richieste verranno inviate al file 'admin-ajax.php'. Successivamente, gli hook nel file 'functions.php' verranno chiamati per ottenere i dati pubblicati che sono stati inviati all'URL: '/wp-admin/admin-ajax.php'
Per inviare i valori insieme alla richiesta, viene utilizzato il parametro 'data'. In questo esempio vengono utilizzati due argomenti con il parametro data: action e main_catid.
Passaggio 5 : nel file 'functions.php', il codice seguente viene utilizzato per agganciare un'azione.
add_action('wp_ajax_my_special_action', 'my_action_callback');
In questa azione sopra, hook ha due argomenti. Nel primo argomento 'wp_ajax_my_special_action', 'wp_ajax_' è il valore inviato insieme al parametro di dati 'action'. Nel secondo argomento 'my_action_callback', i dati verranno elaborati e i risultati verranno restituiti.
Questo hook di azione sopra è per gli utenti che hanno effettuato l'accesso. Per gli utenti disconnessi, è possibile agganciare la seguente azione
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
Il codice finale dopo l'aggiunta di hook sia per gli utenti che per la funzione di richiamata è il seguente
funzione implementare_ajax() {
if(isset($_POST['main_catid']))
{
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categorie come $cat) {
$opzione .= 'term_id.'">';
$opzione .= $gatto->nome_gatto;
$opzione .= ' ('.$cat->conteggio_categoria.')';
$opzione .= '';
}
echo 'Scegli...'.$opzione;
morire();
} // finisci se
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//per utenti che non hanno effettuato l'accesso.
Passaggio 6 : in questo passaggio, crea una nuova pagina nella dashboard e assegna il modello ad essa. Dopo che la pagina è stata caricata nel browser, verrà caricato il primo menu a discesa con le categorie principali.
Poiché il secondo menu a discesa è vuoto, seleziona l'opzione nel primo menu a discesa per verificare come funziona.
Pertanto AJAX con PHP può essere utilizzato sul sito WordPress con l'aiuto di un plug-in appena creato.