Come aggiungere API di terze parti a WordPress (plugin e nessun plugin)

Le API consentono di collegare il tuo sito WordPress a servizi di terze parti e fonti di dati. Ciò consente di aggiungere nuove funzionalità e funzionalità, rendere il tuo sito Web più interattivo e informativo o integrarlo con strumenti come analisi, provider di email marketing o CRMS.

WordPress è in grado di gestire integrazioni API sia semplici che complesse utilizzando plugin e codice personalizzato. In questo tutorial, ti insegneremo come fare entrambi e discuteremo il potenziale impatto sulle prestazioni delle integrazioni API e come mitigarle.

Cos'è un'API e perché aggiungerne una a WordPress?

API sta per "Interfaccia di programmazione dell'applicazione". Nel calcolo, un'interfaccia è qualcosa che collega due o più componenti tra loro. In questo caso, i componenti sono sistemi o applicazioni diversi.

Le API consentono loro di scambiare i dati in modo sicuro, in tempo reale e in un modo che ognuno di essi può capirli ed elaborarli. Sono molto comuni sul web. Se hai mai effettuato l'accesso a un sito Web utilizzando il tuo account Google o Facebook, è successo grazie alla loro API di autenticazione.

In WordPress, è possibile utilizzare le API per estrarre informazioni dai servizi esterni nel sito WordPress o inviare dati. Ad esempio, puoi usarli per:

• Mostra clima in diretta, tassi di cambio o aggiornamenti del mercato azionario sul tuo sito.

• Visualizza feed di social media.

• Pubblica automaticamente i tuoi contenuti sui social network.

• Integra il tuo sito con un gateway di pagamento come Stripe o PayPal.

• Mostra tariffe di spedizione in tempo reale nel tuo negozio online.

• Informazioni sul prodotto da un sistema di magazzino.

• Invia i dati degli abbonati da un modulo Web a un servizio di email marketing.

Le API consentono anche di automatizzare i processi sul tuo sito. Ad esempio, è possibile esternalizzare l'ottimizzazione delle immagini a un servizio come Imagify. In breve, le API rendono i siti Web più funzionali e intuitivi.

Importanti componenti API

Per utilizzare qualsiasi API, di solito hai bisogno di alcune parti di base:

• Endpoint URL : l'URL a cui invii la tua richiesta. Questo dice all'API cosa stai chiedendo (ad es. Meteo attuale, elenco di post sul blog, ecc.).

• Parametri: questi sono valori opzionali che trasmetti per personalizzare la richiesta, come posizione, ID, termini di ricerca o intervallo di date. I parametri aiutano a perfezionare ciò che l'API ti restituisce.

• Formato dei dati: questo è il formato in cui vengono trasmessi i dati. Il formato più comune è JSON perché è leggero e facile da usare sia in JavaScript che in PHP. XML o testo normale sono anche opzioni.

• Autenticazione: molte API richiedono una chiave API o un token per verificare che si possa accedere ai dati. Devi inviarlo per legittimare la tua richiesta.

Non tutte le API richiedono che ciascuno di questi pezzi ti dia una risposta. Discuteremo di più esempi più avanti di seguito.

L'API di riposo di WordPress

WordPress stesso ha diverse API integrate. Il più importante è l'API REST. Il riposo sta per "trasferimento di stato rappresentativo", il che significa semplicemente che l'API utilizza un determinato formato e architettura.

Lo scopo dell'API REST è rendere i dati WordPress accessibili ad altri sistemi. Ciò è utile, ad esempio, per la creazione di app mobili per gestire il tuo sito. L'API REST consente anche le cosiddette configurazioni WordPress senza testa. Qui, si collega un'interfaccia utente personalizzata, spesso basata su JavaScript con il back-end di WordPress tramite API.

Questo è un argomento importante, ma non la nostra attenzione qui. Invece, ci occuperemo di come aggiungere API esterne al tuo sito WordPress.

Come aggiungere un'API a WordPress con un plugin

Esistono due modi principali per integrare le API nel tuo sito WordPress:

• Codice: se hai le competenze o assumi qualcuno che lo fa, puoi collegare il tuo sito a un'API utilizzando il codice personalizzato, di solito PHP o JavaScript.

• Plugin: WordPress ha soluzioni di plug -in per quasi tutto, tra cui l'aggiunta e la configurazione di API sul tuo sito Web.

