Ce este AJAX și cum se utilizează în WordPress (un ghid pas cu pas)

Publicat: 2021-05-27
wordpress ajax
Urmărește @Cloudways

AJAX este o tehnologie populară folosită în dezvoltarea site-ului web, care vă permite să preluați date din backend și să reîmprospătați vizualizarea fără a fi nevoie să reîncărcați pagina web. Prin urmare, vă ajută să îmbunătățiți interactivitatea, viteza și gradul de utilizare al site-ului dvs. AJAX este funcțional de fiecare dată când efectuați acțiuni precum lăsarea unui comentariu sau postarea unui tweet.

În acest articol, vă voi spune ce este AJAX și cum să utilizați AJAX în WordPress (cunoscut și ca WP AJAX). Să citim mai departe!

  • Ce este AJAX?
  • Cum funcționează AJAX?
  • Cum se utilizează AJAX în WordPress?
  • Cum se supraîncărcă pluginurile admin-ajax.php?
  • Accelerează tabloul de bord WordPress
  • Detectați pluginurile care utilizează API-ul Heartbeat

Ce este AJAX?

AJAX înseamnă Asynchronous JavaScript And XML, o tehnologie care vă permite să faceți cereri către server în mod asincron și să faceți modificări paginilor noastre fără a fi nevoie să le reîncărcați. Scriptul AJAX solicită serverului să returneze niște date și apoi modifică paginile web cu datele obținute.

De exemplu , imaginați-vă un meniu derulant în care selectați data întâlnirii și o altă listă derulantă vă arată în mod dinamic orele disponibile pentru rezervare. Printr-un script, serverului i s-au cerut orele disponibile pentru selectarea drop-down-ului de tratament.

Găzduire WordPress gestionată începând de la 10 USD/lună

Experimentați găzduirea cloud fiabilă, în care dezvoltatorii au încredere pentru a obține performanță și viteză.

ÎNCERCAȚI 3 ZILE GRATUIT

Cum funcționează AJAX?

Misiunea AJAX este de a servi drept punte între site-ul dvs. web și server. Miezul acestei tehnologii asincrone este obiectul XMLHttpRequest, care permite schimbul de date. Aceștia sunt pașii de bază pentru a efectua un apel AJAX:

cum funcționează ajax

– Sursa: W3Schools

  • Specificați informațiile de trimis
  • Configurați apelul
  • Utilizați obiectul XMLHttpRequest pentru a trimite datele
  • Primește și procesează răspunsul de la server

Lucrul bun este că acest proces poate fi simplificat folosind biblioteca jQuery.

Cum se utilizează AJAX în WordPress?

WordPress acceptă AJAX în mod nativ. Puteți vedea „admin-ajax.php” în folderul wp-admin.

A fost creat inițial pentru toate funcțiile care fac solicitări AJAX de la administratorul WordPress. Este folosit și pentru partea publică a web-ului.

Toate solicitările WordPress AJAX trebuie să treacă printr-un script PHP. Cu alte cuvinte, admin-ajax.php ar trebui să fie fișierul PHP prin care este apelată o acțiune care returnează conținut.

În 2013, WordPress a introdus API-ul WordPress Heartbeat care a furnizat câteva funcționalități importante, cum ar fi funcția de salvare automată, expirarea autentificarii și avertismentul de blocare în timp ce un alt utilizator scrie sau editează o postare WordPress.

Două caracteristici foarte proeminente ale API-ului Heartbeat sunt:

1. Salvare automată

Când salvați o schiță a unei postări sau continuați să lucrați la ea, WordPress salvează automat modificările. Există o diferență clară între salvarea automată și salvarea manuală a schiței. Consultați următoarea captură de ecran care arată ambele tipuri de salvări:

ultima postare editată și redactată

– Salvare automată în WordPress

2. Post Lock

Când încercați să editați o postare la care lucrează deja un alt utilizator, va apărea un avertisment pop-up despre situație. Există trei acțiuni vizibile pentru tine.

editare post în wordpress

– Blocare post în WordPress

Caracteristicile menționate mai sus sunt posibile datorită API-ului WordPress Heartbeat care creează o conexiune între server și browser pentru comunicare și răspunsuri adecvate.

