Cum se adaugă API-uri terțe la WordPress (plugin și fără plugin)

API-urile vă permit să conectați site-ul dvs. WordPress la servicii terțe și surse de date. Acest lucru vă permite să adăugați noi funcții și funcționalități, să faceți site -ul dvs. web mai interactiv și mai informativ sau să îl integrați cu instrumente precum analize, furnizori de marketing prin e -mail sau CRMS.

WordPress poate gestiona atât integrări API simple, cât și complexe, folosind pluginuri, precum și cod personalizat. În acest tutorial, vă vom învăța cum să faceți atât, cât și să discutați despre impactul potențial al performanței integrărilor API și cum să le atenuați.

Ce este o API și de ce să adăugați una la WordPress?

API reprezintă „Interfață de programare a aplicațiilor”. În calcul, o interfață este ceva care conectează două sau mai multe componente între ele. În acest caz, componentele sunt sisteme sau aplicații diferite.

API-urile le permite să facă schimb de date în siguranță, în timp real și într-un mod în care fiecare dintre ele îl poate înțelege și prelucra. Sunt foarte frecvente pe web. Dacă v -ați conectat vreodată la un site web folosind contul dvs. Google sau Facebook, s -a întâmplat datorită API -ului lor de autentificare.

În WordPress, puteți utiliza API -uri pentru a trage informații din serviciile externe pe site -ul dvs. WordPress - sau pentru a trimite date. De exemplu, le puteți folosi pentru:

• Afișați vreme live, tarife de schimb sau actualizări ale pieței bursiere pe site -ul dvs.

• Afișează fluxuri de social media.

• Postează automat conținutul tău pe rețelele de socializare.

• Integrați -vă site -ul cu o poartă de plată precum Stripe sau PayPal.

• Afișați tarife de transport în timp real în magazinul dvs. online.

• Trageți informațiile despre produs dintr -un sistem de depozitare.

• Trimiteți datele abonaților dintr -un formular web la un serviciu de marketing prin e -mail.

API -urile vă permit, de asemenea, să automatizați procesele de pe site -ul dvs. De exemplu, puteți externaliza optimizarea imaginilor către un serviciu precum imaginea. Pe scurt, API-urile fac site-urile web mai funcționale și mai prietenoase.

Componente API importante

Pentru a utiliza orice API, de obicei aveți nevoie de câteva părți de bază:

• URL -ul Endpoint : URL -ul la care trimiteți cererea dvs. Acest lucru spune API -ului ce solicitați (de exemplu, vremea curentă, lista de postări pe blog etc.).

• Parametri: Aceștia sunt valori opționale pe care le transmiteți pentru a personaliza cererea, cum ar fi locația, ID -ul, termenii de căutare sau intervalul de date. Parametrii ajută la rafinarea a ceea ce API vă oferă înapoi.

• Format de date: Acesta este formatul în care sunt transmise datele. Cel mai frecvent format este JSON, deoarece este ușor și ușor de utilizat atât în JavaScript, cât și în PHP. XML sau text simplu sunt, de asemenea, opțiuni.

• Autentificare: Multe API necesită o cheie API sau un jeton pentru a verifica dacă aveți voie să accesați datele. Trebuie să o trimiteți de -a lungul pentru a vă legitima cererea.

Nu orice API necesită fiecare dintre aceste piese să vă ofere un răspuns. Vom discuta mai jos exemple reale mai jos.

Wordpress -ul odihnește API

WordPress în sine are mai multe API -uri integrate. Cel mai proeminent este API -ul REST. REST reprezintă „transfer de stat reprezentativ”, ceea ce înseamnă pur și simplu că API -ul folosește un anumit format și arhitectură.

Scopul API -ului REST este de a face datele WordPress accesibile altor sisteme. Acest lucru este util, de exemplu, pentru construirea de aplicații mobile pentru a vă gestiona site -ul. API-ul REST permite, de asemenea, așa-numitele configurații WordPress fără cap. Aici, conectați o interfață de utilizator personalizată, adesea bazată pe JavaScript, cu WordPress Back End prin API.

Acesta este un subiect important, dar nu și accentul nostru aici. În schimb, ne vom ocupa de modul în care puteți adăuga API -uri externe pe site -ul dvs. WordPress.

