Come usare Ajax su WordPress

Se disponi di una base di clienti impegnata e attiva per il tuo sito web, potresti chiederti come puoi fornire loro un'esperienza web veramente interattiva e arricchita. Offrire interattività in tempo reale può essere una grande attrazione per il tuo pubblico.

Fortunatamente, JavaScript e XML asincroni (Ajax) sono un metodo accessibile per aggiungere funzionalità interattive al tuo sito web. Quando si tratta di WordPress, puoi persino semplificare il processo utilizzando un plug-in basato su Ajax.

In questo articolo, ti presenteremo Ajax e come funziona. Ti guideremo anche su come iniziare con Ajax in WordPress. Saltiamo subito dentro!

Cos'è Ajax e come funziona?

Ajax riunisce una serie di diversi linguaggi di programmazione, come HTML, CSS, JavaScript e altro. In azione, funziona dietro le quinte per ricevere richieste da un browser Web, inviarle al server e trasferire i risultati al browser.

Come utente web, non saprai che Ajax è al lavoro. Avrai semplicemente un'esperienza altamente interattiva. Sul tuo sito, ad esempio, potresti utilizzare Ajax per accettare i Mi piace sui post degli utenti che hanno effettuato l'accesso e visualizzare un conteggio in tempo reale.

Perché Ajax è utile?

Con Ajax, gli utenti non devono ricaricare una pagina per vederne alcune modifiche. Ciò significa che il tuo sito rimarrà veloce e offrirà un'esperienza utente più fluida. Poiché Ajax è efficiente, inviando avanti e indietro solo i dati di cui ha bisogno, può massimizzare la larghezza di banda ed evitare trasferimenti di dati più pesanti.

Come utenti web, raccogliamo sempre i vantaggi di Ajax. Un esempio è la funzione di ricerca con completamento automatico di Google.

Altri esempi che potresti conoscere includono i commenti di Facebook e i Mi piace di Instagram. Ajax è probabilmente al lavoro ovunque tu sia in grado di interagire con una pagina web e ricevere informazioni in cambio istantaneamente.

Iniziare con Ajax in WordPress

Quando si tratta di WordPress, ci sono alcuni modi in cui Ajax torna utile. Innanzitutto, daremo un'occhiata all'URL Ajax e a come usarlo insieme agli hook delle funzioni di WordPress.

L'URL Ajax in WordPress

Poiché WordPress utilizza Ajax per impostazione predefinita nella dashboard di amministrazione, aggiungere più funzionalità Ajax non è difficile. Se desideri utilizzare Ajax sul front-end del tuo sito, tuttavia, dovrai capire come funziona l'URL Ajax.

In WordPress, il tuo file admin-ajax.php ha un URL. Ciò fornisce le informazioni necessarie per inviare i dati per l'elaborazione ed è vitale per lo sviluppo Ajax front-end. WordPress utilizza una chiamata wp_localize_script() per utilizzare l'URL Ajax per connettere le funzioni JavaScript e PHP, poiché PHP non può rispecchiarle direttamente senza un aiuto.

Come utilizzare Ajax Action Hook su WordPress

WordPress utilizza gli hook nella sua programmazione, come un modo per plugin e temi di interagire con il WordPress Core. Gli hook sono disponibili in due varietà: 'azioni' e 'filtri'. Con Ajax, utilizzerai gli action hook per eseguire le funzioni.

Le azioni ti consentono di aggiungere dati a WordPress o di modificarne il funzionamento. Con Ajax, utilizzerai l'azione wp_ajax_(action). Una funzione personalizzata può quindi essere collegata a questo, da eseguire durante una chiamata Ajax.

Ad esempio, questo codice di esempio di WordPress mostra come una chiamata Ajax e un oggetto JavaScript possono essere combinati nello stesso file per eseguire un'azione:

<?php

add_action( 'wp_ajax_my_action', 'my_action' );

funzione mia_azione() {
globale $wpdb; // questo è il modo in cui si ottiene l'accesso al database

$qualunque cosa = intval( $_POST['qualunque cosa'] );

$ qualunque += 10;

echo $qualunque cosa;

wp_die(); // questo è necessario per terminare immediatamente e restituire una risposta corretta
}

Puoi anche creare file JavaScript separati per le tue azioni Ajax. Dovrai solo assicurarti di utilizzare l'URL Ajax, in modo che le chiamate non vadano perse.

Come utilizzare Ajax lavorando con un plug-in di esempio (3 passaggi)

Se vuoi sperimentare con Ajax, il modo migliore è creare un plugin con esso. Fortunatamente, ci sono molti pezzi di codice di esempio o plug-in essenziali da cui puoi iniziare. Per questo esempio, utilizzeremo un codice di esempio scaricabile per WordPress Plugin Boilerplate.

Passaggio 1: creare le strutture di file appropriate

Innanzitutto, dovrai assegnare un nome al tuo plug-in e creare le strutture di file appropriate per esso. Il nome deve essere univoco e non entrare in conflitto con nessun altro strumento nella directory dei plugin di WordPress. Questo perché quando un utente carica il tuo plugin, andrà nella sua directory wp-content/plugins/ .

Una volta che hai deciso un nome, devi creare almeno i seguenti tre file nella tua directory wp-content/plugins/ :

• nome-plugin.php
• nome-plugin.js
• nome-plugin.css

Ti consigliamo di inserire il file .php nella cartella del tuo nuovo plug-in e creare sottocartelle separate per i file JavaScript e CSS in cui vivere. Tutti i file necessari per il funzionamento del tuo plug-in dovranno trovarsi nella stessa cartella principale.

