Cum să utilizați Ajax în WordPress

Publicat: 2023-02-12

Dacă aveți o bază de clienți implicați și activi pentru site-ul dvs., s-ar putea să vă întrebați cum le puteți oferi o experiență web cu adevărat interactivă și îmbogățită. Oferirea de interactivitate în timp real poate fi o mare atracție pentru publicul dvs.

Din fericire, JavaScript și XML asincron (Ajax) sunt o metodă accesibilă de a adăuga funcții interactive site-ului dvs. Când vine vorba de WordPress, puteți chiar să simplificați procesul folosind un plugin bazat pe Ajax.

În acest articol, vă vom prezenta Ajax și cum funcționează. De asemenea, vă vom prezenta cum să începeți cu Ajax în WordPress. Să sărim direct înăuntru!

Ce este Ajax și cum funcționează?

Ajax reunește o serie de limbaje de programare diferite, cum ar fi HTML, CSS, JavaScript și multe altele. În acțiune, funcționează în culise pentru a prelua cereri de la un browser web, a le trimite la server și a transfera rezultatele înapoi în browser.

Ca utilizator de web, nu vei ști că Ajax este la lucru. Pur și simplu veți obține o experiență extrem de interactivă. Pe propriul dvs. site, de exemplu, puteți utiliza Ajax pentru a accepta aprecieri la postările de la utilizatorii care sunt conectați și pentru a afișa un număr în timp real.

De ce este util Ajax?

Cu Ajax, utilizatorii nu trebuie să reîncarce o pagină pentru a vedea anumite modificări ale acesteia. Aceasta înseamnă că site-ul dvs. va rămâne rapid și va oferi o experiență de utilizator mai fluidă. Deoarece Ajax este eficient, trimițând doar datele de care are nevoie înainte și înapoi, poate maximiza lățimea de bandă și poate evita transferurile de date mai grele.

În calitate de utilizatori web, culegem tot timpul beneficiile Ajax. Un exemplu este funcția de căutare cu completare automată de la Google.

Alte exemple cu care ați putea fi familiarizați includ comentariile Facebook și aprecierile Instagram. Ajax este probabil la lucru oriunde puteți interacționa cu o pagină web și puteți primi informații în schimb instantaneu.

Noțiuni introductive cu Ajax în WordPress

Când vine vorba de WordPress, există câteva moduri în care Ajax este util. În primul rând, vom arunca o privire la adresa URL Ajax și la modul de utilizare al acesteia alături de cârligele pentru funcții WordPress.

Adresa URL Ajax în WordPress

Deoarece WordPress folosește Ajax în mod implicit în tabloul de bord administrativ, adăugarea de mai multe funcționalități Ajax acolo nu este dificilă. Dacă doriți să utilizați Ajax pe partea frontală a site-ului dvs., totuși, va trebui să înțelegeți cum funcționează URL-ul Ajax.

În WordPress, fișierul admin-ajax.php are o adresă URL. Acesta oferă informațiile necesare pentru a trimite date pentru procesare și este vital pentru dezvoltarea front-end Ajax. WordPress folosește un apel wp_localize_script() pentru a utiliza adresa URL Ajax pentru a conecta funcțiile JavaScript și PHP, deoarece PHP nu le poate oglindi direct fără ajutor.

Cum să utilizați Ajax Action Hook în WordPress

WordPress folosește cârlige în programarea sa, ca o modalitate prin care pluginurile și temele să interacționeze cu WordPress Core. Cârligele vin în două variante: „acțiuni” și „filtre”. Cu Ajax, veți folosi cârlige de acțiune pentru a executa funcții.

Actions vă permite să adăugați date la WordPress sau să schimbați modul în care funcționează. Cu Ajax, veți folosi acțiunea wp_ajax_(action). O funcție personalizată poate fi apoi conectată la aceasta, pentru a fi executată în timpul unui apel Ajax.