Esamineremo entrambi, a partire da soluzioni di plug -in. Questi sono comodi per i non sviluppatori perché è possibile configurarli tramite un'interfaccia utente e visualizzare i propri dati con code, widget o blocchi invece di gestire i file di codice o sito Web.

Accedi all'API di Google Maps

Per il nostro primo esempio, impareremo come aggiungere una mappa di Google Maps al tuo sito Web. Questa abilità è possibile grazie all'API di Google Maps, che ti consente di incorporare mappe, aggiungere marcatori come le posizioni degli archivi e modificare la progettazione della mappa.

La prima cosa di cui hai bisogno è creare un account Google Cloud gratuito con fatturazione abilitata. Una volta che hai, accedi e crea un nuovo progetto in alto.

Accedi al tuo progetto e vai su API & Services tramite il menu di navigazione o il collegamento sulla dashboard.

Fai clic sulla libreria , quindi trova l' API JavaScript Maps .

Accedere e abilitarlo. Riceverai una chiave API durante il processo, ma puoi anche trovarla sotto tasti e credenziali in seguito. Assicurati di limitarne l'uso al tuo dominio per la sicurezza.

Quindi, installa e attiva il plug -in WP Go Maps dal menu Plugin WordPress. Una volta pronto, vai su Maps> Impostazioni> Impostazioni avanzate , incolla nella chiave API di Google Maps e salva le impostazioni.

Successivamente, è possibile creare una nuova mappa utilizzando l'interfaccia del plugin.

Salvalo una volta che sei soddisfatto. È quindi possibile visualizzarlo sul tuo sito dove si desidera utilizzare il blocco mappa o con il codifica del short il plugin genera per la mappa personalizzata.

Congratulazioni, hai appena aggiunto un'API al tuo sito WordPress.

Usa wpgetapi per quasi tutte le API

L'esempio sopra funziona solo per una particolare API. Se desideri una soluzione di plug -in più generale per l'integrazione delle API nel tuo sito, una delle più popolari è WPGETPI.

