Ajax ili Asinkroni JavaScript i XML, koristi se za komunikaciju sa skriptama na strani poslužitelja i omogućuje vam učitavanje dinamičkog sadržaja bez ponovnog umetanja stranice.

Recimo, na primjer, da gradite a web stranica za lokalnu dobrotvornu organizaciju i želite potaknuti pozitivnu atmosferu. Možete dodati gumb s oznakom "Pokažite malo ljubavi! »Uz brojač na početnoj stranici i, zahvaljujući AJAX-u, svaki put kad se tipka aktivira (kliknuo a posjetilac), porast brojača bez ponovnog učitavanja stranice.

Ovo je primjer koji ćemo izgraditi u ovom vodiču.

U ovom ćete naučiti više o tome što je AJAX, kako se može koristiti i kako stvoriti fantastične značajke s njim na WordPressu.

Počnimo.

Osnove AJAX-a

• AJAX feed obično slijedi sljedeće korake:
• Inicirajte AJAX poziv zbog radnje korisnika
• Primanje i obrada zahtjeva na poslužitelju
• Uhvatite odgovor i izvršite sve potrebne radnje putem JavaScript-a
• Postavljanje novog tematskog okruženja

Primijenimo ovo u praksi na WordPressu. Naš prvi primjer prikazuje jednostavan skočni prozor koji sadrži broj komentara za članak kada kliknemo na naslov. Koristit ćemo podređenu temu temeljenu na " Dvadeset Šesnaest Od WordPressa.

Evo što trebate učiniti:

Stvorite novu mapu u direktoriju Teme u vašoj WordPress instalaciji u " wp-sadržaja "I nazovite ga" ajax-test ", stvorite dvije datoteke zahtijeva WordPress, naime " functions.php "," Styles.css "i dodajte novu datoteku nazvanu" script.js ". Dodajte sljedeći kod u zaglavlje vaše CSS tablice stilova (style.css).

/ * Ime teme: AJAX Theme Test Theme URI: http://premium.wpmudev.com Opis: tema za testiranje našeg AJAX znanja Autor: Daniel Pataki Autor: URI: http://danielpataki.com Šablon: twentysixteen Verzija: 1.0.0 Licenca : GNU Opća javna licenca v2 ili novija URI licence: http://www.gnu.org/licenses/gpl-2.0.html * /

Podređena tema mora učitati tablicu stilova nadređene teme. U prošlosti se to radilo uvozom CSS datoteke u podređenu temu, ali preporučeni način za to je korištenje "stavljanja u red čekanja". Zapamtite, pokazali smo vam kako koristiti ovu značajku.

Zato dodamo izravno rodni stilski obrazac i JavaScript datoteku:

add_action ('wp_enqueue_scripts', 'ajax_test_scripts'); funkcija ajax_test_scripts () {wp_enqueue_style ('roditeljski stil', get_template_directory_uri (). '/style.css'); wp_enqueue_script ('ajax-test-scripts', get_stylesheet_directory_uri (). '/scripts.js', niz ('jquery'), '1.0.0', true); }

Ako smatrate da imate snage napraviti korak dalje, pronađite lijepu sliku, obrežite je na 880 x 660 piksela i smjestite u mapu s dječjim temama, a zatim je preimenujte " screenshot.png ". Pojavit će se u odjeljku za izgled kada želite aktivirati temu.

Budući da se ova djetetova tema temelji na „ Dvadeset Šesnaest A da nismo još ništa promijenili (još!), Web lokacija bi trebala izgledati točno kao klasična tema s temom " Dvadeset Šesnaest ".

Dodavanje gumba

Za početak, dodaćemo gumb " Prikaži ljubavne unpeu! ". Izvrsno mjesto za prikaz bilo bi na bočnoj traci za tematske članke.

Nakon nekih istraživanja, ispostavilo se da bočnu traku stvara funkcija nazvana " twentysixteen_entry_meta () »Koji se nalazi u direktoriju« Inc. / template-tags.php ".

Ova je funkcija " spojiv Što znači da ga možemo mijenjati definiranjem u vlastitoj datoteci functions.php. Prvi korak ovoga je kopiranje i lijepljenje cijele funkcije u vlastitu datoteku functions.php:

funkcija 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 ('Autor', 'Korišteno prije imena autora posta.', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), array ('post', 'attachment'))) {twentysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('post-format', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Koristi se prije formata posta.', ' dvadeset šesnaest ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Ostavite komentar na% s ', 'twentysixteen'), get_the_title ())); odjek ' '; }}

Dodajmo ključ na dno svih metapodataka:

$ ljubav = get_post_meta (get_the_ID (), 'show_some_love', true); $ ljubav = (prazno ($ ljubav))? 0: $ ljubav; jeka ' '. $ ljubavi. ' ';

Objasniti sve ovo kod:

Prvi redak donosi broj ljubavi koje je članak dobio. U nekim slučajevima ti podaci neće postojati, drugim riječima kada gumb još nije kliknut. Iz tog razloga koristimo

drugi redak u kodu za postavljanje vrijednosti na 0 ako je vrijednost prazna.

Treći red donosi gumb koji se sastoji od raspona koji sadrži sliku i broj ljubavi. Izvor slike sam ostavio prazan jer tamo želim koristiti SVG. Možete upotrijebiti base64 kodiran SVG za izradu linije slike. To vas štedi od postavljanja zahtjeva i učinit će vaše web stranica učinkovitije.

Koristio sam ovu malu besplatnu dostupnu sliku ta veza. Kopirajte i zalijepite primljeni kôd u izvor slike ovako:

$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>';

Također sam koristio malo CSS-a za oblikovanje gumba kako bih mu dao efekt lebdenja. Nije baš očito radi li se o gumbu, ali hoće za naš jednostavan test.

.love gumb img {margina-desno: 6px; neprozirnost: 0.7; pokazivač: točka; } .lat-button img: hover {opacity: 1; }

Pokretanje akcije

Napokon dolazimo do našeg JavaScript-a! Moramo ciljati naš predmet i otkriti ga klikom. Evo kako to učiniti:

(funkcija ($) {$ (dokument) .on ('klik', '.love-gumb img', funkcija () {alarma ("ljubav je podijeljena");})}) (jQuery);

Ako u ovom trenutku kliknete gumb, trebali biste vidjeti JavaScript upozorenje s tekstom "Ljubav se dijeli." "

Zahtjevi za podacima

Umjesto ovog teksta, moramo pokrenuti AJAX poziv. Prije pisanja našeg koda, razumjet ćemo što trebamo poslati.

URL AJAX

Prije svega, trebamo mjesto za slanje podataka. Mjesto na koje šaljemo podatke će ih obraditi i odgovoriti na poziv. WordPress ima ugrađeno mjesto za obradu AJAX poziva, koje možemo koristiti: " admin-ajax.php " u " wp-admin ". Ne možemo dodati ovaj URL u našu skriptu (korištenje "sirovog" kodiranja nije prihvatljivo), Pa neka je koristiti neki lukav WordPress.

Funkcija wp_localize_script () Prvotno je bio namijenjen prevođenju nizova u JavaScript datotekama, što mu dobro ide. Također ga možemo koristiti za prosljeđivanje varijabli u naše JavaScript datoteke, u ovom slučaju URL-a naše AJAX datoteke. Dodajte sljedeći kod u našu datoteku " Funkcije Kako slijedi:

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

Rezultat ovog posljednjeg objekta bit će imenovan ajaxTest, koji će kao svojstvo sadržavati dati niz u posljednjem parametru. Za unos vrijednosti koju možemo koristiti ajaxTest.ajax_url u našem JavaScript koda.

Identifikator članka

Poslat ćemo proizvoljne podatke kao identifikator članka (koji ćemo upotrijebiti za identificiranje članka na kojem želimo "dodati malo ljubavi"). To se može preuzeti iz DOM-a. U nastavku pogledajte strukturu koja se koristi u temi "Dvadeset šesnaest":

Naš gumb ima "članak" kao jedan od svojih predaka. Ovaj element ima klasu i sadrži numerički identifikator članka. Iako ovo nije najelegantnije rješenje, odatle možemo preuzeti ID.

$ (document) .on ('klik', '.love-gumb img', funkcija () {var post_id = parseInt ($ (this) .parents ('article.post:first'). attr ('id') .replace ('post-', '')); console.log (id)})

Akcija

WordPress također zahtijeva da pošaljemo parametar pod nazivom action. Budući da će sve radnje biti poslane na admin-ajax, trebamo način za razlikovanje tih zahtjeva, a time i upotrebu ovog parametra.

Slanje AJAX zahtjeva

Sada sve možemo sastaviti. Moramo stvoriti AJAX poziv za " wp-admin / administrator-ajax.php Koji sadrži ID članka i radnju. Ovako bi to trebalo izgledati.

(funkcija ($) {$ (document) .on ('klik', '.love-gumb img', funkcija () {var post_id = parseInt ($ (this) .parents ('article.post:first'). attr ('id'). zamijenite ('post-', '')); $ .ajax ({url: ajaxTest.ajax_url, upišite: 'post', podaci: {akcija: 'add_love', post_id: post_id,} , uspjeh: funkcija (odgovor) {alert ('uspjeh, novi broj je' + odgovor)}})})}) (jQuery);

$ .ajax () je korištena funkcija koja uzima gomilu parametara. Url sadrži cilj koji je trenutno naša datoteka ajax-url.php ”. Vrsta je postavljena na " pošta » kao i svi zahtjevi koje šalje a obrazac. Parametar podataka je objekt koji sadrži " ključ-vrijednost To želimo poslati poslužitelju. Kasnije ćemo ih moći čitati s $ _POST ['action'] i $ _POST ['post_id'].

obradu zahtjeva

Uobičajeno trebate urediti datoteku " admin-ajax.php », Jer je zahtjev tamo poslan. To je sistemska datoteka, pa je nećemo mijenjati. WordPress vam omogućuje prosljeđivanje AJAX zahtjeva pomoću kvadratnih zagrada s parametrom akcije. Model je sljedeći:

Ako ste imenovali svoju radnju add_love Morate povezati funkciju s kukom pod nazivom " wp_ajax_add_love I / ili wp_ajax_nopriv_add_love ”. Akcije NoPriv ”Izvodi se za odjavljene korisnike, a jedan se aktivira samo za prijavljene korisnike. U našem slučaju željeli bismo koristiti oboje. Kao brzi test postavit ćemo zadanu povratnu vrijednost:

Parametar uspješnosti je funkcija koja će se pokrenuti kad se završi AJAX poziv. Pokazat ćemo jednostavno upozorenje koje pokazuje „Bravo! Novi račun je ”, a naš odgovor dodan je na kraju.

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

Mi smo svoju funkciju priključili na oba zagrada, jedan je učinio odjek 4 i zatim koristio funkciju " die () ”. To je potrebno za WordPress, inače ćete na kraju svakog odgovora dobiti 0. Ako sada kliknete na gumb, trebali biste vidjeti sljedeće:

Da bismo dobili stvarni broj "sviđa mi se", sve što moramo učiniti je dohvatiti trenutni broj, povećati ga za jedan, spremiti u bazu podataka i prikazati novi broj.

funkcija ajax_test_add_love () {$ love = get_post_meta ($ _POST ['post_id'], 'show_some_love', true); $ love = (prazno ($ love))? 0: $ ljubav; $ Ljubav ++; update_post_meta ($ _POST ['post_id'], 'show_some_love', $ love); echo $ love; die (); }

Ako sada kliknete gumb, trebali biste vidjeti skočni prozor s prikazom "1”. Ako osvježite stranicu, trebali biste vidjeti novi broj. Klikom ponovo gumb uspjet ćete 2 ". Sve što sada trebamo učiniti je osigurati da se broj odražava izravno u korisničkom sučelju.

Promijenite korisničko sučelje pomoću odgovora

Ovaj dio čini lako (jer je), ali općenito je najteže sastaviti. Za sada sve što trebamo učiniti je pronaći element koji sadrži trenutni broj i odgovorom modificirati njegov sadržaj.

(funkcija ($) {$ (document) .on ('klik', '.love-gumb img', funkcija () {var post_id = parseInt ($ (this) .parents ('article.post:first'). attr ('id'). zamijeni ('post-', '')); var $ number = $ (this) .parent () find ('. number') $ .ajax ({url: ajaxTest.ajax_url, type: 'post', podaci: {akcija: 'add_love', post_id: post_id,}, uspjeh: funkcija (odgovor) {$ number.text (odgovor);}})})}) (jQuery);

Našem prethodnom JS kodu dodao sam samo dva retka. U retku 5 pohranjujem element koji sadrži broj na varijablu broj $, Na liniji 14 izmjenjujem tekst ovog elementa da bih prikazao odgovor, a to je novi broj.

To je to, u osnovi trebali biste moći vidjeti ovu novu značajku na djelu na svojoj prilagođenoj temi. Ako imate bilo kakvih problema, javite nam. Imate li još jedan savjet koji želite podijeliti? Učinite to u odjeljku za komentare.