Ajax, eller Asynchronous Javascript og XML, bruges til at kommunikere med scripts på serversiden og giver dig mulighed for at indlæse dynamisk indhold uden at skulle genindlæse siden.

Lad os for eksempel sige, at du bygger en Websted for en lokal velgørenhedsorganisation, og du vil opmuntre til en positiv stemning. Du kan tilføje en knap mærket "Vis lidt kærlighed! »Med en tæller på startsiden og takket være AJAX, hver gang knappen aktiveres (klikket af en besøgende), tælleren øges uden at indlæse siden igen.

Dette er eksemplet, som vi vil bygge i denne vejledning.

I denne tutorial vil du lære mere om, hvad AJAX er, hvordan det kan bruges, og hvordan man opretter fantastiske funktioner med det på WordPress.

Lad os starte.

Grundlæggende om AJAX

• AJAX-feedet følger normalt følgende trin:
• Start et AJAX-opkald på grund af brugerhandling
• Modtag og behandl forespørgslen på serveren
• Fang svaret, og udfør alle de nødvendige handlinger via JavaScript
• Opsætning af et nyt temamiljø

Lad os omsætte dette til WordPress. Vores første eksempel viser en simpel popup, der indeholder antallet af kommentarer til en artikel, når vi klikker på titlen. Vi bruger et børnetema baseret på " Tyve Seksten Fra WordPress.

Her er hvad du skal gøre:

Opret en ny mappe i biblioteket Temaer i din WordPress-installation i " wp-indhold "Og navngiv det" ajax-test ", lav de to filer kræves af WordPress, nemlig " functions.php "," Styles.css "og tilføj en ny fil kaldet" script.js ". Føj følgende kode til overskriften på dit CSS-stilark (style.css).

/ * Tema Navn: Ajax Test Tema Tema URI: http://premium.wpmudev.com Beskrivelse: Et tema til test vores viden AJAX Forfatter: Daniel Pataki Forfatter URI: http://danielpataki.com Skabelon: twentysixteen Version: 1.0.0 Licens GNU General Public License eller senere v2 licens URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Overordnet temas stilark skal indlæses af underordnet tema. Tidligere blev dette gjort ved at importere CSS-filen til underordnet tema, men den anbefalede måde at gøre dette på er at bruge "enqueueing". Husk, vi viste dig, hvordan du bruger denne funktion.

Så lad os tilføje overordnet stilark og vores JavaScript-fil direkte:

ADD_ACTION ( 'wp_enqueue_scripts', 'ajax_test_scripts'); ajax_test_scripts function () {wp_enqueue_style (forældre-stil ", get_template_directory_uri ()" /style.css «.); wp_enqueue_script (. "ajax-test-scripts 'get_stylesheet_directory_uri ()' /scripts.js", array ( 'jQuery), 1.0.0', true); }

Hvis du har lyst til at tage det et skridt videre, find et pænt billede, beskær det til 880 px ved 660 px og placer det i barnets temamappe, og omdøb det derefter " screenshot.png ". Det vises i udseendet, når du vil aktivere temaet.

Da dette tema for barnet er baseret på “ Tyve Seksten Og at vi ikke har ændret noget (endnu!), Webstedet skal ligne nøjagtigt som et klassisk tema med temaet " Tyve Seksten '.

Tilføjelse af en knap

For at begynde vil vi tilføje knappen " Vis lidt kærlighed! ". Et godt sted at vise det ville være på sidebjælken for temaartikler.

Efter nogle undersøgelser viser det sig, at sidefeltet er oprettet af en funktion med navnet " twentysixteen_entry_meta () »Hvilket findes i biblioteket« inc / skabelon-tags.php '.

Denne funktion er " tilsluttes Hvilket betyder, at vi kan ændre det ved at definere det i vores egne functions.php-fil. Det første trin i dette er at kopiere og indsætte hele funktionen i vores egne functions.php-fil:

funktion twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Author', 'Used before post author author.', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } hvis (in_array (get_post_type (), array ('post', 'vedhæftet fil'))) {twentysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('post-formats', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Used before post format.', ' twentysixteen ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } hvis ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } hvis (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Efterlad en kommentar til% s ', 'twentysixteen'), get_the_title ())); ekko ' '; }}

Lad os tilføje vores nøgle til bunden af ​​alle metadata:

$ kærlighed = get_post_meta (get_the_ID (), 'show_some_love', sandt); $ kærlighed = (tom ($ kærlighed))? 0: $ kærlighed; ekko ' '. $ kærlighed. ' ';

Forklar alt denne kode:

Den første linje henter antallet af kærligheder, som artiklen har modtaget. I nogle tilfælde vil disse data ikke eksistere, med andre ord når der endnu ikke er klikket på knappen. Af denne grund bruger vi

den anden linje i koden for at indstille værdien til 0, hvis værdien er tom.

Den tredje linje leverer knappen, som består af et spænd, der indeholder et billede og antallet af kærligheder. Jeg lod billedkilden være tom, fordi jeg vil bruge en SVG derinde. Du kan bruge en base64-kodet SVG til at oprette en billedlinje. Dette sparer dig for at stille krav og vil stille dit websted mere effektivt.

Jeg brugte dette lille gratis tilgængelige billede dette link. Kopier og indsæt den kode, du modtager, i billedkilden på denne måde:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

Jeg brugte også lidt CSS til styling af knappen for at give den en svævende effekt. Det er ikke meget indlysende, om det er en knap, men det gør det til vores enkle test.

.love-knap img {margin-right: 6px; opacitet: 0.7; markør: pointer; } .love-knap img: svinge {opacity: 1; }

Udløser en handling

Endelig kommer vi til vores JavaScript! Vi skal målrette mod vores vare og registrere et klik på det. Sådan gør du det:

(funktion ($) {$ (dokument) .on ('klik', '.elsker-knap img', funktion () {alarm ("kærlighed deles");})}) (jQuery);

Hvis du klikker på knappen på dette tidspunkt, skal du se en JavaScript-advarsel med teksten "Kærlighed deles." "

Datakrav

I stedet for denne tekst er vi nødt til at udløse et AJAX-opkald. Før vi skriver vores kode, vil vi forstå, hvad vi har brug for at sende.

AJAX URL

Først og fremmest har vi brug for et sted at sende data. Det sted, hvor vi sender dataene, behandler dataene og besvarer opkaldet. WordPress har et indbygget sted til at håndtere AJAX-opkald, som vi kan bruge: " admin-ajax.php " inde " wp-admin ". Vi kan ikke tilføje denne URL til vores script (brug af "rå" kodning er ikke acceptabelt), så vi vil bruge noget WordPress-trick.

Funktionen wp_localize_script () Var oprindeligt beregnet til at oversætte strenge i JavaScript-filer, hvilket det fungerer godt. Vi kan også bruge den til at overføre variabler til vores JavaScript-filer, i dette tilfælde URL'en til vores AJAX-fil. Føj følgende kode til vores fil " funktioner Som følger:

wp_localize_script ('ajax-test-scripts', 'ajaxTest', array ('ajax_url' => admin_url ('admin-ajax.php')));

Resultatet af dette sidste objekt kaldes ajaxTest, som vil indeholde en given matrix i den sidste parameter som egenskaber. For at indtaste den værdi, vi kan bruge ajaxTest.ajax_url i vores JavaScript-kode.

Artikelens identifikator

Vi sender vilkårlige data som identifikator for artiklen (som vi vil bruge til at identificere den artikel, som vi vil "tilføje lidt kærlighed til"). Dette kan hentes fra DOM. Se på strukturen, der bruges i temaet "Twenty Sixteen" nedenfor:

Vores knap har en "artikel" som en af ​​dens forfædre. Dette element har klassen og indeholder artiklens numeriske identifikator. Selvom det ikke er den mest elegante løsning, kan vi få fat i ID'et derfra.

$ (dokument) .on ('klik', '.love-knap img', funktion () {var post_id = parseInt ($ (dette) .parents ('article.post:first'). .replace ('post-', '')) console.log (id)})

Handlingen

WordPress kræver også, at vi sender en parameter med navnet action. Da alle handlinger sendes til admin-ajax, har vi brug for en måde at differentiere disse anmodninger på, derfor brugen af ​​denne parameter.

Afsendelse af en AJAX-anmodning

Vi kan nu sammensætte alt sammen. Vi er nødt til at oprette et AJAX-opkald til " wp-admin / admin-ajax.php Hvilket indeholder artikel-id'et og en handling. Sådan skal det se ud.