De exemplu, acest exemplu de cod WordPress arată cum un apel Ajax și un obiect JavaScript pot fi combinate în același fișier pentru a executa o acțiune:

<?php

add_action('wp_ajax_my_action', 'my_action');

function my_action() {
global $wpdb; // așa obțineți acces la baza de date

$orice = intval( $_POST['orice'] );

$orice += 10;

echo $orice;

wp_die(); // este necesar să se termine imediat și să returneze un răspuns adecvat
}

De asemenea, puteți crea fișiere JavaScript separate pentru acțiunile dvs. Ajax. Va trebui doar să vă asigurați că utilizați adresa URL Ajax, astfel încât apelurile să nu se piardă.

Cum să utilizați Ajax lucrând cu un exemplu de plugin (3 pași)

Dacă doriți să experimentați cu Ajax, cel mai bun mod este să construiți un plugin cu acesta. Din fericire, există multe bucăți de exemplu de cod sau pluginuri simple de la care puteți începe. Pentru acest exemplu, vom folosi un exemplu de cod boilerplate pentru pluginul WordPress descărcabil.

Pasul 1: Creați structurile de fișiere adecvate

Mai întâi, va trebui să-ți denumești pluginul și să creezi structurile de fișiere adecvate pentru acesta. Numele trebuie să fie unic și să nu fie în conflict cu niciun alt instrument din directorul de pluginuri WordPress. Asta pentru că atunci când un utilizator vă încarcă pluginul, acesta va intra în directorul wp-content/plugins/ .

Odată ce v-ați decis asupra unui nume, trebuie să creați cel puțin următoarele trei fișiere în propriul director wp-content/plugins/ :

  • plugin-name.php
  • plugin-name.js
  • plugin-name.css

Veți dori să puneți fișierul .php în folderul noului dvs. plugin și să creați subfoldere separate pentru fișierele JavaScript și CSS în care să locuiască. Toate fișierele necesare pentru ca pluginul dvs. să funcționeze vor trebui să fie localizate în același folder principal.

În pasul următor, veți vedea că exemplul de cod pe care îl folosim vine cu structuri de fișiere pre-create. Credem că este important să înțelegem cum să începeți de la zero, totuși, și de ce fișierele dvs. trebuie structurate într-un anumit fel.

Pasul 2: Alegeți un cod exemplu pentru a începe

Utilizarea unui fișier de cod eșantion este un loc bun pentru a începe când încercați Ajax pe primul dvs. plugin. Cu toate acestea, doriți să verificați din nou codul exemplu pentru a vă asigura că este sigur și nu conține erori.

După cum am menționat mai devreme, vom folosi pluginul WordPress Boilerplate pentru exemplul nostru. Acest exemplu de cod vine împachetat cu fișierele de care veți avea nevoie pentru a finaliza pluginul.

Acest exemplu de plugin respectă, de asemenea, standardele de codificare și documentare ale WordPress. Puteți descărca fișierul .zip al pluginului de pe site-ul web standard pentru a începe.

Pasul 3: Conectați acțiunile în codul dvs

Exemplul de cod de plugin pe care îl folosim este construit cu programare orientată pe obiecte (OOP). Acest lucru îi ajută pe programatori să-și organizeze codul și creează un model de dezvoltare ușor de partajat și reutilizabil.

În plus, codul vine împachetat cu toate fișierele necesare dezvoltării pluginului, inclusiv fișierele de activare și dezactivare din directorul /includes/ . De asemenea, veți găsi ușor să localizați fișierele destinate publicului și ale administratorului, după cum este necesar.

Să aruncăm o privire la exemplul nostru de plugin, vizualizând începutul fișierului plugin-name.php :

<?php

