Ajax, eller Javascript og XML Asynkron, brukes til å kommunisere med skripter på serversiden og lar deg laste inn dynamisk innhold uten å måtte laste inn siden på nytt.

La oss for eksempel si at du bygger en nettstedet Web for en lokal veldedighet og du ønsker å oppmuntre til en positiv stemning. Du kan legge til en knapp merket "Vis litt kjærlighet! »Med en teller på hjemmesiden, og takket være AJAX, hver gang knappen aktiveres (klikket av en besøkende) øker telleren uten å laste siden på nytt.

Dette er eksemplet vi skal bygge i denne opplæringen.

I denne opplæringen vil du lære mer om hva AJAX er, hvordan den kan brukes og hvordan du kan lage fantastiske funksjoner med det på WordPress.

La oss begynne.

Grunnleggende om AJAX

• AJAX-strømmen følger vanligvis følgende trinn:
• Start et AJAX-anrop på grunn av brukerhandling
• Motta og behandle forespørselen på serveren
• Fang svaret og utfør alle nødvendige handlinger via JavaScript
• Sette opp et nytt temamiljø

La oss praktisere dette på WordPress. Vårt første eksempel viser en enkel popup som inneholder antall kommentarer til en artikkel når vi klikker på tittelen. Vi vil bruke et barnetema basert på " Twenty Sixteen Fra WordPress.

Her er hva du trenger å gjøre:

Lag en ny mappe i Tema-katalogen i WordPress-installasjonen i " wp-innhold "Og gi den navnet" ajax-test ", opprett de to filene kreves av WordPress, nemlig " functions.php "," Styles.css "og legg til en ny fil som heter" script.js ". Legg til følgende kode i overskriften på CSS-stilarket ditt (style.css).

/ * Tema Navn: Ajax Testing Tema URI: http://premium.wpmudev.com Beskrivelse: Et tema for testing vår kunnskap AJAX Forfatter: Daniel Pataki Forfatter URI: http://danielpataki.com Mal: ​​twentysixteen Versjon: 1.0.0 License GNU General Public License eller senere v2 License URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Overordnet temaets stilark må lastes inn av barnetemaet. Tidligere ble dette gjort ved å importere CSS-filen til barnetemaet, men den anbefalte måten å gjøre dette på er å bruke "enqueueing". Husk at vi viste deg hvordan du bruker denne funksjonen.

Så la oss legge til overordnet stilark og vår JavaScript-fil direkte:

ADD_ACTION ( 'wp_enqueue_scripts', 'ajax_test_scripts'); ajax_test_scripts function () {wp_enqueue_style (foreldre-stil ", get_template_directory_uri () '/style.css.'); wp_enqueue_script (. 'ajax-test-skript' get_stylesheet_directory_uri () '/scripts.js', array ( 'jquery'), 1.0.0 ", true); }

Hvis du føler at du har energi til å ta det et skritt videre, finn et fint bilde, beskjær det til 880 px ved 660 px og legg det i barnets temamappe, og gi det navnet " screenshot.png ". Det vil vises i utseendet når du vil aktivere temaet.

Siden dette barnetemaet er basert på “ Twenty Sixteen Og at vi ikke har endret noe (enda!), Nettstedet skal se nøyaktig ut som et klassisk tema med temaet " Twenty Sixteen '.

Legge til en knapp

For å begynne vil vi legge til knappen " Vis kjærlighet unpeu! ". Et flott sted å vise det ville være i sidefeltet for temaartikler.

Etter litt research viser det seg at sidefeltet er opprettet av en funksjon som heter " twentysixteen_entry_meta () »Som ligger i katalogen« inc / mal-tags.php '.

Denne funksjonen er " kobles Noe som betyr at vi kan endre det ved å definere det i vår egen functions.php-fil. Det første trinnet i dette er å kopiere og lime inn hele funksjonen i vår egen functions.php-fil:

funksjon 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', 'vedlegg'))) {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)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } hvis (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Legg igjen en kommentar til% s ', 'twentysixteen'), get_the_title ())); ekko ' '; }}

La oss legge nøkkelen til bunnen av alle metadataene:

$ kjærlighet = get_post_meta (get_the_ID (), 'show_some_love', sant); $ kjærlighet = (tom ($ kjærlighet))? 0: $ kjærlighet; ekko ' '. $ kjærlighet. ' ';

