En tutorial til brug af AJAX i WordPress

Reklame

AJAX er en bemærkelsesværdig webteknologi, der flyttede os ud over den enkle “klik på link, gå til en anden side”Struktur af Internettet 1.0.

AJAX, som står for Asynkron Javascript og XML, giver websteder mulighed for dynamisk at hente og vise indhold uden at brugeren bevæger sig væk fra den aktuelle side. Dette fører til en langt mere interaktiv brugeroplevelse og kan fremskynde tingene også, da en helt ny webside ikke behøver at indlæses. Heldigvis er det nemt at gøre brug af AJAX inden for WordPress-miljøet, og i dag vil jeg vise dig hvordan.

Denne Ajax-tutorial skal betragtes som temmelig avanceret og fortsætter fra sidste gang, hvor vi lærte hvordan man bruger tilpassede databasetabeller Arbejde med brugerdefinerede databasetabeller i WordPressEn hurtig scanning af siden Bedste af WordPress-plugins afslører nogle af de mange unikke og nichemåder, du kan få din blog til at arbejde hårdere. Hvad hvis du allerede har en database med ... Læs mere inden for en WordPress-skabelon - i mit eksempel blev der anvendt en enkel eksisterende tabel med kundedata. Når det kommer til at indsætte ting tilbage i databasen, bruger vi dog en lille AJAX-magi i WordPress.

Al koden i dagens tutorial refererer derfor til det, vi skrev sidste gang, men hvis du bare leder efter, hvordan man gør AJAX i WordPress, er det lige så relevant.

Hvorfor bruge AJAX?

Den mest almindelige brug af AJAX er relateret til formularer - at kontrollere, om der er taget et brugernavn, eller udfyld resten af ​​formularen med forskellige spørgsmål, afhængigt af et bestemt svar, du giver. Grundlæggende dog bruger du AJAX, når du vil have en begivenhed (som at en bruger klikker på noget eller skriver noget) bundet til en server-side handling, der forekommer i baggrund.

Vi vil bruge det til at tilføje nye poster til vores vigtige kundetilpassede kundedatabord, men du kan sandsynligvis komme med noget mere spændende.

Oversigt over, hvordan man bruger AJAX i WordPress

1. Rediger din brugerdefinerede skabelon for at inkludere en formular eller javascript-begivenhed, der vil sende data via jQuery AJAX til admin-ajax.php inklusive uanset indlægsdata, du vil videregive. Sørg for, at jQuery indlæses.
2. Definer en funktion i dit tema function.php; læse indlægsvariabler, og returner noget tilbage til brugeren, hvis du ønsker det.
3. Tilføj en AJAX handlingskrog til din funktion.

Oprettelse af formularen

Lad os starte med at oprette en enkel form i front-enden til at indtaste nye kundeoplysninger. Det er ikke noget kompliceret, bare udskift hoveddelen af ​​din brugerdefinerede skabelon med denne kode, som vi startede i sidste uge, omkring hvor is_user_logged_in () -kontrollen forekommer:

if (is_user_logged_in ()):?> 

Navn:Email:Telefon:Adresse:

Det eneste, der måske ser mærkeligt ud for dig, er, at der er brug af et skjult inputfelt, der kaldes handling - dette indeholder navnet på den funktion, vi vil udløse via AJAX.

PHP-modtageren

Åbn derefter op functions.php og tilføj følgende linje for at sikre, at jQuery indlæses på dit websted:

wp_enqueue_script (jQuery ');

Den grundlæggende struktur for skrivning af et AJAX-opkald er som følger:

funktion myFunction () { //gør noget. dø(); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

De sidste to linjer er handlingskrog, der fortæller WordPress "Jeg har en funktion kaldet myFunction, og jeg vil have dig til at lytte til den, fordi den bliver kaldt via AJAX-grænsefladen" - den første er for brugerniveau på admin-niveau wp_ajax_nopriv_ er til brugere, der ikke er logget ind. Her er den komplette kode til functions.php som vi vil bruge til at indsætte data i vores specielle kundetabel, som jeg snart vil forklare:

wp_enqueue_script (jQuery '); funktion addCustomer () {global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ adresse = $ _POST ['adresse']; hvis ($ wpdb-> Indsæt (kunder ", array ( 'name' => $ navn, 'e-mail' => $ e-mail, 'adresse' => $ adresse, 'telefon' => $ telefon. )) FALSE) {ekko "Fejl"; } ellers { ekko "kunde". $ navn. "'med succes tilføjet, række-id er". $ wpdb-> insert_id; } dø(); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // ikke rigtig nødvendigt

Ligesom før erklærer vi global $ wpdb for at give os direkte adgang til databasen. Vi griber derefter STOLPE variabler, der indeholder formulardata. Funktionen er omgivet af en IF-erklæring $ Wpdb-> Indsæt, som vi bruger til at indsætte data i vores tabel. Da WordPress leverer specifikke funktioner til indsættelse af regelmæssige indlæg og metadata, er dette $ Wpdb-> Indsæt metoden bruges generelt kun til brugerdefinerede tabeller. Du kan Læs mere om det på Codex, men grundlæggende tager det navnet på den tabel, der skal indsættes i, efterfulgt af en matrix af kolonne / værdipar.

Det FALSK tjekker for at se om indsættelsesfunktionen mislykkedes, og i så fald udsender den “fejl“. Hvis ikke, sender vi bare en besked til brugeren om det Kunde X blev tilføjet, og gentager $ Wpdb-> insert_id variabel, der angiver automatisk forøgelsesvariabel af den sidste indsæt, der skete (forudsat at du har angivet et felt, der automatisk øges, som et ID).

Endelig, dø() vil tilsidesætte standarden dø (0) leveret af WordPress - dette er ikke vigtigt som sådan, men uden det får du det 0 føjede til slutningen af ​​alt, hvad du sender tilbage til skabelonen.

Javascript

Det sidste trin er den magiske bit - det faktiske Javascript, der vil starte AJAX-opkaldet. Du vil bemærke, at handlingsfeltet blev tomt i den form, vi tilføjede tidligere. Det skyldes, at vi tilsidesætter dette med vores AJAX-opkald. Den generelle måde at gøre dette på ville være:

jQuery.ajax ({type: "POST", url: "/wp-admin/admin-ajax.php", // vores PHP-behandlingsfildata: "myDataString", succes: funktion (resultater) {// gør noget med returnerede data})};

Det er den grundlæggende struktur i AJAX-opkald, vi bruger, men bestemt ikke den eneste måde, du kan gøre det på. Du spekulerer måske på, hvorfor vi henviser til wp-admin her, selvom dette vil være i forkant af siden. Det er lige her, hvor AJAX-handler er bosiddende, uanset om du bruger det til front- eller admin-side-funktioner - forvirrende, jeg ved. Indsæt følgende kode direkte i kundeskabelonen:

På den første linje knytter vi vores ajaxSubmit-funktion til den formular, vi lavede tidligere - så når brugeren klikker på indsende, går den via vores specielle AJAX-funktion. Uden dette vil vores form ikke gøre noget. I vores ajaxSubmit () funktion, er den første ting vi gør føljeton () formen. Dette tager bare alle formværdier og forvandler dem til en lang streng, som vores PHP vil analysere senere. Hvis det hele fungerer ordentligt, lægger vi de returnerede data i DIV med id for feedback.

Det er det. Gem alt, opdater, og prøv at indsende nogle formdata. Hvis du har problemer, kan du se den fulde kode for sideskabelonen her (baseret på standard-21-temaet), og koden, der skal føjes til features.php her(ikke udskift, bare tilføj dette til slut).

Ting at huske på

Sikkerhed: Denne kode er ikke produktionsklar og er kun beregnet til læring. Vi har udeladt et nøglepunkt, og det er brugen af ​​en wp-nonce - en engangskode genereret af WordPress, der sikrer, at AJAX-anmodningen kun kommer fra det sted, den var beregnet til; en adgangskode, hvis du vil. Uden dette kunne din funktion effektivt udnyttes til at indsætte tilfældige data. SQL-injektionsangreb er imidlertid ikke et problem, fordi vi dirigerede forespørgsler gennem WordPress $ Wpdb-> Indsæt funktion - WordPress renser alle input for dig og gør dem sikre.

Opdatering af kundetabellen: Lige nu sender vi kun en bekræftelsesmeddelelse tilbage, men kundetabellen bliver ikke opdateret - du ser kun de ekstra poster, hvis du opdaterer siden (hvilken slags besejrer formålet med at gøre det hele via AJAX). Se om du kan oprette en ny AJAX-funktion, der dynamisk kan udsende tabellen.

Indtastningsvalidering: fordi der ikke er nogen validering med formulardataene, er det faktisk muligt at tilføje blanke poster eller flere poster, hvis du trykker for mange gange. Nogle inputvalideringer i formularfelterne, at rydde dem, når de er udfyldt, samt SQL for at kontrollere e-mail eller telefonnummer, der ikke allerede findes i databasen, ville være nyttigt.

Det er det fra mig i denne uge - hvis du har haft problemer med at følge denne tutorial, er du velkommen til at komme i kontakt via kommentarerne, og jeg vil gøre mit bedste for at hjælpe dig; eller hvis du prøver at tilpasse dette på en eller anden måde, er du velkommen til at afvise ideer fra mig. Jeg håber, at dette virkelig viser, hvor meget du kan gøre inden for WordPress blot ved at kombinere lidt JavaScript, PHP og MySQL. Glem ikke som altid at tjekke alle vores andre WordPress-artikler.