(Funktion ($) {$ (dokument) .fra ( 'klik', 'img .love-knappen', function () {var = parseInt post_id ($ (dette) .parents (article.post:first '). . attr ( 'id') erstatte ( 'post', '')); $ .ajax ({url: ajaxTest.ajax_url typen 'post', data: {aktion: 'add_love' post_id: post_id} , succes: funktion (respons) {alert ( 'succes, den nye optælling er' + svar)}})})}) (jQuery);

$ .ajax () er den anvendte funktion, der tager en masse parametre. URL-adressen indeholder det mål, der i øjeblikket er vores fil ajax-url.php ". Typen er indstillet til " indlæg » ligesom alle anmodninger sendt af en formular. Dataparameteren er et objekt, der indeholder " nøgleværdier Det vil vi sende til serveren. Senere vil vi være i stand til at læse dem med $ _POST ['action'] og $ _POST ['post_id'].

Behandling af ansøgningen

Normalt skal du redigere filen " admin-ajax.php », Fordi anmodningen sendes der. Det er en systemfil, så vi vil ikke ændre det. WordPress giver dig mulighed for at videresende AJAX-anmodninger ved hjælp af firkantede parenteser med handlingsparameteren. Modellen er som følger:

Hvis du navngav din handling add_love Du skal knytte en funktion til en krog med navnet " wp_ajax_add_love Og / eller wp_ajax_nopriv_add_love ". Handlingerne NoPriv ”Kører for afloggede brugere, en kører kun for indloggede brugere. I vores tilfælde vil vi gerne bruge begge dele. Som en hurtig test indstiller vi en standardreturværdi:

Succesparameteren er en funktion, der kører, når AJAX-opkaldet er afsluttet. Vi viser en simpel advarsel, der viser “Godt gået! Den nye konto er ”med vores svar tilføjet i slutningen.

add_action ('wp_ajax_add_love', 'ajax_test_add_love'); add_action ('wp_ajax_nopriv_add_love', 'ajax_test_add_love'); funktion ajax_test_add_love () {echo 4; die (); }

Vi tilknyttede vores funktion til begge parenteser, en udført ekko 4 og brugte derefter funktionen " die () ". Dette er nødvendigt på WordPress, ellers får du en 0 i slutningen af ​​hvert svar. Hvis du klikker på knappen nu, skal du se følgende:

For at få det faktiske "likes" -nummer er alt, hvad vi skal gøre, at hente det aktuelle nummer, øge det med et, gemme det i databasen og vise det nye nummer.

funktion ajax_test_add_love () {$ love = get_post_meta ($ _POST ['post_id'], 'show_some_love', true); $ love = (tomt ($ love))? 0: $ love; $ Kærlighed ++; update_post_meta ($ _POST ['post_id'], 'show_some_love', $ love); echo $ love; die (); }

Hvis du klikker på knappen nu, skal du se pop op-vinduet, der viser "1". Hvis du opdaterer siden, skal du se det nye nummer, der vises. Klik på knappen igen gør det 2 ". Alt, hvad vi skal gøre nu, er at sikre, at antallet afspejles direkte i brugergrænsefladen.

Foretag ændringer på brugergrænsefladen ved hjælp af svaret

Denne del synes let (fordi det er), men det er generelt det sværeste at sammensætte. For nu er alt, hvad vi skal gøre, at finde det element, der indeholder det aktuelle nummer og ændre dets indhold ved svaret.

(Funktion ($) {$ (dokument) .fra ( "klik", "img .love-knappen ', function () {var = parseInt post_id ($ (dette) .parents (article.post:first«). . attr ( "id") erstatte ( "post ',' ')); var $ nummer = $ (dette) .parent () finde (.» nummer «) $ .ajax ({url :. ajaxTest.ajax_url, Type: "post", data: {handling: "add_love 'post_id: post_id,}, succes: function (respons) {$ number.text (respons);}})})}) (jQuery);

Jeg tilføjede kun to linjer til vores tidligere JS-kode. På linje 5 gemmer jeg elementet, der indeholder nummeret på variablen $ nummer. På 14-linjen ændrer jeg teksten til dette element for at få vist svaret, som er det nye nummer.

Det er det, dybest set skal du kunne se denne nye funktion i aktion på dit brugerdefinerede tema. Hvis du har problemer, så lad os det vide. Har du et andet tip, som du vil dele? Gør det i kommentarfeltet.