Nel passaggio successivo, vedrai che il codice di esempio che stiamo usando viene fornito con strutture di file pre-create. Riteniamo tuttavia che sia importante capire come iniziare da zero e perché i file devono essere strutturati in un certo modo.

Passaggio 2: scegli un codice di esempio con cui iniziare

L'uso di un file di codice di esempio è un buon punto di partenza quando provi Ajax sul tuo primo plugin. Tuttavia, vuoi sempre ricontrollare il codice di esempio per assicurarti che sia sicuro e non contenga errori.

Come accennato in precedenza, utilizzeremo WordPress Plugin Boilerplate per il nostro esempio. Questo codice di esempio viene fornito con i file necessari per completare il plug-in.

Questo plugin di esempio aderisce anche agli standard di codifica e documentazione di WordPress. Puoi scaricare il file .zip del plug-in dal sito Web standard per iniziare.

Passaggio 3: collegare le azioni al codice

Il codice di esempio del plugin che stiamo usando è costruito con la programmazione orientata agli oggetti (OOP). Ciò aiuta i programmatori a organizzare il proprio codice e crea un modello di sviluppo facilmente condivisibile e riutilizzabile.

Inoltre, il codice viene fornito con tutti i file necessari per lo sviluppo del plug-in, inclusi i file di attivazione e disattivazione nella directory /includes/ . Troverai anche facile individuare i file rivolti al pubblico e all'amministratore secondo necessità.

Diamo un'occhiata al nostro plugin di esempio, visualizzando l'inizio del file nome-plugin.php :

<?php

/**
* Il file bootstrap del plugin
*
* Questo file viene letto da WordPress per generare le informazioni sul plugin nel plugin
* area di amministrazione. Questo file include anche tutte le dipendenze usate dal plugin,
* registra le funzioni di attivazione e disattivazione e definisce una funzione
* registra le funzioni di attivazione e disattivazione e definisce una funzione
* che avvia il plugin.
*
* @link http://esempio.com
* @dalla 1.0.0
* @package Plugin_Name
*
* Plugin @wordpress
* Nome del plug-in: Boilerplate del plug-in di WordPress
* URI del plug-in: http://example.com/plugin-name-uri/
* Descrizione: questa è una breve descrizione di ciò che fa il plugin. Viene visualizzato nell'area di amministrazione di WordPress.
* Versione: 1.0.0
* Autore: il tuo nome o la tua azienda
* URI dell'autore: http://example.com/
* Licenza: GPL-2.0+
* URI licenza: http://www.gnu.org/licenses/gpl-2.0.txt
* Dominio del testo: nome del plugin
* Percorso del dominio: /languages
*/

Tutte le informazioni contenute in questa porzione di codice sono importanti per la registrazione del tuo plugin con WordPress. Questo è il modo in cui la directory del plugin saprà cosa visualizzare per il tuo plugin.

Ora dovrai fare alcune cose per collegare tutti i punti, tra cui:

• Assicurati che il tuo URL Ajax sia disponibile per il tuo script. Puoi usare wp_localize_script() per farlo.
• Crea una classe nome-plugin con la classe Nome-plugin{} nel tuo file nome-plugin.php . Qui è dove definirai i tuoi action hook.
• Crea una funzione JavaScript corrispondente nel tuo file nome-plugin.js .

Un elemento importante dell'approccio Ajax è la definizione di chi può utilizzare ciascuna funzione, in particolare durante la creazione di interattività front-end. Collegheremo un'azione front-end con un codice di esempio da WordPress:

if ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action' );
// Aggiungi altri hook di azione back-end qui
} altro {
// Aggiungi qui gli action hook front-end non Ajax
}

Prendiamo nota di alcune cose in questo esempio. Innanzitutto, queste azioni saranno disponibili a chiunque sul sito, indipendentemente dal fatto che abbia effettuato l'accesso a un account o meno. Questo è indicato dalla chiamata 'wp_ajax_nonpriv_()'. In secondo luogo, puoi vedere che ci sono anche azioni amministrative di back-end che vengono agganciate durante le azioni di front-end.

Per comprendere il processo che avviene in questo insieme di azioni, è anche importante sapere che my_frontend_action attiverà la funzione PHP my_frontend_action_callback().

Passaggio 4: testare ed eseguire il debug del plug-in

Una volta impostati tutti gli action hook e le funzioni corrispondenti di cui hai bisogno, ti consigliamo di testare e potenzialmente eseguire il debug del tuo plug-in (se ci sono problemi). Il tuo host web potrebbe offrire uno strumento di debug come parte del suo pacchetto di hosting.

Qui a WP Engine, forniamo il registro degli errori di WP Engine per aiutarti a trovare i punti problematici.

Il nostro registro degli errori fornisce una procedura dettagliata con codice colore di eventuali errori nel codice del tuo sito e dove interagiscono con i nostri server o altre parti del tuo sito. Ciò semplifica notevolmente la risoluzione dei problemi, sia che tu stia lavorando con Ajax o qualcos'altro.

Esplora altre risorse e strumenti di WP Engine

Ora che sei sulla buona strada per creare fantastici plugin per WordPress con Ajax, potresti valutare quali altri strumenti ti serviranno. WP Engine offre una Digital Experience Platform (DXP) completa ed è qui per aiutarti a creare nuovi plugin per WordPress.

Sia che tu sia interessato al nostro WP Engine Error Log in modo da poter eseguire un plug-in privo di bug, o che tu abbia solo bisogno di un hosting WordPress solido e sicuro, offriamo un'ampia varietà di piani e risorse da utilizzare!