/**
* Fișierul de bootstrap al pluginului
*
* Acest fișier este citit de WordPress pentru a genera informațiile despre plugin în plugin
* zona de administrare. Acest fișier include, de asemenea, toate dependențele utilizate de plugin,
* înregistrează funcțiile de activare și dezactivare și definește o funcție
* înregistrează funcțiile de activare și dezactivare și definește o funcție
* care pornește pluginul.
*
* @link http://example.com
* @din 1.0.0
* @package Plugin_Name
*
* @wordpress-plugin
* Nume plugin: WordPress Plugin Boilerplate
* URI plugin: http://example.com/plugin-name-uri/
* Descriere: aceasta este o scurtă descriere a ceea ce face pluginul. Este afișat în zona de administrare WordPress.
* Versiunea: 1.0.0
* Autor: numele dvs. sau compania dvs
* URI autor: http://example.com/
* Licență: GPL-2.0+
* URI licență: http://www.gnu.org/licenses/gpl-2.0.txt
* Domeniu text: nume-plugin
* Calea domeniului: /limbi
*/

Toate informațiile conținute în această porțiune a codului sunt importante pentru înregistrarea pluginului dumneavoastră cu WordPress. Acesta este modul în care directorul de pluginuri va ști ce să afișeze pentru pluginul dvs.

Acum va trebui să faceți câteva lucruri pentru a conecta toate punctele, inclusiv:

  • Asigurați-vă că adresa URL Ajax este disponibilă pentru scriptul dvs. Puteți utiliza wp_localize_script() pentru a realiza acest lucru.
  • Creați o clasă de nume de plugin cu clasa Plugin-Name{} în fișierul dvs. plugin-name.php . Aici vă veți defini cârligele de acțiune.
  • Creați o funcție JavaScript corespunzătoare în fișierul dvs. plugin-name.js .

Un element important al abordării Ajax este definirea cine poate folosi fiecare funcție, mai ales atunci când se creează interactivitate front-end. Vom conecta o acțiune front-end cu un exemplu de cod de la WordPress:

if ( este_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');
// Adăugați aici alte cârlige de acțiune back-end
} altfel {
// Adăugați aici cârlige de acțiune front-end non-Ajax
}

Să luăm notă de câteva lucruri din acest exemplu. În primul rând, aceste acțiuni vor fi disponibile pentru oricine de pe site, indiferent dacă este sau nu conectat la un cont. Acest lucru este indicat de apelul „wp_ajax_nonpriv_()”. În al doilea rând, puteți vedea că există și acțiuni de back-end, administrative care sunt conectate în timpul acțiunilor de front-end.

Pentru a înțelege procesul care are loc în acest set de acțiuni, este de asemenea important să știți că my_frontend_action va declanșa funcția PHP my_frontend_action_callback().

Pasul 4: Testați și depanați pluginul

După ce ați configurat toate cârligele de acțiune și funcțiile corespunzătoare de care aveți nevoie, veți dori să testați și, eventual, să depanați pluginul (dacă există probleme). Gazda dvs. web ar putea oferi un instrument de depanare ca parte a pachetului său de găzduire.

Aici, la WP Engine, oferim jurnalul de erori WP Engine pentru a vă ajuta să găsiți punctele cu probleme.

Jurnalul nostru de erori oferă o prezentare codificată în culori a oricăror erori din codul site-ului dvs. și unde acestea interacționează cu serverele noastre sau cu alte părți ale site-ului dvs. Acest lucru face depanarea mult mai ușoară, indiferent dacă lucrați cu Ajax sau cu totul altceva.

Explorați alte resurse și instrumente WP Engine

Acum că sunteți pe cale de a crea plugin-uri WordPress uimitoare cu Ajax, poate doriți să evaluați ce alte instrumente veți avea nevoie. WP Engine oferă o platformă completă de experiență digitală (DXP) și este aici pentru a vă ajuta să creați noi pluginuri pentru WordPress.

Fie că sunteți interesat de jurnalul nostru de erori WP Engine, astfel încât să puteți executa un plugin fără erori, fie că aveți nevoie doar de găzduire WordPress solidă și sigură, vă oferim o mare varietate de planuri și resurse pe care să le utilizați!