Cum să adăugați o API la WordPress cu un plugin

Există două moduri principale prin care puteți integra API -urile în site -ul dvs. WordPress:

• Cod: Dacă aveți abilitățile sau angajați pe cineva care o face, puteți conecta site -ul dvs. la o API folosind cod personalizat, de obicei PHP sau JavaScript.

• Plugins: WordPress are soluții de pluginuri pentru aproape orice, inclusiv adăugarea și configurarea API -urilor pe site -ul dvs. web.

Vom trece peste ambele, începând cu soluții de plugin. Acestea sunt confortabile pentru non-dezvoltatori, deoarece le puteți configura printr-o interfață de utilizator și afișați datele lor cu coduri scurte, widget-uri sau blocuri în loc să faceți față fișierelor de cod sau site.

Accesați API -ul Google Maps

Pentru primul nostru exemplu, vom învăța cum să adăugăm o hartă Google Maps pe site -ul dvs. web. Această abilitate este posibilă datorită API -ului Google Maps, care vă permite să încorporați hărți, să adăugați markeri precum locațiile magazinului și să schimbați designul hărții.

Primul lucru de care aveți nevoie este să creați un cont Google Cloud gratuit cu facturare activată. După ce aveți asta, conectați -vă și creați un nou proiect în partea de sus.

Accesați proiectul dvs. și accesați APIS & Services, fie prin meniul de navigare, fie prin comanda rapidă de pe tabloul de bord.

Faceți clic pe bibliotecă , apoi găsiți API -ul JavaScript Maps .

Accesați și activați -l. Veți primi o cheie API în timpul procesului, dar o puteți găsi și mai târziu sub taste și acreditări . Asigurați -vă că restricționați utilizarea sa la domeniul dvs. pentru securitate.

Apoi, instalați și activați pluginul WP GO MAPS din meniul Plugin -uri WordPress. Odată gata, accesați MAPS> Setări> Setări avansate , lipiți în cheia API Google Maps și salvați setările.

După aceea, puteți crea o nouă hartă folosind interfața pluginului.

Salvați -l odată ce sunteți mulțumit. Puteți să -l afișați pe site -ul dvs. oriunde doriți să utilizați blocul de hartă sau cu codul scurt pe care pluginul îl generează pentru harta personalizată.

Felicitări, ai adăugat doar o API pe site -ul tău WordPress.

Utilizați WPGETAPI pentru aproape orice API

Exemplul de mai sus funcționează numai pentru o anumită API. Dacă doriți o soluție de plugin care este mai generală pentru integrarea API -urilor în site -ul dvs., unul dintre cele mai populare este WPGETAPI.

Iată cum funcționează: pentru acest exemplu, dorim să afișăm informații meteorologice de la OpenWeatherMap.org. Primul pas pentru aceasta este să creezi un cont pentru acel serviciu și să te înscrii la un plan (există unul cu 1000 de apeluri gratuite pe zi pe care le poți utiliza pentru testare).

Toate informațiile pentru utilizarea API -ului site -ului sunt disponibile în documentație.

Configurați apelul API

Pentru a începe, instalați și activați WPGETAPI, apoi accesați WPGETAPI> Configurare în tabloul de bord.

Completați informațiile de pe primul ecran după cum urmează:

• Numele API: Deci știți pentru ce este fiecare API.

• Identificator unic: numele WordPress-Internal al API-ului pentru a-l afișa. Folosiți doar litere mici și subliniere, de exemplu, „Open_Weather_Map.”

• URL de bază: adresa generală a API -ului, fără punct final. În acest exemplu, acesta este https://api.openweathermap.org .

Odată gata, salvați pentru a continua.

Configurați -vă punctul final și parametrii

Apoi, faceți clic pe fila API -ului de sus pentru a configura restul apelului API.

Iată cum să faci asta:

• ID unic: numele finalului pe care îl veți folosi.

• Endpoint: Aceasta este anexată la adresa de bază (aici, este „date/3.0/OneCall”).

• Metodă: Solicitarea HTTP care afirmă dacă trimite, citește, creează, actualizează sau șterge ceva la punctul final. Vrem să primim ceva, așa că folosim GET.

