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

Recimo, na primjer, da gradite a site Web za lokalnu dobrotvornu organizaciju i želite potaknuti pozitivnu vibraciju. Možete dodati dugme označeno "Pokažite malo ljubavi! »Sa brojačem na početnoj stranici i, zahvaljujući AJAX-u, svaki put kada se dugme aktivira (kliknuo a posjetilac), povećava se brojač bez ponovnog učitavanja stranice.

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

U ovom ćete tutorialu saznati više o tome što je AJAX, kako se može koristiti i kako s njom stvoriti fenomenalne funkcije na WordPressu.

Počnimo.

Osnove AJAX-a

• AJAX feed obično slijedi sljedeće korake:
• Inicirajte AJAX poziv zbog radnje korisnika
• Prima i obrađuje zahtjev na serveru
• 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 na članak kada kliknemo na naslov. Koristit ćemo dječju temu zasnovanu na " dvadeset Šesnaest Od WordPress-a.

Evo šta treba da uradite:

Kreirajte novu mapu u direktorijumu Teme u vašoj WordPress instalaciji u „ wp-sadržaja "I dajte mu ime" ajax-test ", stvorite dvije datoteke zahtijeva WordPressnaime " functions.php "," Styles.css "i dodajte novu datoteku nazvanu" script.js ". Dodajte sljedeći kod u zaglavlje vaše CSS tablice stilova (style.css).

/ * Tema Ime: Ajax Testing temu Tema URI: http://premium.wpmudev.com Opis: Tema za testiranje naše znanje AJAX Autor: Daniel Pataki Autor URI: http://danielpataki.com Template: twentysixteen Verzija: 1.0.0 licence GNU General Public Licence ili kasnije v2 licence URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Podređena tema mora učitati tabelu 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 upotreba "enqueueing". Zapamtite, pokazali smo vam kako se koristi ova funkcija.

Dodajmo stila roditelja i naše JavaScript fajl direktno:

add_action ( 'wp_enqueue_scripts', 'ajax_test_scripts'); ajax_test_scripts funkcija () {wp_enqueue_style (roditelj-style ', get_template_directory_uri ()' /style.css '.); wp_enqueue_script (. get_stylesheet_directory_uri 'ajax-test-skripte' () '/scripts.js', array ( 'jQuery'), 1.0.0 ', true); }

Ako smatrate da imate snage napraviti korak dalje, pronađite lijepu sliku, obrežite je na 880 piksela sa 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 dječja tema temelji na „ dvadeset Šesnaest I da nismo ništa promijenili (još!), Web lokacija bi trebala izgledati upravo kao klasična tema s temom " dvadeset Šesnaest ".

Dodavanje dugmeta

Za početak, dodaćemo dugme " Pokazati ljubav 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 / predložak-tags.php ".

Ova funkcija je " spojiv Što znači da ga možemo modificirati definiranjem u vlastitoj datoteci functions.php. Prvi korak ovog 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-formati', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Koristi se prije formata posta.', ' twentysixteen ')), 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 ())); echo ' '; }}

Dodajmo ključ na dno svih metapodataka:

$ love = get_post_meta (get_the_ID (), 'show_some_love', istina); $ ljubav = (prazno ($ ljubav))? 0: $ ljubav; echo ' '. $ ljubavi. ' ';

Objasniti sve ovo kod:

Prva linija donosi broj ljubavi koje je članak dobio. U nekim slučajevima ti podaci neće postojati, drugim riječima kada tipka još nije pritisnuta. Iz tog razloga koristimo

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

Treći red donosi dugme, koje se sastoji od raspona koji sadrži sliku i broj ljubavi. Izvor slike sam ostavio prazan jer želim da koristim SVG unutra. Možete koristiti SVG kodirani base64 za kreiranje linije slike. Ovo vas štedi od postavljanja zahtjeva i učinit će vaše sajt efikasnije.