Ecco come funziona: per questo esempio, vogliamo visualizzare informazioni meteorologiche da OpenWeathermap.org. Il primo passo è quello di creare un account per quel servizio e iscriversi a un piano (ce n'è uno con 1000 chiamate gratuite al giorno che puoi utilizzare per i test).

Tutte le informazioni per l'utilizzo dell'API del sito sono disponibili nella documentazione.

Imposta la chiamata API

Per iniziare, installare e attivare WPGETPI, quindi visitare WPGETPI> Imposta nella dashboard.

Compila le informazioni sulla prima schermata come segue:

• Nome API: Quindi sai a cosa serve ogni API.

• Identificatore univoco: il nome WordPress interno dell'API per visualizzarlo. Usa solo lettere minuscole e sottolinei, ad esempio "Open_weather_map".

• URL di base: l'indirizzo generale dell'API, senza un endpoint. In questo esempio è https://api.openweathermap.org .

Una volta pronto, salva per continuare.

Configurare l'endpoint e i parametri

Quindi, fai clic sulla scheda dell'API in cima per configurare il resto della chiamata API.

Ecco come farlo:

• ID univoco: il nome dell'endpoint che userai.

• Endpoint: questo viene aggiunto all'indirizzo di base (qui, è "Dati/3.0/OneCall").

• Metodo: la richiesta HTTP che afferma se inviare, leggere, creare, aggiornare o eliminare qualcosa all'endpoint. Vogliamo ricevere qualcosa, quindi usiamo Get.

• Formato dei risultati: se si desidera ricevere i dati in formato PHP o JSON dall'API, stiamo usando JSON qui.

• Timeout: per quanto tempo la connessione dovrebbe rimanere aperta.

Di seguito, imposta i parametri. L'API della mappa meteorologica aperta richiede tre:

• LAT: la latitudine della posizione per cui desideri informazioni meteorologiche.

• LON: Come probabilmente puoi immaginare, questa è la longitudine della posizione target.

• AppId: la tua chiave API, che puoi trovare nel tuo account.

L'API OpenWeatherMap accetta anche parametri opzionali:

• Escludi: consente di omettere alcune parti dei dati meteorologici, ad esempio previsioni giornaliere o orarie.

• Unità: imposta le tue unità di misurazione preferite.

• Lang: scegli la lingua di output.

Impostare i parametri nella sezione Stringa di query nelle coppie di valori chiave, ad esempio "LAT" a sinistra e "48.8542" a destra.

Salva, quindi fai clic su Test Endpoint nella parte superiore. Puoi vedere se funziona e rivedere la risposta.

Visualizza l'output

Se tutto va bene, è possibile utilizzare il tag modello o il codifica che WPGETPI fornisce per visualizzarlo sul tuo sito.

Quando ora anteprima la pagina o il post, vedi che vengono visualizzati i dati.

Naturalmente, attualmente sono dati JSON RAW, quindi non è così informativo da guardare. La versione a pagamento del plugin ha funzionalità per formattare e personalizzare ulteriormente l'output.

Accesso alle API in WordPress manualmente

Se non vuoi seguire il percorso del plug -in, puoi creare chiamate API a mano. Questo ti dà un maggiore controllo perché puoi personalizzare i dati richiesti e il suo output immediatamente.

Usando PHP

Continuando con l'esempio della mappa meteorologica aperta, ecco una funzione PHP per ottenere le stesse informazioni meteorologiche di cui sopra:

 function get_weather_data() { $api_key = 'YOUR_API_KEY_HERE'; // Replace with your actual API key $endpoint = "https://api.openweathermap.org/data/3.0/onecall?" . http_build_query([ 'lat' => 48.8542, 'lon' => 2.3467, 'exclude' => 'minutely,hourly,daily,alerts', 'units' => 'metric', 'appid' => $api_key ]); $response = wp_remote_get($endpoint); if (is_wp_error($response)) { return '<div class="weather-widget error">Failed to fetch weather data.</div>'; } $body = wp_remote_retrieve_body($response); $data = json_decode($body, true); if (!empty($data) && isset($data['current']['temp'])) { $temp = esc_html($data['current']['temp']); return '<div class="weather-widget">Current temperature in Paris: <span class="weather-temp">' . $temp . '°C</span></div>'; } return '<div class="weather-widget error">Weather data not available.</div>'; } function weather_shortcode() { return get_weather_data(); } add_shortcode('weather', 'weather_shortcode');

Ecco cosa fa:

• Fa una chiamata per le stesse coordinate e altri parametri.

• Utilizza wp_remote_get () per rendere la richiesta HTTP Get.

• Estrae solo la temperatura corrente dalla risposta JSON.

• Avvolge l'output in un po 'di HTML in modo da poterlo modellare se necessario.

• Registri un breve codice chiamato "[Weather]" per l'output dei dati in WordPress.

Inserisci la funzione nel file Functions.php del tuo tema (figlio) o un plug -in personalizzato. Quindi, utilizzare il codifica come prima. Ecco come appare sulla pagina:

JavaScript

Puoi anche usare JavaScript per connetterti alle API. Ciò è particolarmente utile per gli aggiornamenti di contenuti dinamici, le richieste AJAX o le applicazioni a pagina singola.

Ecco un esempio molto semplice usando il metodo Fetch () per visualizzare informazioni casuali sui gatti dall'API dei fatti del gatto:

 <div>Loading cat fact...</div> <div class="wp-block-buttons"> <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">New Cat Fact</a></div> </div> <script> function loadCatFact() { fetch('https://catfact.ninja/fact') .then(response => response.json()) .then(data => { document.getElementById('cat-fact').textContent = data.fact; }) .catch(error => { document.getElementById('cat-fact').textContent = 'Failed to load cat fact.'; console.error(error); }); } // Load the first fact when the page loads loadCatFact(); // Add button click handler for new facts document.getElementById('new-fact').addEventListener('click', loadCatFact); </script>

È possibile inserire questo in un blocco HTML personalizzato per visualizzarlo immediatamente in WordPress.

API di terze parti e prestazioni del sito Web

L'aggiunta di API di terze parti a WordPress può influire sulle prestazioni del tuo sito e i tempi di caricamento se non gestiti correttamente. Ogni volta che una pagina si carica e fa una chiamata API, aggiunge informazioni per caricare e aumenta il tempo di elaborazione del server. Le risposte API lente o non rispondenti possono anche ritardare il rendering della tua pagina, mostrare sezioni di pagina vuote o rompere il tuo sito.

Per evitare questi problemi, è importante cache le risposte API in modo da non essere recuperati su ogni carico di pagina. Molti plug-in API come WPGETPI hanno opzioni integrate per questo. Se scrivi chiamate API a mano, devi impostare i tuoi meccanismi di memorizzazione nella cache.

Inoltre, è possibile ridurre l'impatto delle prestazioni limitando le chiamate API a eventi specifici (ad esempio, un clic su un pulsante) anziché ogni caricamento della pagina. Un'altra opzione è pianificare le chiamate API utilizzando WP_CRON () e archiviare i risultati per la visualizzazione in seguito.

Migliorare le prestazioni con un plugin

Un altro passo efficace per ridurre al minimo l'effetto delle chiamate API sul sito è l'uso di WP Rocket.

Prima di tutto, il plugin aggiunge la memorizzazione nella cache al tuo sito (inclusa una cache mobile separata). Questo crea versioni statiche delle pagine rese e consente ai visitatori di vedere contenuti precaricati invece di aspettare le risposte API. Funziona particolarmente bene per i dati API visualizzati utilizzando codi short o PHP lato server.

Se si carica il contenuto API tramite JavaScript, WP Rocket aiuta a migliorare il suo tempo di carico di:

• JavaScript minimizzante per rendere i file più piccoli (abilitato per impostazione predefinita)

• Combinando diversi file in uno per download più veloci

• Differire i file di caricamento in modo asincrono

• Ritardare l'esecuzione di JavaScript

Hai la possibilità di escludere singoli script, plug -in e file da ottimizzare, nel caso in cui interferisca con la visualizzazione del contenuto dell'API. Inoltre, puoi fare tutto quanto sopra semplicemente controllando alcune caselle nel menu di ottimizzazione dei file .

Inoltre, WP Rocket viene fornito con una serie di miglioramenti automatici delle prestazioni in background, come ad esempio:

• Compressione GZIP

• Precarico per cache e collegamenti

• Ottimizzazione critica dell'immagine (esclude le immagini al di sopra della piega dal caricamento pigro) per migliorare la vernice più grande contentosa

• Rendering automatico pigro per caricare elementi che appaiono in alto sulle tue pagine web più velocemente

Basta installare e attivare il plug -in consente al tuo sito di beneficiare dell'80% delle migliori pratiche di prestazione e accelera immediatamente senza alcun sforzo richiesto da te. Inoltre, ci sono molte altre funzionalità che puoi attivare manualmente per aumentare la velocità del sito, come:

• Caricamento pigro per immagini, inclusi sfondi CSS, video e iFrames

• Precarico file esterni e caratteri

• Fonts di Google che ospita

• Ottimizzazione del database

• Opzioni per connettersi facilmente a una CDN, incluso RocketCdn

Caso di studio: chiamate API Speed Up con WP Rocket

Per comprendere meglio come l'aggiunta di un'API esterna influisca sulle prestazioni del sito e come può aiutare un plug -in come il razzo WP - abbiamo impostato un ambiente di test controllato. Abbiamo creato un sito Web Demo WordPress con contenuto fittizio e abbiamo aggiunto una mappa di Google Maps utilizzando WP Go Maps.

Completamente non ottimizzato, i suoi risultati di Insights Pagespeed erano i seguenti:

Abbiamo quindi attivato il razzo WP e le seguenti caratteristiche:

• Minificare CSS e JavaScript

• Rimuovere CSS inutilizzati

• Carica JavaScript differito

• Ritardare l'esecuzione JavaScript

Questo ha lasciato le seguenti modifiche:

Questo è un enorme miglioramento rispetto alla linea di base! Anche se può rendere il tuo sito Web molto più coinvolgente, i contenuti dinamici come Google Maps hanno un sacco di codice extra, il che potrebbe rallentare il tuo sito. WP Rocket mitiga il suo impatto - e tutto ciò che serve è alcuni clic.

Aggiungi API a WordPress senza la performance di trascinamento

Le API aprono infinite possibilità di contenuti dinamici e in tempo reale e potenti integrazioni. Grazie a plugin WordPress e facili integrazioni, puoi anche aggiungerli al tuo sito senza essere uno sviluppatore.

Tieni presente che ogni chiamata API può influire sulle prestazioni della pagina. Ti senti fuori dalla tua profondità di ottimizzarlo? WP Rocket è qui per aiutarti-provalo senza rischi per 15 giorni!