WordPress Heartbeat API generează solicitări de comunicare cu serverul și declanșează evenimente la primirea datelor/răspunsului. Acest lucru crește de obicei sarcina pe server și, în cele din urmă, încetinește administratorul WordPress.

Un exemplu viu

Mă conectez la tabloul de bord WordPress și încep să redactez o postare. Apoi, las fila deschisă câteva minute și încep să răsfoiesc alte file. Tabloul de bord este încă conectat și puteți vedea că admin-ajax trimite continuu cereri.

admin-ajax.php trimite cereri către server

– admin-ajax.php Trimiterea cererilor către server

Conform biletului menționat mai sus, admin-ajax.php în WordPress generează solicitări după fiecare 15 secunde. Solicitarea poate fi orice comunicare cu serverul.

Cum se supraîncărcă pluginurile admin-ajax.php?

Majoritatea problemelor din admin-ajax.php din WordPress pot fi atribuite solicitărilor făcute de pluginurile instalate. Aceste plugin-uri fac administratorul WordPress să încetinească prin trimiterea de solicitări pentru a obține o anumită funcționalitate, cum ar fi declanșarea unei ferestre pop-up sau actualizarea unui contor de partajare socială.

Acestea fiind spuse, cererile nu vor crește neapărat fișierul admin-ajax.php. Dacă solicitările sunt gestionate corect, iar dezvoltatorii de pluginuri urmează cele mai bune practici în utilizarea apelurilor AJAX în pluginurile lor, fișierul admin-ajax.php va fi bine. Prin urmare, este, de asemenea, important să diagnosticați orice plugin înainte de a-l dezactiva.

Cum să diagnosticați un plugin în WordPress?

Este important să diagnosticați corect pluginul pentru a identifica impactul acestuia asupra fișierului admin-ajax.php, care poate încetini administrarea WordPress. Pentru a face acest lucru, vom folosi două instrumente: GTmetrix și WebPageTest.

În cazul GTmetrix, navigați la fila Waterfall pentru o listă completă de solicitări. Privind lista îndeaproape, puteți vedea cererile POST făcute de fișierul admin-ajax.php.

diagnosticare plugin în wordpress

– Diagnosticare plugin în WordPress

În cazul meu, aceste solicitări au fost făcute în principal de un plugin de partajare socială. Acest plugin special trimite o solicitare ajax către conturile de rețele sociale prin API la fiecare 15 secunde pentru a obține un număr de partajare actualizat.

Extindeți fila pentru informații detaliate. Fila de răspuns arată locul exact care declanșează aceste solicitări.

Chrome vine cu instrumente pentru dezvoltatori care pot ajuta la analiza solicitărilor făcute de diverse plugin-uri. Pentru a verifica acest lucru, deschideți site-ul web în Chrome, faceți clic pe CTRL + Shift + I și faceți clic pe fila Rețea.

solicitări admix-ajax.php în Chrome

– admix-ajax.php Solicitări în Chrome

Reîncărcați pagina și vedeți că lista este populată cu solicitări actualizate. În caseta de filtrare, tastați ajax sau admin-ajax pentru a filtra fișierele necesare. Acest lucru vă oferă o perspectivă asupra numărului de solicitări, precum și a frecvenței acestora și a sursei solicitării.

Apoi, faceți clic pe fișier pentru a vedea informații suplimentare. În fila de răspuns, vă oferă un indiciu despre pluginul care provoacă această solicitare. În cazul meu, de data aceasta a fost declanșat de pluginul WP Popular (WPP), un plugin care evidențiază cea mai populară postare într-un anumit curs de timp.

Pentru a evita acest lucru, asigurați-vă că pluginul pe care îl utilizați este actualizat. Dacă nu este, încercați să deschideți un bilet de asistență, astfel încât dezvoltatorii săi să poată rezolva problema. Dacă este posibil, îl puteți înlocui și cu un alt plugin care este actualizat și nu supraîncărcă fișierul admin-ajax.php.

Efectuarea unui diagnostic amănunțit este importantă înainte de a scăpa de orice plugin, deoarece unele plugin-uri sunt esențiale pentru site-ul dvs. WordPress. Aceste instrumente vă pot ajuta să găsiți cauza principală și să alegeți cea mai bună soluție posibilă pentru a o remedia.