Koristio sam ovu malu besplatnu dostupnu sliku ovaj link. Kopirajte i zalijepite kod koji dobijete 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đe sam koristio malo CSS-a za oblikovanje dugmeta kako bih mu dao efekt lebdenja. Nije baš očito radi li se o gumbu, ali hoće za naš jednostavan test.

.love dugmeta img {margin-right: 6px; neprozirnost: 0.7; kursora: pointer; } .love dugmeta img: hover {providnost: 1; }

Pokretanje akcije

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

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

Ako u ovom trenutku kliknete na 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, shvatit ćemo šta 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 "iznutra" wp-admin ". Ne možemo dodati ovaj URL u našu skriptu (upotreba "sirovog" kodiranja nije prihvatljiva), Hajde da koriste neki lukav WordPress.

Funkcija wp_localize_script () Prvotno je bio namijenjen prevođenju nizova u JavaScript datotekama, što mu dobro ide. Takođe 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 kod.

Identifikator članka

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

Naše dugme ima "članak" kao jednog od njegovih predaka. Ovaj element ima klasu i sadrži numerički identifikator članka. Iako to nije najelegantnije rješenje, odatle možemo preuzeti ID.

$ (Dokument) .Na ( 'klik', 'img .love dugmeta', function () {var = parseInt post_id ($ (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, pa stoga i upotrebu ovog parametra.

Slanje AJAX zahteva

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

(Funkcija ($) {$ (dokument) .Na ( 'klik', 'img .love dugmeta', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') zamijeniti ( 'post', '')); $ .ajax ({url: tip ajaxTest.ajax_url 'post', podataka: {akcije: 'add_love' post_id: post_id} , uspjeh: funkcija (odgovor) {alert ( 'uspjeh, novi broj je "+ odgovor)}})})}) (jQuery);

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

za obradu zahtjeva

Obično morate 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 ”Radi za odjavljene korisnike, jedan se izvodi samo za prijavljene korisnike. U našem slučaju bismo željeli koristiti oboje. Kao brzi test postavić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 je dodan na kraju.

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 funkcija () {echo 4; die (); }

Mi smo svoju funkciju priključili na oba zagrada, jedan je urađen odjek 4 i zatim je koristio funkciju " die () ". Ovo je neophodno na WordPress-u, u protivnom ćete na kraju svakog odgovora dobiti 0. Ako sada kliknete na gumb, trebali biste vidjeti sljedeće:

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

ajax_test_add_love function () {$ love = get_post_meta ($ _ POST [ 'post_id'] 'show_some_love', true); Love = $ (prazan ($ love))? 0: $ love; $ Love ++; update_post_meta ($ _ POST [ 'post_id'], 'show_some_love' ljubavi $); echo $ love; die (); }

Ako sada kliknete na gumb, trebali biste vidjeti skočni prozor s prikazom "1". Ako osvježite stranicu, trebali biste vidjeti novi broj. Ponovnim pritiskom na gumb uspjet ćete 2 ". Sve što sada trebamo učiniti je osigurati da se broj direktno prikazuje u korisničkom sučelju.

Promijenite korisničko sučelje koristeći odgovor

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

(Funkcija ($) {$ (dokument) .Na ( 'klik', 'img .love dugmeta', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') zamijeniti ( 'post', '')); var $ broj = $ (this) .parent () find (. 'broj') $ .ajax ({url ajaxTest.ajax_url. tip: 'post', podataka: {akcije: 'add_love' post_id: post_id}, uspjeh: funkcija (odgovor) {$ number.text (odgovor);}})})}) (jQuery);

Dodao sam samo dva reda na naš prethodni JS kod. U liniji 5 čuvam element koji sadrži broj na varijabli $ broj. U 14 liniji modificiram tekst ovog elementa da bih prikazao odgovor, a to je novi broj.

To je to, u osnovi trebali biste biti u mogućnosti 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.