• Formatul rezultatelor: Indiferent dacă doriți să primiți datele în format PHP sau JSON din API, folosim JSON aici.

• Timeout: cât timp trebuie să rămână deschisă conexiunea.

Mai jos, setați parametrii. API -ul hărții vremii deschise necesită trei:

• Lat: Latitudinea locației pentru care doriți informații despre vreme.

• LON: După cum probabil puteți ghici, aceasta este longitudinea locației dvs. țintă.

• APPID: Cheia dvs. API, pe care o puteți găsi în contul dvs.

API -ul OpenWeatherMap acceptă, de asemenea, parametri opționali:

• Excludeți: vă permite să omiteți unele părți ale datelor meteorologice, de exemplu, prognoze zilnice sau pe oră.

• Unități: Setați -vă unitățile de măsurare preferate.

• Lang: Alegeți -vă limba de ieșire.

Setați parametrii din secțiunea șir de interogare în perechi de valori cheie, de exemplu „lat” din stânga și „48.8542” din dreapta.

Salvați, apoi faceți clic pe Test Endpoint în partea de sus. Puteți vedea dacă funcționează și revizui răspunsul.

Afișați ieșirea

Dacă totul este bine, puteți utiliza eticheta de șablon sau codul scurt WPGETAPI pentru a -l afișa pe site -ul dvs.

Când previzualizați acum pagina sau postarea, vedeți că datele apar.

Desigur, în prezent, sunt date JSON brute, deci nu este atât de informativ să ne uităm. Versiunea plătită a pluginului are funcționalități pentru a formata și personaliza ieșirea în continuare.

Accesarea API -urilor în WordPress manual

Dacă nu doriți să parcurgeți ruta pluginului, puteți crea apeluri API de mână. Acest lucru vă oferă mai mult control, deoarece puteți personaliza datele pe care le solicitați și ieșirea lor imediat.

Folosind php

Continuând cu exemplul de hartă a vremii deschise, iată o funcție PHP pentru a obține aceleași informații despre vreme ca mai sus:

 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');

Iată ce face:

• Face un apel pentru aceleași coordonate și alți parametri.

• Utilizează wp_remote_get () pentru a face solicitarea HTTP GET.

• Trage doar temperatura curentă din răspunsul JSON.

• Înfășurați ieșirea în unele HTML, astfel încât să o puteți modela, dacă este nevoie.

• Înregistrează un cod scurt numit „[Vremea]” pentru ieșirea datelor din WordPress.

Puneți funcția fie în fișierul funcții.php al temei (copilului) sau a unui plugin personalizat. Apoi, folosiți codul scurt ca înainte. Iată cum arată pe pagină:

JavaScript

Puteți utiliza, de asemenea, JavaScript pentru a vă conecta la API -uri. Acest lucru este util în special pentru actualizări dinamice de conținut, solicitări AJAX sau aplicații cu o singură pagină.

Iată un exemplu foarte simplu folosind metoda Fetch () pentru afișarea informațiilor aleatorii despre pisicile din API -ul Cat Facts:

 <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>

Puteți introduce acest lucru într -un bloc HTML personalizat pentru a -l afișa imediat în WordPress.

API-uri terțe și performanțe ale site-ului

Adăugarea API-urilor terțe la WordPress poate afecta performanțele și timpul de încărcare al site-ului dvs., dacă nu este manipulat corect. De fiecare dată când o pagină încarcă și efectuează un apel API, aceasta adaugă informații pentru încărcare și crește timpul de procesare a serverului. Răspunsurile API lente sau fără răspuns pot întârzia redarea paginii, afișează secțiuni de pagini goale sau pot rupe site -ul.

Pentru a evita aceste probleme, este important să cacheți răspunsurile API, astfel încât să nu fie preluate la fiecare încărcare a paginii. Multe plugin-uri API precum WPGETAPI au opțiuni încorporate pentru asta. Dacă scrieți apeluri API de mână, trebuie să vă configurați propriile mecanisme de memorie în cache.