Forklar all denne koden:

Første linje henter antall kjærligheter som artikkelen har mottatt. I noen tilfeller vil ikke disse dataene eksistere, med andre ord når knappen ennå ikke er klikket på. Av denne grunn bruker vi

den andre linjen i koden for å sette verdien til 0 hvis verdien er tom.

Den tredje linjen leverer knappen, som består av et spenn som inneholder et bilde og antall kjærligheter. Jeg lot bildekilden stå tom fordi jeg vil bruke en SVG der inne. Du kan bruke en base64-kodet SVG for å lage en bildelinje. Dette sparer deg for å stille krav og vil gjøre ditt nettside mer effektivt.

Jeg brukte dette lille gratis bildet tilgjengelig denne koblingen. Kopier og lim inn koden du mottar i bildekilden slik:

$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 brukte også litt CSS til styling av knappen for å gi den en svevende effekt. Det er ikke veldig åpenbart om det er en knapp, men det vil for vår enkle test.

.love-knappen img {margin-right: 6px; opacity: 0.7; Markøren: pekeren; } .love-knapp img: hover {opacity: 1; }

Utløser en handling

Endelig kommer vi til JavaScript! Vi må målrette varen vår og oppdage et klikk på den. Slik gjør du det:

(funksjon ($) {$ (dokument) .on ('klikk', '.elsker-knapp img', funksjon () {varsling ("kjærlighet er delt");})}) (jQuery);

Hvis du klikker på knappen på dette punktet, bør du se et JavaScript-varsel med teksten "Kjærlighet deles." "

Krav til data

I stedet for denne teksten, må vi utløse et AJAX-anrop. Før du skriver koden vår, vil vi forstå hva vi trenger å sende.

AJAX URL

Først og fremst trenger vi et sted å sende data. Stedet hvor vi sender dataene vil behandle dataene og svare på samtalen. WordPress har et innebygd sted for å håndtere AJAX-samtaler, som vi kan bruke: " admin-ajax.php " innsiden " wp-admin ". Vi kan ikke legge til denne URL-en i skriptet vårt (bruk av "rå" koding er ikke akseptabelt), Så la oss bruke noen utspekulert WordPress.

Funksjonen wp_localize_script () Var opprinnelig ment å oversette strenger i JavaScript-filer, noe det gjør bra. Vi kan også bruke den til å overføre variabler til JavaScript-filene våre, i dette tilfellet URL-en til AJAX-filen. Legg til følgende kode i filen vår " funksjoner Som følger:

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

Resultatet av dette siste objektet vil bli kalt ajaxTest, som vil inneholde en gitt gruppe i den siste parameteren som egenskaper. For å legge inn verdien vi kan bruke ajaxTest.ajax_url i vår Javascript-kode.

Artikkelens identifikator

Vi vil sende vilkårlige data som identifikator for artikkelen (som vi vil bruke til å identifisere artikkelen som vi ønsker å "legge til litt kjærlighet på"). Dette kan hentes fra DOM. Ta en titt på strukturen som brukes i "Twenty Sixteen" -temaet nedenfor:

Knappen vår har en "artikkel" som en av forfedrene. Dette elementet har klassen og inneholder den numeriske identifikatoren til artikkelen. Selv om det ikke er den mest elegante løsningen, kan vi hente ID-en derfra.

$ (Document) .På ( 'klikk', 'img .love-knappen', function () {var = parseInt POST_ID ($ (dette) .parents ( 'article.post:first'). Attr ( 'id') .Sett ( 'stolpe', '')); console.log (id)})

Handlingen

WordPress krever også at vi sender en parameter som heter handling. Siden alle handlinger vil bli sendt til admin-ajax, trenger vi en måte å differensiere disse forespørslene, derav bruk av denne parameteren.

Sende en AJAX-forespørsel

Vi kan nå sette sammen alt. Vi må opprette en AJAX-samtale for " wp-admin / admin-ajax.php Som inneholder artikkel-ID og en handling. Slik ser det ut.

(Funksjon ($) {$ (document) .På ( 'klikk', 'img .love-knappen', function () {var = parseInt POST_ID ($ (dette) .parents ( 'article.post:first'). . attr ( 'id') erstatte ( 'stolpe', '')); $ .ajax ({url: ajaxTest.ajax_url type 'innlegg', data: {handling: 'add_love' POST_ID: POST_ID} , suksess: funksjon (respons) {alert ( 'suksess, er den nye telling' + respons)}})})}) (jQuery);