În secțiunea următoare, vom vedea cum putem reduce aceste solicitări și cum putem preveni supraîncărcarea fișierului admin-ajax.php.

Accelerează tabloul de bord WordPress

Pentru a accelera backend-ul WordPress, cea mai bună practică este să dezactivați API-ul Heartbeat sau cel puțin să setați un interval de timp mai lung, astfel încât să nu lovească serverul după fiecare câteva secunde.

Instalați pluginul Heartbeat API

Conectați-vă la tabloul de bord de administrare WordPress. Navigați la Pluginuri → Adăugați nou → căutați Breeze → Instalați și activați-l.

instalați breeze în wordpress

– Instalați Breeze în WordPress

Configurați pluginul Breeze

Navigați la Setări → Breeze → API Heartbeat. Acolo veți găsi 4 opțiuni diferite pentru configurarea Heartbeat.

  1. Controlați ritmul cardiac: puteți comuta butonul pentru a activa sau dezactiva API-ul Heartbeat pentru backend, editor de posturi și front-end.
  2. Heartbeat Frontend: acest lucru vă va permite să schimbați comportamentul front-end-ului dvs. sau să îl dezactivați complet.
  3. Heartbeat Post Editor: acest lucru vă va permite să schimbați comportamentul WP Post Editor sau să îl dezactivați complet.
  4. Heartbeat Backend: acest lucru vă va permite să schimbați comportamentul backend-ului dvs. sau să îl dezactivați complet.

setările api pentru bătăile inimii în briză

– Setări API Heartbeat în Breeze

Creați mai multe reguli

În mod implicit, obțineți frecvența implicită a API-ului WordPress Heartbeat, dar puteți crea mai multe reguli în funcție de cerințele dvs. De exemplu, este posibil să doriți ca WordPress Backend (Tabloul de bord) să fie declanșat în 2 minute (120 de secunde), dar Post Editor să fie declanșat în 3 minute (180 de secunde). Pentru a face acest lucru, trebuie să creați două reguli: una pentru WordPress Dashboard și cealaltă pentru Post Editor. Setați frecvențele lor la 2 și, respectiv, 3 minute.

Detectați pluginurile care utilizează API-ul Heartbeat

Acum că ați configurat totul, este timpul să verificați ce pluginuri folosesc fișierul admin-ajax.php și încetinesc site-ul.

Accesați GTmetrix și introduceți adresa URL a site-ului dvs. Va dura câteva momente pentru a analiza site-ul. După ce ați terminat, navigați la fila Cascada și veți vedea cât timp durează un fișier pentru a se conecta și a răspunde. Derulați puțin în jos și vedeți dacă există o intrare pentru POST admin-ajax.php. Dacă da, extindeți-l și navigați la fila Postare. De aici, puteți identifica pluginul vinovat.

În cazul meu, pluginul „comutator desktop” folosește fișierul admin-ajax.php și trimite continuu cereri către server. Acesta este momentul să luați o decizie; fie înlocuiți-l cu alt plugin, fie încrucișați degetele.

post admin ajax php

– POST admin-ajax.php

rezumat

Având în vedere setul de caracteristici, API-ul Heartbeat este foarte util pe site-ul dvs. WordPress. Cu toate acestea, dacă nu este utilizat corect, poate crește timpul de încărcare al unui backend WordPress și al front-end-ului prin trimiterea de solicitări Ajax pentru WordPress.

Există doar două soluții la această problemă. Puteți să dezactivați API-ul Heartbeat/să îl activați doar în câteva locații – sau să faceți upgrade la o găzduire gestionată care poate face față solicitărilor și, de asemenea, poate reduce timpul de răspuns al serverului.

întrebări frecvente

Î: Ce este WordPress admin-Ajax?

AJAX este o colecție de scripturi și tehnologii care permite paginilor web să fie actualizate fără a reîncărca întreaga pagină. Admin-ajax WordPress este un fișier care conține codificarea solicitărilor Ajax pe WordPress. Admin-ajax construiește o conexiune între server folosind Ajax și client.

Î: AJAX funcționează cu WordPress?

Da, AJAX funcționează cu WordPress și este implementat automat pe WordPress, deoarece face parte din back-end-ul său. Este folosit pentru gestionarea operațiunilor bazei de date fără a reîncărca întreaga pagină.