În plus, puteți reduce impactul performanței prin limitarea apelurilor API la evenimente specifice (de exemplu, un clic pe un buton) în loc de fiecare încărcare a paginii. O altă opțiune este să programați apeluri API folosind WP_CRON () și să stocați rezultatele pentru afișare mai târziu.

Îmbunătățirea performanței cu un plugin

Un alt pas eficient pentru a minimiza efectul apelurilor API asupra performanței site -ului este utilizarea rachetei WP.

În primul rând, pluginul adaugă memorie în cache pe site -ul dvs. (inclusiv un cache mobil separat). Acest lucru creează versiuni statice ale paginilor dvs. redate și permite vizitatorilor să vadă conținut preîncărcat în loc să aștepte răspunsurile API. Acest lucru funcționează în special pentru datele API afișate folosind coduri scurte sau PHP din partea serverului.

Dacă încărcați conținut API prin JavaScript, WP Rocket ajută la îmbunătățirea timpului său de încărcare cu:

• MINIFICAREA JavaScript pentru a face fișierele mai mici (activate în mod implicit)

• Combinând mai multe fișiere într -unul pentru descărcări mai rapide

• Amânarea și încărcarea asincronă a fișierelor

• Întârzierea execuției JavaScript

Aveți opțiunea de a exclude scripturile, pluginurile și fișierele individuale de la optimizate, în cazul în care acesta interferează cu afișarea conținutului API. În plus, puteți face toate cele de mai sus prin simpla verificare a câtorva căsuțe din meniul de optimizare a fișierelor .

Mai mult, WP Rocket vine cu o serie de îmbunătățiri automate ale performanței în fundal, cum ar fi:

• Compresie Gzip

• Preîncărcare pentru cache și legături

• Optimizarea critică a imaginii (exclude imaginile deasupra pliului de la încărcarea leneșă) pentru a îmbunătăți cea mai mare vopsea mulțumită

• Redarea automată leneșă pentru a încărca elementele care apar mai mari pe paginile dvs. web

Doar instalarea și activarea pluginului permite site -ului dvs. să beneficieze de 80% din cele mai bune practici de performanță și o accelerează imediat, fără a fi necesar niciun efort de la dvs. În plus, există multe alte funcții pe care le puteți activa manual pentru a vă crește viteza site -ului dvs., cum ar fi:

• Încărcare leneșă pentru imagini, inclusiv fundaluri CSS, videoclipuri și iframes

• Preîncărcarea fișierelor și fonturilor externe

• Fonturi Google-găzduite Google

• Optimizarea bazei de date

• Opțiuni pentru a vă conecta cu ușurință la un CDN, inclusiv RocketCDN

Studiu de caz: grăbește apelurile API cu racheta WP

Pentru a înțelege mai bine modul în care adăugarea unei API externă afectează performanța site -ului - și modul în care poate ajuta un plugin precum WP Rocket - am creat un mediu de testare controlat. Am creat un site demo WordPress cu conținut manechin și am adăugat o hartă de la Google Maps folosind WP Go Maps.

Complet neoptimizat, rezultatele sale de pagespeed au fost următoarele:

Am activat apoi racheta WP și următoarele caracteristici:

• Minificați CSS și JavaScript

• Scoateți CSS neutilizate

• Încărcați javascript amânat

• Întârzie execuția JavaScript

Acest lucru este la următoarele modificări:

Aceasta este o îmbunătățire masivă în comparație cu linia de bază! Chiar dacă poate face ca site -ul dvs. să fie mult mai captivant, conținut dinamic precum Google Maps vine cu o mulțime de coduri suplimentare, care vă pot încetini site -ul. WP Rocket își atenuează impactul - și tot ce este nevoie este de câteva clicuri.

Adăugați API -uri la WordPress fără a trage performanța

API-uri deschise posibilități interminabile pentru conținut dinamic, în timp real și integrări puternice. Datorită pluginurilor WordPress și integrărilor ușoare, le puteți adăuga chiar și pe site -ul dvs. fără a fi dezvoltator.

Rețineți că fiecare apel API poate afecta performanța paginii. Simțiți -vă din adâncimea dvs. optimizând -o? WP Rocket este aici pentru a-l ajuta-încercați-l fără riscuri timp de 15 zile!