$ .ajax () er den brukte funksjonen som tar en mengde parametere. Nettadressen inneholder målet som for øyeblikket er filen vår ajax-url.php ". Type er satt til " poste » som alle forespørsler sendt av a skjema. Dataparameteren er et objekt som inneholder " nøkkelverdi Det vil vi sende til serveren. Senere vil vi kunne lese dem med $ _POST ['action'] og $ _POST ['post_id'].

søknadsbehandling

Normalt må du redigere filen " admin-ajax.php », Fordi forespørselen sendes dit. Det er en systemfil, så vi kommer ikke til å endre den. WordPress lar deg sende AJAX-forespørsler ved å bruke firkantede parenteser med handlingsparameteren. Modellen er som følger:

Hvis du navngav handlingen din add_love Du må knytte en funksjon til en krok som heter " wp_ajax_add_love Og / eller wp_ajax_nopriv_add_love ". Handlingene NoPriv ”Kjører for utloggede brukere, en kjører kun for påloggede brukere. I vårt tilfelle vil vi bruke begge deler. Som en rask test setter vi en standard returverdi:

Suksessparameteren er en funksjon som kjører når AJAX-samtalen er fullført. Vi viser et enkelt varsel som viser “Bra gjort! Den nye kontoen er ”med svaret vårt lagt til slutt.

ADD_ACTION ( 'wp_ajax_add_love', 'ajax_test_add_love'); ADD_ACTION ( 'wp_ajax_nopriv_add_love', 'ajax_test_add_love'); ajax_test_add_love funksjon () {ekko 4; dør (); }

Vi festet vår funksjon til begge parentesene, ett gjort savner 4 og brukte deretter funksjonen " die () ". Dette er nødvendig på WordPress, ellers mottar du en 0 på slutten av hvert svar. Hvis du klikker på knappen nå, skal du se følgende:

For å få det faktiske "liker" -nummeret er alt vi trenger å gjøre å hente gjeldende nummer, øke det med ett, lagre det i databasen og vise det nye nummeret.

ajax_test_add_love funksjon () {$ kjærlighet = get_post_meta ($ _POST [ 'POST_ID'] 'show_some_love', true); Kjærlighet = $ (tom ($ kjærlighet))? 0: $ kjærlighet; $ Kjærlighet ++; update_post_meta ($ _ POST [ 'POST_ID'], 'show_some_love' kjærlighet $); echo $ kjærlighet, dør (); }

Hvis du klikker på knappen nå, skal du se popup-vinduet som viser "1". Hvis du oppdaterer siden, skal du se det nye nummeret som vises. Hvis du klikker på knappen igjen, vil du gjøre det 2 ". Alt vi trenger å gjøre nå er å sørge for at tallet gjenspeiles direkte i brukergrensesnittet.

Gjør endringer i brukergrensesnittet ved hjelp av svaret

Denne delen virker enkelt (fordi det er det), men det er generelt sett det vanskeligste å sette sammen. Foreløpig er alt vi trenger å gjøre å finne elementet som inneholder gjeldende nummer og endre innholdet ved svaret.

(Funksjon ($) {$ (document) .På ( "klikk", "img .love-knappen", function () {var = parseInt POST_ID ($ (denne) .parents ( 'article.post:first'). . attr ( 'id') erstatte ( 'innlegg', '')); var $ antall = $ (this) .parent () finne (. 'nummer') $ .ajax ({url :. ajaxTest.ajax_url, Type: 'innlegg', data: {handling: 'add_love' POST_ID: POST_ID,} suksess: funksjon (respons) {$ number.text (respons);}})})}) (jQuery);

Jeg la bare to linjer til vår forrige JS-kode. På linje 5 lagrer jeg elementet som inneholder tallet på variabelen $ nummer. På 14-linjen endrer jeg teksten til dette elementet for å vise svaret, som er det nye tallet.

Det er det, i utgangspunktet bør du kunne se denne nye funksjonen i aksjon på ditt tilpassede tema. Gi oss beskjed hvis du har problemer. Har du et annet tips du vil dele? Gjør det i kommentarfeltet.