Ajax, sau Asynchronous JavaScript si XML, este utilizat pentru a comunica cu scripturile din partea serverului și vă permite să încărcați conținut dinamic fără a fi nevoie să reîncărcați pagina.

Să spunem, de exemplu, că construiești un site-ul web pentru o organizație caritabilă locală și doriți să încurajați un vibe pozitiv. Puteți adăuga un buton etichetat „Arată puțină dragoste! »Cu un contor pe pagina de pornire și, datorită AJAX, de fiecare dată când butonul este activat (făcut clic de a vizitator), contorul crește fără a reîncărca pagina.

Acesta este exemplul pe care îl vom construi în acest tutorial.

În acest tutorial, veți afla mai multe despre ce este AJAX, cum poate fi folosit și cum puteți crea funcții minunate cu acesta pe WordPress.

Să începem.

Elementele de bază ale AJAX

  • Feed-ul AJAX urmează de obicei următorii pași:
  • Lansați un apel AJAX din cauza acțiunii utilizatorului
  • Primiți și procesați cererea pe server
  • Capturați răspunsul și efectuați toate acțiunile necesare prin JavaScript
  • Configurarea unui nou mediu tematic

Să punem acest lucru în practică pe WordPress. Primul nostru exemplu afișează un popup simplu care conține numărul de comentarii pentru un articol atunci când facem clic pe titlu. Vom folosi o temă pentru copii bazată pe „ douăzeci și Șaisprezece De la WordPress.

Iată ce trebuie să faceți:

Creați un nou folder în directorul Teme din instalarea dvs. WordPress în „ WP-conţinut „Și denumiți-l„ ajax-test ”, creați cele două fișiere cerută de WordPressși anume „ functions.php "," Styles.css "și adăugați un nou fișier numit" script.js ". Adăugați următorul cod în antetul foii de stil CSS (style.css).

/ * Tema Nume: Ajax Testare Tema URI: http://premium.wpmudev.com Descriere: O temă pentru testarea cunoștințelor noastre AJAX Autor: Daniel Pataki Autor URI: http://danielpataki.com Format: twentysixteen Versiune: 1.0.0 Licență GNU General public License sau mai târziu v2 Licență URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Foaia de stil a temei părinte trebuie încărcată de tema copilului. În trecut, acest lucru se făcea prin importarea fișierului CSS în tema copil, dar modul recomandat de a face acest lucru este să folosiți „enqueueing”. Amintiți-vă, v-am arătat cum să utilizați această caracteristică.

Deci, să adăugăm foaia de stil părinte și fișierul nostru JavaScript direct:

add_action ('wp_enqueue_scripts', 'ajax_test_scripts'); Funcția ajax_test_scripts () {wp_enqueue_style (stilul părinte 'get_template_directory_uri ()' /style.css „.); wp_enqueue_script (. get_stylesheet_directory_uri 'ajax-test-script-uri' () '/scripts.js', array ( 'jquery'), 1.0.0', adevărat); }

Dacă simți că ai energia să faci un pas mai departe, găsește o imagine frumoasă, decupează-o la 880 px cu 660 px și plasează-o în folderul tematic al copilului, apoi redenumește-l " screenshot.png ". Va apărea în secțiunea aspect, când doriți să activați tema.

tema ajax WordPress

Deoarece această temă pentru copii se bazează pe „ douăzeci și Șaisprezece Și că nu am schimbat nimic (încă!), Site-ul ar trebui să arate exact ca o temă clasică cu tema " douăzeci și Șaisprezece ".

Adăugarea unui buton

Pentru început, vom adăuga butonul " Arătați o mică dragoste! ". Un loc minunat pentru afișare ar fi în bara laterală pentru articolele tematice.

După câteva cercetări, se dovedește că bara laterală este creată de o funcție numită " twentysixteen_entry_meta () »Care se află în directorul« inc / template-tags.php ".

Această funcție este „ conectabil Ceea ce înseamnă că îl putem modifica definindu-l în propriul nostru fișier functions.php. Primul pas al acestui lucru este copierea și lipirea întregii funcții în propriul nostru fișier functions.php:

funcția 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', 'Folosit înainte de numele autorului postării', '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-formats', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Folosit înainte de formatarea postării.', ' 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 (__ ('Lasă un comentariu la% s ', 'twentysixteen'), get_the_title ())); ecou ' '; }}

Să adăugăm cheia noastră în partea de jos a tuturor metadatelor:

$ dragoste = get_post_meta (get_the_ID (), 'show_some_love', true); $ dragoste = (gol ($ dragoste))? 0: $ dragoste; ecou ' '. $ dragoste. ' ';
Să explicăm tot acest cod:

Prima linie recuperează numărul de iubiri pe care le-a primit articolul. În unele cazuri, aceste date nu vor exista, cu alte cuvinte atunci când butonul nu a fost încă făcut clic. Din acest motiv, folosim

a doua linie din cod pentru a seta valoarea la 0 dacă valoarea este goală.

A treia linie oferă butonul, care constă dintr-un interval care conține o imagine și numărul de iubiri. Am lăsat sursa de imagine goală pentru că vreau să folosesc un SVG acolo. Puteți utiliza un SVG codificat base64 pentru a crea o linie de imagine. Acest lucru vă scutește de a face cereri și vă va face site-ul web mai eficient.

Am folosit această mică imagine gratuită disponibilă acest link. Copiați și lipiți codul pe care îl primiți în sursa imaginii astfel:

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

De asemenea, am folosit un pic de CSS pentru stilul butonului pentru a-i oferi un efect de plutire. Nu este foarte evident dacă este un buton, dar va fi pentru testul nostru simplu.

.image-butonul img {margin-right: 6px; opacitate: 0.7; cursor: punct; }. buton img: hover {opacitate: 1; }

buton dragoste tutorial WordPress

Declanșarea unei acțiuni

În cele din urmă, ajungem la JavaScript! Trebuie să vizăm obiectul nostru și să detectăm un clic pe el. Iată cum se face:

.

Dacă faceți clic pe buton în acest moment, ar trebui să vedeți o alertă JavaScript cu textul „Dragostea este partajată”. "

Cerințe de date

În locul acestui text, trebuie să declanșăm un apel AJAX. Înainte de a scrie codul nostru, vom înțelege ce trebuie să trimitem.

Adresa URL AJAX

În primul rând, avem nevoie de un loc unde să trimitem date. Locul în care trimitem datele va prelucra datele și va răspunde la apel. WordPress are un loc încorporat pentru a gestiona apelurile AJAX, pe care le putem folosi: „ admin-ajax.php " interior " wp-admin ". Nu putem adăuga această adresă URL la scriptul nostru (utilizarea codificării „brute” nu este acceptabilă), astfel încât vom folosi unele wordpress viclean.

Funcția wp_localize_script () A fost inițial destinat traducerii șirurilor în fișiere JavaScript, ceea ce face bine. De asemenea, îl putem folosi pentru a transmite variabile către fișierele noastre JavaScript, în acest caz adresa URL a fișierului nostru AJAX. Adăugați următorul cod în fișierul nostru " funcții După cum urmează:

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

Rezultatul acestui ultim obiect va fi denumit ajaxTest, care va conține o matrice dată în ultimul parametru ca proprietăți. Pentru a introduce valoarea pe care o putem folosi ajaxTest.ajax_url în codul nostru JavaScript.

Identificatorul articolului

Vom trimite date arbitrare ca identificator al articolului (pe care îl vom folosi pentru a identifica articolul pe care vrem să „adăugăm puțină dragoste”). Acest lucru poate fi recuperat din DOM. Aruncați o privire la structura utilizată în tema „Douăzeci și șaisprezece” de mai jos:

Structura articolului Twenty Sixteen

Butonul nostru are un „articol” ca unul dintre strămoșii săi. Acest element are clasa și conține identificatorul numeric al articolului. Deși nu este cea mai elegantă soluție, putem lua ID-ul de acolo.

$ (Document) .ON ( 'click', '.love buton img', funcția () {var = parseInt POST_ID ($ (aceasta) .parents ( 'article.post:first'). Attr ( 'id') .replace ('post-', '')); console.log (id)})

Actiunea

WordPress necesită, de asemenea, să trimitem un parametru numit acțiune. Deoarece toate acțiunile vor fi trimise către admin-ajax, avem nevoie de o modalitate de a diferenția aceste solicitări, de unde și utilizarea acestui parametru.

Trimiterea unei cereri AJAX

Acum putem pune totul laolaltă. Trebuie să creăm un apel AJAX pentru „ wp-admin / admin-ajax.php Care conține ID-ul articolului și o acțiune. Iată cum ar trebui să arate.

(Funcția ($) {$ (documentul) .ON ( 'click', '.love buton img', funcția () {var = parseInt POST_ID ($ (aceasta) .parents ( 'article.post:first'). . attr ( 'id') înlocui ( 'post', '')); $ .ajax ({url: de tip ajaxTest.ajax_url 'post', date: {acțiune: 'add_love' POST_ID: POST_ID} , succes: funcție (răspuns) {alert ('succes, noul număr este' + răspuns)}})})})) (jQuery);

$ .ajax () este funcția utilizată care necesită o mulțime de parametri. Url-ul conține ținta care este în prezent fișierul nostru ajax-url.php “. Tipul este setat pe " post » ca toate cererile trimise de a formă. Parametrul de date este un obiect care conține „ cheie-valoare Că vrem să trimitem la server. Mai târziu le vom putea citi cu $ _POST ['action'] și $ _POST ['post_id'].

Procesarea cererii

În mod normal, trebuie să editați fișierul " admin-ajax.php », Pentru că solicitarea este trimisă acolo. Este un fișier de sistem, deci nu îl vom modifica. WordPress vă permite să transmiteți cereri AJAX folosind paranteze pătrate cu parametrul acțiune. Modelul este după cum urmează:

Dacă ai numit acțiunea ta add_love Trebuie să atașați o funcție la un cârlig numit " wp_ajax_add_love Și / sau wp_ajax_nopriv_add_love “. Acțiunile NoPriv ”Se execută pentru utilizatorii deconectați, unul rulează numai pentru utilizatorii conectați. În cazul nostru, am dori să le folosim pe ambele. Ca test rapid, vom seta o valoare de returnare implicită:

Parametrul de succes este o funcție, care va rula la finalizarea apelului AJAX. Vom afișa o alertă simplă care arată „Bravo! Noul cont este „cu răspunsul nostru adăugat la final.

add_action ('wp_ajax_add_love', 'ajax_test_add_love'); add_action ('wp_ajax_nopriv_add_love', 'ajax_test_add_love'); funcția ajax_test_add_love () {echo 4; die (); }

Am atașat funcția noastră la ambele paranteze, una făcută ecou 4 și apoi a folosit funcția " die () “. Acest lucru este necesar pe WordPress, altfel veți primi un 0 la sfârșitul fiecărui răspuns. Dacă faceți clic pe buton acum, ar trebui să vedeți următoarele:

exemplu jquery buton ajax

Pentru a obține numărul real de aprecieri, tot ce trebuie să facem este să preluăm numărul curent, să îl incrementăm cu unul, să îl salvăm în baza de date și să afișăm noul număr.

funcția ajax_test_add_love () {$ love = get_post_meta ($ _POST ['post_id'], 'show_some_love', adevărat); $ love = (gol ($ dragoste))? 0: $ love; $ Dragoste ++; update_post_meta ($ _POST ['post_id'], 'show_some_love', $ dragoste); echo $ love; die (); }

Dacă faceți clic pe buton acum, ar trebui să vedeți fereastra pop-up afișată "1“. Dacă actualizați pagina, ar trebui să vedeți numărul nou afișat. Dacă faceți clic din nou pe buton, veți face 2 ". Tot ce trebuie să facem acum este să ne asigurăm că numărul se reflectă direct în interfața de utilizare.

Efectuați modificări în interfața cu utilizatorul folosind răspunsul

Această parte pare ușor (pentru că este), dar este, în general, cel mai dificil de asamblat. Deocamdată tot ce trebuie să facem este să localizăm elementul care conține numărul curent și să modificăm conținutul acestuia prin răspuns.

(funcția ($) {$ (document) .on ('click', '.love-button img', funcția () {var post_id = parseInt ($ (this) .parents ('article.post:first'). ({{url: ajaxTest.ajax_url, {id});}} {} tip: 'post', date: {action: 'add_love', post_id: post_id,} succes: functie (răspuns) {$ number.text (răspuns);}}}}}}) (jQuery);

Am adăugat doar două linii la codul nostru JS anterior. Pe linia 5, stoc elementul care conține numărul pe variabilă număr $. Pe linia 14, modific textul acestui element pentru a afișa răspunsul, care este noul număr.

Gata, practic ar trebui să puteți vedea această nouă caracteristică în acțiune pe tema personalizată. Dacă aveți vreo problemă, vă rugăm să ne anunțați. Mai aveți un sfat pe care doriți să îl împărtășiți? Faceți-o în secțiunea de comentarii.